Social sharing preview metadata is configured

When a URL is shared on Twitter/X, LinkedIn, Slack, iMessage, or WhatsApp, those platforms fetch Open Graph and Twitter Card metadata to generate a rich link preview with title, description, and image. Without og:image — the single most important OG tag — links render as plain text with no visual. This directly suppresses click-through rates on your launch announcements, Product Hunt submission, and any social campaign. A missing OG image is a silent launch tax: every share underperforms without it.

Configure openGraph and twitter metadata in app/layout.tsx. Create an OG image at public/og-image.png at 1200x630px.

// app/layout.tsx
export const metadata = {
  openGraph: {
    title: 'Your Site Name',
    description: 'What your product does in one sentence.',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    images: ['/og-image.png'],
  },
}

Validate your tags at https://opengraph.xyz before launch. Ensure the OG image file exists in public/ — a broken image reference is worse than no tag at all because platforms cache the broken result.

• ID: social-sharing

• Severity: medium

• What to look for: Count all OG (Open Graph) and Twitter Card meta tags. Enumerate which required properties are present: og:title, og:description, og:image, og:url, twitter:card. Check layout components and page metadata for Open Graph and Twitter Card tags. In Next.js App Router, look for a metadata export with openGraph and twitter properties in app/layout.tsx or key page files. In Pages Router, look for <meta property="og:title">, <meta property="og:image">, <meta name="twitter:card">, etc. in _app.tsx or individual pages. Check if an og:image is defined and references a real image file in public/. Before evaluating, extract and quote the first 3 OG meta tag values found in the codebase.

• Pass criteria: At minimum, og:title, og:description, and og:image are configured at the site level, and a valid OG image file exists or URL is provided. At least 4 of 5 required social meta tags (og:title, og:description, og:image, og:url, twitter:card) must be present.

• Fail criteria: No Open Graph tags found, or og:image is missing (the most critical OG tag for link previews), or og:image references a file that doesn't exist in public/.

• Skip (N/A) when: Skip for API-only projects or internal tools not meant for social sharing. Signal: project type is api or cli, no public-facing marketing pages.

• Cross-reference: For favicon and icons, see favicon.

• Detail on fail: "No Open Graph metadata found — links shared on social media and messaging apps will render as plain text with no preview image"

• Remediation: When your URL is shared on social media, Slack, or messaging apps, platforms read Open Graph tags to generate a rich preview with title, description, and image. Without them, your link looks bare and gets ignored:

  // app/layout.tsx — social sharing metadata
  export const metadata = { openGraph: { title: '...', description: '...', images: '/og.png', url: 'https://yoursite.com' }, twitter: { card: 'summary_large_image' } }
  

  // app/layout.tsx (Next.js App Router)
  export const metadata = {
    openGraph: {
      title: 'Your Site Name',
      description: 'A clear, compelling description of what your product does.',
      images: [{ url: '/og-image.png', width: 1200, height: 630 }],
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: 'Your Site Name',
      description: 'A clear, compelling description.',
      images: ['/og-image.png'],
    },
  }
  

  The OG image should be 1200x630 pixels for best cross-platform compatibility. Validate your tags at https://opengraph.xyz or the Twitter Card Validator. For a deeper analysis of SEO and social metadata, the SEO Fundamentals Audit covers this comprehensively.