Why does my link preview show the old image after I updated the tags?

Every major platform caches the result of scraping your page, often for a week or longer, so a link you shared before the fix keeps showing the stale card. Updating the tags does not invalidate that cache on its own. Re-scrape the URL in the platform debugger - the Facebook Sharing Debugger, the LinkedIn Post Inspector, or by re-sharing in Slack - to force a fresh fetch. Adding a harmless query string to the URL also produces a cache-free preview for testing.

Do I need both og: and twitter: tags?

Not always, but it is safer to include both. X falls back to Open Graph tags when the twitter: equivalents are missing, so a page with only og:title, og:description, and og:image will still produce a card. What you cannot express in Open Graph is the card style: twitter:card decides between the large banner and the compact summary layout, and twitter:site and twitter:creator attribute the card to your accounts. Add those three and let the og: tags cover the rest.

How long should my og:title and og:description be?

Keep og:title at or under about 60 characters - most cards truncate past that, and narrow mobile cards clip sooner. For og:description the limits diverge: X shows roughly 110 characters, Facebook and LinkedIn show closer to 155 to 200. If you write to the tighter X limit your description reads fully everywhere. Anything past that is not lost, it is just hidden behind an ellipsis, so front-load the important words.

Why is my preview blank or showing just the URL?

The usual causes are an og:image that is a relative path rather than an absolute URL, an image served over plain http, tags placed outside the , tags injected by client-side JavaScript that the scraper never runs, or the page returning a non-200 status or a login redirect to the scraper. Check that the tags appear in the raw HTML your server returns - view source rather than the browser inspector, since the inspector shows the DOM after JavaScript has run.

Does this tool fetch my URL to check the tags?

No. It works from the tags you type into the form or paste in as HTML, and everything is parsed and rendered in your browser. The only address your browser requests is the og:image URL, so the picture can appear in the cards. That is a deliberate design choice: browsers cannot fetch arbitrary third-party pages because of CORS, and a server-side fetcher would mean sending your unreleased URLs to someone else. Because nothing is fetched, you can validate pages on localhost, staging, or behind a login.

Can I preview a page that is not published yet?

Yes, and it is the main reason to use a tool like this rather than a platform debugger. The official debuggers must fetch your live URL, so they are useless for a page that is not deployed. Here you simply paste the tags you intend to ship - from your template, your framework metadata object, or a local build - and the previews render immediately, no deployment required.

What happens if I leave a tag out?

Scrapers fall back, and the fallbacks are unpredictable. With no og:title they usually use the tag, and with no og:description they may use the meta description or scrape body text. With no og:image most platforms show a text-only card, though some will grab an arbitrary image from the page - often a logo or a tracking pixel. With no og:url the shared address is used as-is, which means tracking parameters can fragment your share counts. Setting the tags explicitly is the only way to control the result.

Does Open Graph markup help my search rankings?

Not directly. Open Graph tags are read by social and chat platforms, not used as a ranking factor by search engines. What they do influence is the click-through rate on every share of your link, which drives traffic and, over time, the signals that do matter. Treat them as conversion optimisation for shared links rather than as an SEO ranking lever.

Is this open graph preview tool free with no signup?

Yes, it is free, no signup. Every parse, validation and preview happens in JavaScript inside your browser, and your titles and descriptions are never sent to a server. Two requests do leave the page: the browser loads your og:image to draw it, and pressing Copy checks the daily usage limit and records the copy without the tags themselves. Parsing and validating keep working offline once the page has loaded, but images will not load without a connection.

Can I preview the Open Graph image before publishing?

Yes, as long as your browser can reach the image URL, including a localhost or staging address. Paste it into og:image and it appears in all six cards, or the card shows "Image failed to load". The preview crops the picture to fill a 1.91:1 frame, and a square for the X summary card, so check that nothing important sits near the edges. The tool does not measure the real pixel size or file weight, and the generated block always says 1200 by 630, so correct those two tags if your image differs.

Why did Parse tags not load my tags?

The message says which case you hit. "No tags found in the pasted HTML." means the paste had no meta tags at all, and "Found tags, but none of them were og: or twitter: tags." means only tags such as viewport or description were present. The parser reads og:title, og:description, og:image, og:url, og:type, og:site_name and the twitter: card, site, creator, title, description and image tags. A successful parse replaces every field in the form, so any tag missing from the paste becomes blank.

Open Graph Preview

Preview how your link will look on Facebook, X, LinkedIn, Slack, and Discord, validate your og: tags, and copy a correct meta block

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters - displays in full on every platform.
og:description 127 characters - fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters - shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout - exact rendering changes over time.

Facebook