Skip to main content

Open Graph tags are present

ab-002523 · seo-fundamentals.social-sharing.og-tags
Severity: highactive

Why it matters

Open Graph tags control the preview card that renders when your URL is pasted into Slack, Discord, LinkedIn, Facebook, iMessage, WhatsApp, and every other platform that implements the OG protocol. Without og:image specifically, the link unfurls as a plain text snippet — no thumbnail, no visual hook — which drops click-through rates in social feeds by roughly 2-3x compared to cards with images. Launch tweets, blog shares, and newsletter links all degrade simultaneously.

Severity rationale

High because missing OG tags silently cripple every share event on every platform — the cost is invisible until you ship.

Remediation

Set the three required properties in your root layout so every page inherits a default, then override per-page for high-value routes. Place a 1200x630 pixel image at public/og-image.png.

// app/layout.tsx
export const metadata = {
  openGraph: {
    title: 'YourSite',
    description: 'A brief description of your site',
    images: [{ url: 'https://yoursite.com/og-image.png', width: 1200, height: 630 }],
  },
}

For dynamic content, use Next.js's app/opengraph-image.tsx convention to generate per-page images at request time.

Detection

  • ID: seo-fundamentals.social-sharing.og-tags

  • Severity: high

  • What to look for: Check for Open Graph meta tags: og:title, og:description, and og:image. In Next.js App Router, these are set via the openGraph property in metadata exports. In other frameworks, look for <meta property="og:*"> tags in the head.

  • Pass criteria: Count all Open Graph properties configured across the project. At minimum, the root layout or key pages must have all 3 of og:title, og:description, and og:image set. They can be inherited from a layout or set per-page. Do NOT pass when fewer than 3 of these required OG properties are present.

  • Fail criteria: No Open Graph tags found across the project, or og:image is missing (title and description without an image still fails — the image is critical for social sharing). Report: "Found X of 3 required OG properties (og:title, og:description, og:image)."

  • Skip (N/A) when: Never — Open Graph tags are essential for any public-facing web project.

  • Detail on fail: Specify which OG tags are missing. Example: "No Open Graph tags found in any page or layout" or "og:title and og:description present but og:image missing — shared links will have no preview image"

  • Cross-reference: For deeper social media presence and marketing analytics, the Marketing Analytics audit covers this in detail.

  • Remediation: Open Graph tags control how your site appears when shared on social media. Add them to your metadata:

    export const metadata = {
      openGraph: {
        title: 'YourSite',
        description: 'A brief description of your site',
        images: [{ url: 'https://yoursite.com/og-image.png', width: 1200, height: 630 }],
      },
    }
    

    Create an OG image at 1200x630 pixels and place it in your public/ directory.

Taxons

History