# Missing social preview image (og:image) in Svelte
> How to fix missing social preview image (og:image) in Svelte — 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 Svelte
Emit the `og:image` tag inside ``.
```svelte
```
### 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