Why share previews matter
When someone pastes your link into Facebook, LinkedIn, WhatsApp, Slack, or X, the platform doesn’t show a bare URL — it “unfurls” it into a rich card with a title, a description, and a large image. That card is your first impression in a feed full of competing posts. A clean, well-chosen card invites the click; a broken image or a missing title makes the link look untrustworthy and quietly kills your reach.
Those cards are controlled by Open Graph tags: a handful of <meta> tags in your page’s <head>. The Open Graph Preview tool lets you see the card and generate the tags before you publish, so nothing is left to chance.
The Open Graph protocol in brief
Open Graph is a simple standard originally created by Facebook and now honoured by almost every platform. Each tag is a <meta property="og:…"> element. The essential four are:
- og:title — the headline shown on the card. Keep it punchy and under about 60 characters so it isn’t truncated.
- og:description — a one- or two-sentence summary. Roughly 55–200 characters works across platforms.
- og:image — the picture shown in the card. This is the single biggest driver of clicks.
- og:url — the canonical URL of the page, so shares always point to one address.
Two more are worth adding: og:site_name (your brand) and og:type (usually website or article). The Open Graph Preview assembles all of these for you and HTML-escapes the values so quotes and angle brackets don’t break your markup.
Twitter / X Cards
X uses its own twitter: tags but falls back to Open Graph when they’re missing. The one tag you should always set explicitly is twitter:card, which chooses the layout:
- summary_large_image — a big, edge-to-edge image above the text. This is what most publishers want.
- summary — a small square thumbnail beside the text.
Set the card type, and X will use your og:title, og:description, and og:image for the rest. The preview tool lets you toggle between the two card types and see the difference immediately.
Getting the image right
The image is where most links go wrong. The reliable standard is 1200 × 630 pixels, a 1.91:1 ratio, kept under about 1 MB, in JPG or PNG. At that size the image stays crisp on high-resolution screens and fills the card on every major platform without awkward cropping.
A few image tips that consistently lift click-through:
Put text inside the image, but keep it large. Cards are often viewed small on phones, so a tiny caption is unreadable. A short, bold headline baked into the image works far better than fine print.
Mind the safe area. Some platforms crop the edges slightly. Keep important elements away from the borders.
Stay on brand. Consistent colours and a logo make your links recognisable in a feed. This consistency at scale is exactly the kind of thing a future Pro image-generation feature is designed to automate — but a single well-made 1200×630 image is all the free tool needs.
Why previews differ across platforms
The same tags can look different on Facebook, LinkedIn, and X because each platform applies its own truncation and layout rules. A 70-character title might display in full on X but get cut on Facebook. That’s why the Open Graph Preview renders three cards side by side, each with realistic per-platform limits, instead of a single idealised mock-up. Seeing all three at once tells you whether your title and description survive everywhere or need trimming.
The tool also runs automatic checks — flagging a missing image, an over-long title, or an absent description — so you catch problems before, not after, you hit publish.
Testing and troubleshooting
A reliable pre-publish routine looks like this:
First, draft your title, description, and image and drop them into the Open Graph Preview. Adjust until all three platform cards look right and the checks are green.
Second, copy the generated meta tags into your page’s <head>. If you also need standard SEO meta tags (title, description, robots), generate those with the Meta Tag Generator and make sure your og:title and <title> are consistent. For deduplicating which URL is canonical, the Canonical Tag Generator pairs naturally with og:url.
Third, after publishing, run the URL through each platform’s own debugger to force a fresh scrape — this clears stale caches if you ever change the image later. To go deeper on the standard meta tags that sit alongside Open Graph, read our meta tag generator guide.
How platforms read and cache your tags
It helps to understand what happens after you publish. When a link is shared, the platform sends a crawler to fetch your page’s HTML and read the <head> for Open Graph and Twitter tags. It then builds the card from those values and — crucially — caches the result, often for days or weeks. This caching is why a link can keep showing an old image long after you’ve changed it: the platform is serving its stored copy, not re-reading your page.
Two practical consequences follow. First, your tags must be in the raw HTML the crawler receives, not injected later by client-side JavaScript that the crawler may not run. If your tags depend on scripts, some platforms will simply miss them. Second, when you do change an image or title, you usually need to force a re-scrape using the platform’s own debugging tool (Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, or X’s card validator) to clear the stale cache. The Open Graph Preview helps you get the tags right before you publish, which is the cheapest moment to fix them — once a URL has been shared and cached widely, corrections propagate slowly.
A pre-launch checklist
Before you ship a page, a quick pass saves a lot of grief: confirm an og:title and og:description are present and within length; confirm og:image points to a real, publicly reachable 1200×630 image; set og:url to the canonical address; choose a twitter:card type; and run the whole set through the Open Graph Preview so you’ve seen all three platform cards. If the page is also being optimised for search, generate matching standard meta tags with the Meta Tag Generator at the same time, keeping the og:title and the document <title> aligned.
The takeaway
Open Graph tags are small but high-leverage: a few lines in your <head> decide whether your link looks professional or broken when shared. Set the four essentials, choose a Twitter card type, use a 1200×630 image, and preview all three platforms before publishing. The Open Graph Preview makes that a thirty-second check rather than a guess — and because it runs entirely in your browser, your draft content never leaves your device.