RunLocalTools

OpenGraph URL & Social Preview Checker

See exactly how your link will look the moment it’s shared — on Facebook, X, LinkedIn, Discord, Slack, WhatsApp, iMessage, Pinterest, and in a Google search result — then generate a clean, ready-to-paste block of OpenGraph and Twitter card tags to fix whatever’s wrong.

Social platforms and messaging apps don’t render your page when a link is shared. They send a crawler to grab a handful of specific <meta> tags — og:title, og:description, og:image, and a few others — and build a small preview card out of whatever they find. If those tags are missing, malformed, or point to a broken image, the card looks unfinished, wrong, or doesn’t show up at all — and for a lot of people, that card is the entire impression they get before deciding whether to click. This tool shows you that card before you ever share the link, tells you what’s broken, and gives you the fix.

What’s new: Start from scratch

The tool no longer requires an existing page to check — it now doubles as a generator. A third mode, “Start from scratch,” skips parsing entirely and lets you fill in Title, Description, Image, Canonical URL, Site name, and type/card fields directly, with the same live preview cards, diagnostics checklist, readiness score, and <head> snippet export updating as you type.

This is for anyone drafting a new page’s tags before the page exists — no HTML to paste yet, just the details in your head.

  • Same 9-platform preview (Facebook, X, LinkedIn, Google search, Discord, Slack, WhatsApp, iMessage, Pinterest) as the existing parse modes.
  • “New page” button clears every field back to blank without reloading the tool, for generating a fresh set of tags for a different page.
  • JSON-LD starter generator — pick WebSite, Article, or Organization and generate a basic structured-data block from the same title/description/image/URL fields already on screen, since a page starting from scratch has no existing structured data for the tool to detect.
  • Fully local, same as “Paste HTML” mode — no server involved in this mode.

How it works

1. Get your HTML in — two ways. Paste the page’s HTML (View Page Source, not Inspect — that matters, since Inspect shows the live DOM after JavaScript has run, not what a crawler actually sees) or drop a saved .html file. This mode is fully local: nothing you paste ever leaves your browser.

If you’d rather not copy-paste, switch to Fetch a live URL. Tick the consent checkbox, enter the page’s URL, and the tool fetches the raw HTML for you server-side — the one deliberate exception to running everything locally, and it’s opt-in and clearly labeled so you always know before anything is sent anywhere.

2. See it parsed instantly. The tool reads every relevant tag out of the HTML — OpenGraph, Twitter card, the page <title>, meta description, canonical URL, favicon, and any JSON-LD structured data — and shows you what it found.

3. Preview the card on every major platform. Nine simulated cards render side by side: Facebook, X (Twitter), LinkedIn, Discord, Slack, WhatsApp, iMessage, Pinterest, and a Google search snippet. Each platform crops, truncates, and lays out a link preview slightly differently — a title that fits fine on LinkedIn can get cut off on Discord — so seeing all nine at once is the point.

4. Catch what’s broken. Diagnostics flag missing required tags, images at the wrong dimensions or aspect ratio (1200×630 / 1.91:1 is the safe default most platforms expect; Pinterest instead prefers a tall 2:3 image), titles and descriptions that will get truncated on specific platforms, and a missing og:site_name (which Facebook and iMessage display next to the title when it’s set). A readiness score summarizes how ready the page is to be shared, at a glance.

5. Edit tags live, without touching your source. The override panel lets you adjust title, site name, description, image, canonical URL, og:type, and Twitter card type — every preview and diagnostic updates instantly as you type, so you can dial in the exact wording and see the result before you ever touch your actual page.

6. Export the fix. Copy the complete, correctly formatted <meta> tag block straight to your clipboard, ready to paste into your page’s <head>, or export a full audit report as a .txt file if you need to hand the findings to someone else. Direct links to the Facebook Sharing Debugger, LinkedIn Post Inspector, and Google Rich Results Test are included too, since most platforms cache the old preview and won’t show your fix until you force a re-crawl.

Frequently asked questions

What’s the minimum set of tags I actually need, versus optional extras?

og:title, og:description, og:image, and og:url cover the core of what most platforms use to build a preview card. og:type and og:site_name add helpful context — the site name often shows in small text above the title — but a card will still render without them. This tool treats the first four as required in its diagnostics and everything else as polish.

Why does the tool need View Page Source instead of Inspect?

Inspect (DevTools’ Elements panel) shows the live DOM after your page’s JavaScript has already run — which can include tags added dynamically that a crawler will never see, since most social crawlers don’t execute JavaScript. View Page Source shows the raw HTML exactly as the server sent it, which is what actually gets crawled. Pasting from Inspect can make a broken page look fine here when it isn’t.

What actually happens when I use “Fetch a live URL”?

The URL you enter is sent to a small server-side fetcher, which requests the page and returns its raw HTML back to the tool. That’s the only data that leaves your browser, and it only happens after you’ve explicitly checked the consent box — every other mode and every other tool stays fully local, with nothing sent anywhere.

Why do I need to see nine different platform previews instead of just one?

Each platform has its own crop ratio, character limits, and layout for link cards. Facebook, LinkedIn, and WhatsApp share roughly the same 1.91:1 image crop and similar truncation behavior, but Discord and Slack format differently, Pinterest crops tall instead of wide, and a Google search snippet doesn’t use og:image at all — it’s built from your <title> and meta description instead. A page that looks perfect on one platform can still be broken on another, which is the whole reason to check more than one.

What image dimensions should I use for og:image?

1200×630px is the widely-recommended safe size for Facebook, LinkedIn, WhatsApp, and most other platforms — it renders as a large card without significant unwanted cropping. Pinterest is the outlier and prefers a tall 2:3 ratio image instead. The diagnostics flag it if your image’s actual dimensions drift far from whichever ratio the platform expects.

Why does my title or description look truncated on some platforms but not others?

Every platform enforces its own soft character limit before cutting text off with an ellipsis, and these limits aren’t officially published — they’re reverse-engineered by observation and can shift over time. The tool’s counters are set to commonly observed thresholds per field, which is why a title can show complete on LinkedIn’s preview and truncated on Discord’s in the same results grid.

I fixed my tags, but the old preview still shows up when I share the link — why?

Most platforms cache the card the first time a URL is shared and won’t re-fetch it just because the page changed. You need to force a re-crawl through that platform’s own tool — the Facebook Sharing Debugger or LinkedIn Post Inspector links this tool generates for your URL do exactly that — or the stale card keeps showing until the cache naturally expires.

Do I need separate Twitter/X tags, or do standard OpenGraph tags cover it?

Standard OpenGraph tags work as a reasonable fallback on X if twitter: tags are missing — X falls back to the og: equivalents. But dedicated twitter:card, twitter:title, twitter:description, and twitter:image tags give more precise control, including the choice between a small summary card and a large image card. This tool reads and generates both sets, and its X preview reflects whichever is actually present.

What’s the JSON-LD section for — isn’t that different from OpenGraph?

Yes, they’re separate systems — JSON-LD structured data mainly informs search engines (rich results, knowledge panels) rather than social share cards. It’s included here because it lives in the same <head> section and often gets edited alongside OpenGraph tags, so it’s useful to see both cross-checked together, with a direct link to Google’s Rich Results Test to validate it further.

Does any of this affect SEO or search rankings?

Not directly — OpenGraph and Twitter card tags control social and messaging previews, not ranking, which depends on different signals like your <title> tag, meta description, and structured data (which is why JSON-LD is checked separately here). That said, a link that renders as a complete, trustworthy-looking card tends to get clicked more, which is a real practical benefit even outside of rankings.

Editing tags in the override panel — does that change my actual website?

No. Overrides only change what you see in this tool’s previews and in the generated snippet — your source HTML is never modified. Nothing is written back to your site until you copy the generated tags and paste them into your page yourself.

I don’t have a page yet — can I still use this?

Yes — choose “Start from scratch” and fill in the Title, Description, Image, and URL fields directly. Every preview card, the diagnostics checklist, and the exportable <head> snippet work exactly the same as if you’d pasted an existing page’s HTML.

Does “Start from scratch” send anything to a server?

No — it’s fully local, the same as “Paste HTML” mode. Only “Fetch a live URL” mode involves a server, and that’s opt-in behind its own consent checkbox.

What’s the JSON-LD generator for?

If you’re starting a page from scratch, there’s no existing structured data for the tool to detect. The generator creates a basic WebSite, Article, or Organization JSON-LD block from the fields you’ve already filled in, as a starting point — check it over and add any fields it couldn’t infer (like datePublished for an Article).

Related tools

Pairs well with Favicon Generator (round out your site’s metadata), Share Link Generator, and JSON Formatter/Viewer (to double-check the generated JSON-LD block).