vibecheck0.3.0
Search visibilityseoog-image-missingwarning

Missing social preview image (og:image) in Next.js

When your page is shared on Slack, X, LinkedIn, or iMessage, the platform reads <meta property="og:image"> to draw the preview card. With none, the link renders as a bare, blank box — a preview that says “this looks broken”. AI-built pages almost never generate an OG image because it is an asset plus a head tag, not component code.

Framework fixes
GeneralReactNext.jsVueSvelteVanilla JS

Symptoms

  • Shared links show an empty or generic grey preview
  • Slack/Discord unfurls have no thumbnail
  • Link previews look unfinished next to competitors’ rich cards

How VibeCheck catches it

In your widget · Problems

warningseoMissing social preview image (og:image)

To your coding agent · MCP

agent › get_detected_issues
→ { detector: "seo", issue: "Missing social preview image (og:image)", threshold: "no <meta property="og:image">" }

The same string in your widget and in your agent’s context — no screenshot, no copy-paste.

Root causes

  • No OG image asset was ever created
  • The <head> is unmanaged so no og:* tags are emitted
  • Only og:title was set, leaving the image out

The fix for Next.js

Set images in the metadata openGraph object, or generate them dynamically with the built-in ImageResponse in an opengraph-image.tsx file — Next wires up the tags and dimensions.

tsx
export const metadata: Metadata = {
  openGraph: {
    images: [{ url: 'https://acme.com/og/pricing.png', width: 1200, height: 630 }],
  },
}

Next.js docs →

Steps

  1. Create a 1200×630 preview image (or generate one per route)
  2. Host it at an absolute URL
  3. Add og:image plus width/height meta tags in <head>

See the general, framework-agnostic fix →

FAQ

What size should the og:image be?
1200×630 pixels (1.91:1) is the standard that renders well everywhere. Keep it under ~1MB and use PNG or JPG.
Can I use a relative image URL?
No. Crawlers fetch og:image from an absolute URL. A relative path resolves against the crawler, not your site, and fails.
Why is my new image not showing when I share?
Platforms cache unfurls aggressively. Use the platform’s debugger (e.g. the Facebook Sharing Debugger or X Card Validator) to force a re-scrape.