Open Graph Preview Tool
See exactly how your page looks when someone shares it — before you publish.
When a link is shared, Facebook, X (Twitter), LinkedIn, WhatsApp and Slack don’t read
your page the way a person does — they read the Open Graph (and Twitter Card)
meta tags in your <head>: the title, description and
image. Get those wrong and your post shows a truncated title, a random image, or no
image at all. This tool renders your metadata the way each platform actually displays it —
with that platform’s real truncation limits and image-crop behaviour — so you can
fix it before it goes out. Edit any field and every preview updates live.
Your metadata
Paste an image URL or upload a file. The tool loads it in your browser and checks its dimensions against each platform’s recommended size — no upload to us.
Live preview (how each platform renders your link)
Red marks show where a platform cuts your text off. Image boxes are cropped to the platform’s aspect ratio, just like the real feed.
Image analysis
Load an image above to see its dimensions and how well it fits each platform.
Validation & ready-to-paste tags
What Open Graph actually is
Open Graph is a convention (started by Facebook in 2010, now used by most major platforms)
where you describe your page with a set of <meta> tags in the
<head>. When someone shares your link, the platform’s crawler
fetches the page and reads those tags to build the preview card. The four that matter most
are og:title, og:description, og:image and
og:url. X (Twitter) uses a parallel set called Twitter Cards
(twitter:card, twitter:title, …) that fall back to the
Open Graph values when absent. If you don’t provide tags, each platform guesses from
your <title>, visible text and the first image it can find — which
is usually not the image you wanted.
Platform limits at a glance
| Platform | Title display | Description display | Image guidance |
|---|
Limits are approximate — platforms truncate dynamically based on the device and layout, and none publish exact character counts. The numbers here reflect what is commonly observed in feeds, and this tool uses them to flag where your text will most likely get cut.
Common mistakes that ruin a share
- Relative image paths.
og:image="/img/cover.jpg"is useless to a crawler — it needs an absolute URL (https://…). Use the full domain. - Title too long. The first ~40–60 characters are what most people actually see. Lead with the point; push secondary detail into the description.
- No image, or a tiny one. Without
og:image, or with an image under ~200×200, X falls back to a text-only card and other platforms may show nothing. Aim for ~1200×630 (1.91:1). - Wrong aspect ratio. A portrait or square image gets centre-cropped on a 1.91:1 card, often cutting off the subject or any text baked into the image.
- Forgetting twitter:card. Without
twitter:card, X may not show your large image even ifog:imageis set. Set it tosummary_large_image. - Testing only in your own browser. Browsers cache the crawler’s result. After changing tags, re-check with each platform’s official debugger (Facebook Sharing Debugger, X Card Validator) so the new card is what gets shared.
Where to put the tags
Put the generated snippet inside your page’s <head>, ideally right
after the <title>. For a site where every page shares the same brand, set
og:site_name and a default image once in the template, then override
og:title / og:description / og:image per page. In
Django that’s just template variables in your base template’s head block; in a
static site, drop the tags into each page’s head.
Suggested
