The Complete OpenGraph Tag Checklist for Developers

Open Graph tags control how your links appear when shared on LinkedIn, X (Twitter), Slack, Discord, WhatsApp, iMessage, and Facebook. This is the complete reference — every tag, every platform quirk, and a copy-paste Next.js template.

The required tags (every page)

<meta property="og:title" content="Your Page Title — Under 70 characters" />
<meta property="og:description" content="Your description — 150–160 characters for best display." />
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/this-exact-page" />
<meta property="og:type" content="website" />  <!-- use "article" for blog posts -->

Image requirements by platform

X (Twitter)-specific tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:creator" content="@authorhandle" />
<!-- title, description, image fall back to og: tags if these are missing -->

Article-specific tags

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-07-29T09:00:00+00:00" />
<meta property="article:modified_time" content="2026-07-29T09:00:00+00:00" />
<meta property="article:author" content="https://yoursite.com/about" />
<meta property="article:tag" content="developer tools" />

Next.js App Router metadata template

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = getPostBySlug(params.slug)
  return {
    title: post.title,
    description: post.description,
    alternates: { canonical: `https://yoursite.com/blog/${post.slug}` },
    openGraph: {
      title: post.title,
      description: post.description,
      url: `https://yoursite.com/blog/${post.slug}`,
      type: "article",
      publishedTime: post.date,
      images: [{ url: `https://yoursite.com/og/${post.slug}.png`, width: 1200, height: 628 }],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.description,
    },
  }
}

Common mistakes checklist

• ✗Relative image URL (og:image must be absolute — https://...)
• ✗Image hosted behind login/auth (bots fetch anonymously)
• ✗Same og:title as <title> tag — duplicate but acceptable; just not required to match exactly
• ✗og:description over 200 characters — most platforms truncate at 150–160
• ✗Missing og:url — breaks deduplication when shared multiple times
• ✗Not refreshing LinkedIn cache after fixing (use linkedin.com/post-inspector)
• ✓Test before publishing with the OG Preview Tester
• ✓Use opengraph-image.tsx in Next.js for auto-generated OG images per page

Before publishing, preview exactly how each of your pages will appear on LinkedIn, X, Slack, and Discord with the OpenGraph Preview Tester — paste a URL or your raw HTML, see all 5 platform cards instantly.