Each page has a per-page OG image, not just a global fallback

A single global OG image — typically the homepage screenshot or company logo — appears on every page share regardless of content. When a product page, blog post, or feature announcement is shared, it shows the same generic image that already appeared on every other share. Per ogp.me, the og:image is the dominant visual element in a link preview card; identical images across all shares collapse the visual distinction that drives clicks. Users scanning a Twitter/X or LinkedIn feed cannot tell from the image alone what the linked page is about. This uniformity is a direct findability failure: content that could attract clicks based on its subject matter is instead indistinguishable from other shares of the same site.

Use Next.js's built-in OG image generation to produce per-route images. For blog and article pages, create an opengraph-image.tsx file in the route directory:

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'
export default async function Image({ params }) {
  const post = await getPost(params.slug)
  return new ImageResponse(
    <div style={{ display: 'flex', fontSize: 48, background: 'white', width: '100%', height: '100%' }}>
      {post.title}
    </div>,
    { width: 1200, height: 630 }
  )
}

For sections without per-item images, create at least one distinct static image per major content type (e.g., /og/blog.png, /og/products.png) and reference it in the section's layout metadata.

• ID: marketing-social-sharing.open-graph.og-image-per-page

• Severity: critical

• What to look for: Check whether OG images are differentiated per content type or per page. Look for: individual openGraph.images overrides in page-level metadata exports, generateMetadata functions that construct per-item image URLs (e.g., using a dynamic OG image API like /api/og?title=...), or distinct image paths per route section (e.g., /og/blog.png, /og/product.png). A single /og-image.png in the root layout used for every page without exception is the failure pattern. Count all instances found and enumerate each.

• Pass criteria: At minimum, each major content section (blog, product pages, landing pages) uses a distinct OG image or a dynamically generated one. Individual post/product pages generate per-item images. At least 1 implementation must be confirmed.

• Fail criteria: All pages across the entire site share the same single static og:image URL with no per-section or per-item variation. This includes a root layout setting one image that is never overridden anywhere in the codebase.

• Skip (N/A) when: The site is a single-page application or landing page with only one public-facing URL.

• Detail on fail: "Single og:image (/og-image.png) used globally with no per-page or per-section overrides found anywhere in the codebase"

• Remediation: A generic company logo or homepage screenshot shared every time any page is linked performs poorly on social platforms — users scrolling through a feed cannot distinguish what the link leads to. For blog and article pages, generate per-post images. Next.js has built-in OG image generation:

  // app/blog/[slug]/opengraph-image.tsx
  import { ImageResponse } from 'next/og'
  export default async function Image({ params }) {
    const post = await getPost(params.slug)
    return new ImageResponse(
      <div style={{ display: 'flex', fontSize: 48, background: 'white', width: '100%', height: '100%' }}>
        {post.title}
      </div>,
      { width: 1200, height: 630 }
    )
  }
  

  For product or profile pages, at minimum provide a section-specific static image (e.g., a product category banner) rather than the homepage image.