# Missing social preview image (og:image) in Next.js
> How to fix missing social preview image (og:image) in Next.js — with the exact fix and copy-paste code.
_Category: Search visibility · Detector `seo` · Check `og-image-missing` · Severity: warning_
When your page is shared on Slack, X, LinkedIn, or iMessage, the platform reads `` 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.
## 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](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#opengraph)
### 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 ``
## How VibeCheck detects it
The `seo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.
- **Issue string:** `Missing social preview image (og:image)`
- **Threshold:** no
## 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.
See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/missing-og-image.md
---
Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-og-image. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt