Test OpenGraph images across social media platforms before deploying.
- Multi-platform preview — See how your OG image appears on Facebook, Twitter/X, LinkedIn, Discord, Slack, WhatsApp, iMessage, and Telegram
- Safe zone visualization — 60px industry-standard margin overlay shows what might get cropped
- Actual display sizes — Images rendered at real platform dimensions, not just scaled
- Zero dependencies — Single HTML file, works offline
- URL parameter support — Share previews with
?url=https://...
Just open index.html in your browser and paste any image URL.
# Using Python
python3 -m http.server 8000
# Using Node
npx serve .
# Using PHP
php -S localhost:8000Then open http://localhost:8000
file:///path/to/og-preview/index.html?url=https://example.com/og.png
| Platform | Display Size | Aspect Ratio | Crops OG 1.91:1? |
|---|---|---|---|
| 500 × 261 | 1.92:1 | May crop | |
| Twitter/X | 506 × 265 | 1.91:1 | No |
| 520 × 272 | 1.91:1 | No | |
| Discord | 400 × 210 | 1.90:1 | No |
| Slack | 360 × 189 | 1.90:1 | No |
| 300 × 157 | 1.91:1 | No | |
| iMessage | 300 × 157 | 1.91:1 | No |
| Telegram | 320 × 168 | 1.90:1 | No |
OG images are 1200×630px. The 60px safe zone (industry standard) ensures important content isn't cropped:
- Safe area: 1080 × 510px (center)
- Danger zone: 60px from all edges
Keep logos, text, and CTAs inside the safe zone.
- Test with real URLs — Use your actual OG image endpoint, not local files (CORS)
- Add cache busters — Append
?t=123to force reload:https://example.com/og.png?t=123 - Check Facebook specifically — It crops more aggressively than other platforms
- Design for small sizes — Images display at 25-50% of original, ensure text is readable
MIT