Search DevTools

Jump to any tool or page

Social Card & Open Graph Previewer

See how a URL will render on X, Facebook, LinkedIn, Slack, Discord, and Google search before you post it — then find and fix what's broken.

Inspect

Nothing loaded

Fetch a live URL

Reads the page's meta tags
URL

Preview

example.com

Where it unfurls

Live from the page's own tags
title cuts at 65 · description at 120
No image set

No title set

No description set

example.com

https://example.com

11:42
Visual Creation

About Social Card Preview

Paste a URL or your meta tags to see how the link renders as a card on Twitter/X, Facebook, LinkedIn and Slack before you publish. Each platform resolves a different tag precedence — Twitter reads twitter:* first and falls back to og:*, while Facebook ignores twitter:* entirely — so a page can preview perfectly on one network and render as a bare text link on another.

Related Visual Creation tools

Resume BuilderChart GeneratorSVG AnimatorIndian MapColor Palette

Frequently asked questions

What is the difference between summary and summary_large_image?
twitter:card selects the layout. summary renders a small square thumbnail, roughly 144x144 displayed, beside the title and description. summary_large_image renders a full-width 2:1 banner above the text, which is what most sites want. If you supply a 1200x630 image but leave the card type as summary, X crops it to a square and the composition breaks. Omitting twitter:card altogether makes X fall back to Open Graph and usually pick the small layout.
Why does the same link unfurl differently on Slack and Facebook?
Slack's unfurler prefers oEmbed if the domain publishes an endpoint, then falls back to Open Graph, then to twitter:* tags, and finally to a title and meta description scrape. Facebook reads only og:* and its own fb:* tags. LinkedIn reads og:* but requires og:image to be an absolute HTTPS URL and will silently skip images it considers too small. So a page with only twitter:* tags renders richly on X, adequately on Slack, and as a plain link on Facebook.
How long can the title and description be before truncation?
Truncation happens client-side at render, so the tag content is not what limits you — the card width is. In practice X shows about 70 characters of og:title and around 200 of og:description, Facebook shows roughly 88 and 300, LinkedIn about 120 and 220, and Slack wraps to three lines. Front-load the meaningful words. Also strip newlines: some scrapers treat an unescaped newline inside a content attribute as the end of the value.
Why does my card work locally but not once deployed?
Two causes dominate. First, scrapers do not run JavaScript, so tags injected client-side by a router or a helmet-style component after hydration are invisible — they must be present in the server-rendered HTML. Second, deployment protection, a staging basic-auth prompt, a robots.txt disallow, or a WAF rule blocking unfamiliar user agents will return 401, 403 or 404 to the crawler. Check the response your origin gives to facebookexternalhit and Twitterbot specifically.
Do canonical URLs and redirects affect what gets cached?
Yes. Platforms key their cache on the URL after following redirects, and Facebook additionally treats og:url as canonical — engagement counts and the cached card attach to that value, not to the URL that was shared. If og:url points at a different host or a trailing-slash variant, you fragment the cache and can end up scraping a page that redirects back, producing an empty card. Keep og:url identical to the canonical link tag and self-referential.