Open Graph Preview
Preview how your page looks when shared on Facebook, Twitter, and LinkedIn.
Real-time PreviewRelated Tools
What is Open Graph?
Open Graph (OG) is a protocol developed by Facebook in 2010 to standardize how websites describe their content for social sharing. By adding a few <meta property="og:..."> tags to your HTML <head>, you control the link preview shown when your URL is shared on:
- Facebook, Instagram, LinkedIn, Pinterest
- Slack, Discord, Telegram, WhatsApp, Microsoft Teams
- iMessage, Google Chat, most email clients with rich previews
Open Graph + Twitter Cards
Twitter (X) has its own similar protocol Twitter Cards, but falls back to OG tags when Twitter-specific tags are absent. The most common card type — summary_large_image — shows the same kind of large image preview as OG. Using both ensures consistent appearance across all major platforms.
Why preview matters
A compelling image and headline can 2–5× the click-through rate when your link is shared. Without OG tags, your link looks like a sad URL with no visual context — the platform either shows nothing or scrapes random images from your page. With proper OG tags, you control the entire first impression.
How to Use
- Enter the page URL and the OG fields:
title,description,image URL. - Switch between Facebook, Twitter, and LinkedIn preview tabs to see how the card renders on each platform.
- Check the Checklist for issues — image dimensions, missing required fields, broken URLs.
- Use the Meta Tag Generator tool to produce the HTML tags. Copy and paste into your page's
<head>. - Test the live page with platform debuggers (see Debugging tab) before announcing.
OG Image Specifications
Recommended dimensions per platform
| Platform | Optimal size | Aspect ratio |
|---|---|---|
| Facebook / Instagram | 1200 × 630 | 1.91:1 |
| 1200 × 627 | 1.91:1 | |
| Twitter (summary_large_image) | 1200 × 628 | 1.91:1 |
| Twitter (summary) | 300 × 300 | 1:1 |
| Slack / Discord | 1200 × 630 | 1.91:1 (uses OG) |
| 1000 × 1500 | 2:3 (vertical) | |
| iMessage rich preview | 1200 × 630 | 1.91:1 |
Universal recommendation: 1200 × 630 (1.91:1) works on all major platforms. Pinterest is the only outlier needing vertical images.
File constraints
- Format: JPG, PNG, or WebP. GIF works but only the first frame shows.
- Max file size: 8 MB (Facebook/LinkedIn), 5 MB (Twitter). Aim for under 2 MB for fast preview generation.
- Min dimensions: 600 × 315 (anything smaller is rejected by Facebook).
- Aspect ratio tolerance: Platforms crop to ~1.91:1 — center your important content.
- Image URL: Must be absolute (https://...). Must respond with proper Content-Type header.
Design tips for OG images
- Center key content — edges may be cropped
- Large readable text (40px+ at full size)
- High contrast — image previews are often shown small
- Brand identity: logo or color, but not dominant
- Consider mobile crop: 1200×630 displays as ~600×315 on mobile
- Test in dark mode (Twitter/Slack default to dark UI)
Platform Debugging Tools
Each major platform provides a debugger that re-scrapes your URL and shows what they see. Use these whenever you update OG tags — caches are aggressive (hours to weeks).
| Platform | Debugger URL |
|---|---|
| developers.facebook.com/tools/debug/ | |
| Twitter / X | cards-dev.twitter.com/validator |
| linkedin.com/post-inspector/ | |
| developers.pinterest.com/tools/url-debugger/ | |
| Telegram | @WebpageBot in Telegram |
| Slack | No debugger; uses OG, cache busts on text edit |
Cache busting tactics
- Click "Scrape Again" / "Fetch new information" in each debugger
- Add a cache-busting query parameter:
?v=2 - For Slack/Discord, edit the message after sharing — they re-scrape
- For email clients, expect 24–48h cache
Common preview failures
- "Image not found" — image URL is relative, not absolute, or returns 404
- "Image too small" — under 600×315
- "Could not download URL" — robots.txt or auth blocks the crawler
- Wrong title/description shown — old cache; use debugger to refresh
- White/black bars — image isn't 1.91:1; platform pads to fit
FAQ
Why isn't my updated image showing?
Social platforms cache OG data aggressively (hours to days). Facebook keeps caches up to 30 days. Use the Sharing Debugger (Facebook) or Card Validator (Twitter) to force a re-fetch. Slack re-scrapes if you edit the message after sharing.
What image size should I use?
1200 × 630 pixels at 1.91:1 aspect ratio is the universal recommendation. File size under 2 MB. JPG or PNG both work; PNG for screenshots and graphics with text, JPG for photos.
Can I use different images per platform?
Yes — use og:image for Facebook/LinkedIn/etc. and twitter:image for Twitter. Most sites use the same image for both. Pinterest specifically wants a vertical (2:3) image and reads its own pinterest: tags or the OG image as a fallback.
Do I need OG tags if I have <title> and <meta description>?
For social shares: yes. Facebook/LinkedIn/Slack specifically look for OG tags. They fall back to <title> if missing, but you lose the image. Always include at minimum: og:title, og:description, og:image, og:url.
Can I generate OG images dynamically?
Yes — common pattern. Next.js has opengraph-image.png route convention with React components rendered to images. Vercel OG, Cloudflare Workers, or custom Puppeteer scripts can generate personalized OG images per page (with the page title in the image, etc.).
Why is my Slack/Discord preview different from Twitter?
Slack and Discord use OG tags. Twitter uses twitter:* tags first, falls back to OG. If you want consistent previews, set both to identical values. Differences usually mean Twitter-specific tags differ from OG.