When someone shares your link on Facebook, LinkedIn, Slack or Discord, the
preview card they see is built from the Open Graph meta tags in your page’s
<head>. This tool shows that card live as you type and generates the exact
og: tags to copy and paste — so you can check the result before publishing
rather than after the link is already out in the wild.
How it works
Open Graph is a metadata protocol (originally from Facebook, now an open standard) that lets any page declare how it should appear when shared. Crawlers read four core properties:
| Tag | Purpose |
|---|---|
og:title | The card headline |
og:description | The supporting line under the title |
og:url | The canonical link the card points to |
og:image | The thumbnail or large preview image |
You fill in those values; the preview re-renders instantly and the tool emits the
matching <meta property="og:..." content="..."> lines. Paste them into your
<head> and crawlers will build the same card you see here.
Worked example
For a blog post you might enter an og:title of “How we cut our build time in
half”, an og:description summarising the post, the canonical og:url, and an
og:image URL. The tool then generates:
<meta property="og:title" content="How we cut our build time in half" />
<meta property="og:description" content="A practical write-up..." />
<meta property="og:url" content="https://example.com/blog/faster-builds" />
<meta property="og:image" content="https://example.com/og/faster-builds.png" />Use a 1200×630 image (a 1.91:1 ratio) for the cleanest large card without cropping, and keep titles under about 60 characters so they are not trimmed. Everything runs locally in your browser; nothing you enter is uploaded.
Image sizing and platform quirks
The recommended 1200×630 px image renders as a large card on Facebook and LinkedIn. Platforms that show a smaller thumbnail (like WhatsApp) crop the image to a square from the center, so put your key visual in the middle third.
| Platform | Preferred image size | Card style |
|---|---|---|
| 1200 × 630 px | Large card | |
| 1200 × 627 px | Large card | |
| Slack | 1200 × 630 px | Inline preview |
| Discord | 1200 × 630 px | Inline embed |
| 300 × 200 px minimum | Small thumbnail |
If you do not supply an og:image, most platforms show a blank grey box — a missed opportunity every time someone shares your link.
Why og:title and the page <title> differ
The HTML <title> element controls the browser tab and search engine result headline. It typically includes the site name — for example “How we cut build time in half | Acme Blog”. The og:title is the social card headline and works better without the site name, because the card already shows the domain. Many teams write a punchier, more specific og:title than the HTML <title>.
Refreshing cached cards
Platforms cache the first preview they fetch and can hold it for days. After updating your Open Graph tags, use the platform’s own scraping tool to force a refresh:
- Facebook: Sharing Debugger at developers.facebook.com/tools/debug
- LinkedIn: Post Inspector at linkedin.com/post-inspector
- Twitter/X: Card Validator at cards-dev.twitter.com/validator
These tools re-fetch the page and reset the cache so the next share shows the updated card.