vibecheck0.3.0
Search visibilityseoog-image-missingwarning

Missing social preview image (og:image) in React

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 React

Render the og:image meta tags in the component (React 19), using an absolute URL.

tsx
<meta property="og:image" content="https://acme.com/og/pricing.png" />

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.