Open Graph Preview — X, Facebook, LinkedIn, Slack, Discord
Fetch a page’s Open Graph tags by URL, or paste its HTML. Previews the share card on five platforms at their real widths.
1200 × 630 (1.91:1) — one image serves every platform
Overview
A share card is the first thing most people see of a page, and it is rendered by five different platforms with five different layouts. This tool draws all of them at their real feed widths from the same tags, so “does the title get cut off on LinkedIn?” is something you look at rather than guess.
The generated tag block is the exact markup to paste into your <head>, with
content values already HTML-escaped.
How to use
- Put the page URL in the top field and press fetch meta — our server reads its tags and fills the fields. Or press paste HTML and paste the source instead, which stays entirely in your tab.
- Adjust the title, description, site name and image URL by hand to try alternatives.
- Switch between ALL and a single platform to compare, or focus on the one you care about.
- Watch the counters; they turn amber when a value is long enough to be truncated.
- Press copy tags and paste the result into the page’s
<head>.
The tags that actually matter
Five platforms, one set of tags. What each of them reads, in the order it reads it:
| Tag | Effect | Notes |
|---|---|---|
og:title | Card headline | Falls back to <title>. Around 60 characters before truncation on the narrower cards |
og:description | Body text | Falls back to <meta name="description">. Around 155 characters |
og:image | The image | Absolute URL required. A relative path is not resolved by any crawler |
og:url | Canonical URL for the share | Platforms deduplicate on this, so a wrong value merges two pages’ engagement |
og:type | website or article | Rarely changes rendering; article enables extra fields on some platforms |
og:site_name | Small label above or below the title | Ignored by X |
twitter:card | summary or summary_large_image | Controls whether X shows a thumbnail or a full-width image |
twitter:image | Image for X | Optional — X falls back to og:image |
The single most common mistake is a relative og:image. It renders correctly in
every local preview tool that resolves it against the page URL, and produces a
card with no image everywhere else, because crawlers do not resolve it.
The second most common is og:url pointing at the wrong variant — with a
tracking parameter, or at http:// when the site serves https://. Platforms
key their cache on this value, so the mistake also makes the card hard to fix.
Caching, and why your fix did not appear
Every platform caches the card it built the first time a URL was shared, and none of them re-fetches on a schedule you control. Editing the tags does not update an already-shared card.
Each platform has its own way to force a refresh:
- Facebook and Instagram — the Sharing Debugger, “Scrape Again”
- LinkedIn — the Post Inspector
- X — no public debugger any more; changing the URL is the reliable route
- Slack — caches for around 30 minutes, then re-fetches
- Discord — caches aggressively; a changed URL is the practical fix
Which is the argument for checking the card before the first share rather than after. A wrong card that has already propagated is a much larger problem than a wrong card you caught in a preview.
Image requirements in practice
1200 × 630 at a 1.91:1 ratio works on all five platforms and is the only size worth producing. The details that break cards:
- Under 200 × 200 is rejected outright by several platforms.
- Over about 5 MB is dropped by some crawlers rather than resized.
- Transparent PNGs composite against whatever background the platform uses, which differs between light and dark mode. Use an opaque image.
- Text near the edges gets cropped, because each platform crops the same image slightly differently. Keep anything important inside the middle 80%.
- An image behind authentication produces an empty card. Crawlers are not logged in, and they do not send your cookies.
Examples
- Auditing a live page: paste its URL and press fetch meta — the fields fill from the page’s own tags and you see what social platforms will build.
- Writing a new page: leave the image empty to work against the placeholder, then drop in the real 1200 × 630 URL when it exists.
- Long titles: paste a 90-character headline and watch it survive on X but wrap to two lines on Facebook.
Notes
The previews are faithful reconstructions of each platform’s card at the widths they use, not screenshots taken from those platforms. Platforms adjust their layouts over time, and some apply their own caching — a card you have already shared may keep its old image until you clear it in that platform’s debugger.
Tag extraction reads og:* first and falls back to twitter:*, then to
<title> and <meta name="description">, which is roughly the order the
crawlers themselves use. The same order applies whether the tags came from
fetch meta or from pasted HTML.
The server-side fetch follows at most five redirects, reads at most the first 512 kB of the page, and refuses anything that is not HTML. Only a fixed list of meta keys is returned; nothing else from the page is passed back.