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.