Open Graph & Social Card Previewer
Preview how your pages look when shared on Facebook, X, LinkedIn, Slack, Discord and WhatsApp, and audit the tags behind the card.
Read a page
Social preview
Previews are approximate. Actual rendering varies by platform version and device.
Tag audit
0/8 tags foundog:titleMissingPlatforms fall back to the page title tag, and to the bare URL when there is none.
og:descriptionMissingPlatforms fall back to the meta description, or show no summary line at all.
og:imageMissingWithout an image the card shrinks to a text link on every platform, which is the biggest single drop in click rate.
og:urlMissingPlatforms use the shared link instead, so tracking parameters get counted as separate posts.
og:typeCheckDefaults to website, which is fine for most pages.
og:site_nameMissingPlatforms print the bare domain instead of your brand name.
twitter:cardCheckWithout this, X shows the small summary card even when og:image is set.
twitter:imageMissingNo image for X to use, from either namespace.
Tags on the page
No tags yet. Read a page or fill in the fields, and the markup to paste appears here.
How to use it
- Paste a URL and click Preview. The page is fetched server-side, its Open Graph and Twitter Card tags are read, and the og:image is fetched far enough to measure its real dimensions and file size.
- Switch between the platform tabs to see the same tags rendered as each one renders them. Facebook and LinkedIn crop differently, X changes layout entirely based on twitter:card, and WhatsApp reduces everything to a 62px square.
- Use the audit to see what is missing or over length, then switch to Manual to edit the fields and watch the previews update. Copy the generated tags into your page's head section when the card looks right.
Getting the card right
- The ideal card image is 1200x630 pixels, a 1.91:1 ratio. Every platform here crops that shape least, and it is the size the audit measures against.
- Keep the important part of the image centred. WhatsApp crops to a 62px square and X crops to a square on the small card, so anything near an edge is the first thing to go.
- X falls back to your og: tags for title, description and image. The one tag it will not infer is twitter:card, and without it you get the small thumbnail card no matter how good your image is.
- LinkedIn shows no description at all, only the headline and the domain. If your og:title does not carry the whole pitch, the LinkedIn card will not either.
- Discord renders cards as dark embeds. An image designed against a white page can vanish into that background, which is why the Discord tab here has a dark surround.
- Platforms cache aggressively. After changing tags, run the URL through Facebook's Sharing Debugger and LinkedIn's Post Inspector to force a re-scrape, or the old card will keep appearing for days.
- An og:url pointing at the wrong address quietly splits your share counts and sends engagement to a page you did not mean to promote. It is worth checking on any templated page.
Frequently asked questions
What are Open Graph tags?
Open Graph tags are meta tags in your HTML that control how a page looks when it is shared on social platforms. They tell Facebook, LinkedIn, X, and every chat client what title, description, and image to display. Without them, platforms guess from your page content, which usually means the wrong headline and no image at all.
What size should my og:image be?
1200x630 pixels, which is a 1.91:1 ratio. That works across Facebook, LinkedIn, and the large X card without heavy cropping. Keep important content away from the edges, because each platform crops differently, and keep the file under 5MB since Facebook will not scrape anything larger. This tool reads the real dimensions and file size of your image and flags all three problems.
Do I need separate Twitter Card tags?
Usually not. X falls back to og:title, og:description, and og:image when the twitter: equivalents are absent, so duplicating them adds nothing. The exception is twitter:card, which has no Open Graph equivalent. Without it X renders the small summary card, so a page with a perfect 1200x630 image still shows a thumbnail. Set twitter:card to summary_large_image and leave the rest alone.
Why does my card still show the old image after I fixed the tags?
Every platform caches what it scraped, often for days. Facebook has a Sharing Debugger that re-scrapes a URL on demand, and LinkedIn has a Post Inspector that does the same. Slack and Discord clear their caches on their own schedule. X retired its Card Validator, so the practical test there is pasting the link into a draft post. This tool always fetches your page live, so what it shows is your current markup rather than a cached copy.
Why does the preview show a broken image when the URL works in my browser?
Usually hotlink protection, or an image served only over http on an https page. Platforms fetch your og:image from their own servers with no cookies and no referrer, so an image that needs either will fail for them exactly as it fails here. The audit also reports the status code and content type it got back, which is normally enough to tell the two cases apart.