Social Preview Checker
Paste a page's HTML to preview its Open Graph and Twitter Card link previews for Facebook, LinkedIn, and X, and check for missing or oversized tags. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Example shown — replace it with your own page's "View source" HTML (right-click a page → View Page Source → copy → paste here).
How it works
- Open the page you want to check, right-click it, and choose "View Page Source".
- Copy the full HTML and paste it into the box above.
-
The tool reads the page's Open Graph (
og:*) and Twitter Card (twitter:*) meta tags, renders how each will look when shared, and checks every tag for missing values or lengths that platforms tend to truncate.
How the previews are built
Social platforms don't render your page when a link is shared — they read a fixed set of
meta tags out of the raw HTML instead. Facebook and LinkedIn read Open Graph tags directly;
X reads its own twitter:* tags first, and falls back to the matching Open
Graph tag whenever a twitter:* tag is missing:
twitter:title → og:title → <title>
That's the same fallback chain this tool uses to fill in the X preview when a page only defines Open Graph tags.
FAQ
Does my HTML or the page get sent anywhere?
No. The HTML you paste is parsed with your browser's built-in DOMParser, entirely on your device — nothing is uploaded or logged. If a tag references an image URL, your browser requests that image directly from wherever it's hosted, the same way any browser tab would.
Why do I need to paste HTML instead of just a URL?
This site has no backend — every tool runs entirely in your browser, and a browser can't fetch another site's raw HTML across origins the way a server could (that's the same-origin policy). Pasting the page's "View source" HTML sidesteps that: open the page, right-click → View Page Source, copy everything, and paste it here.
The preview looks different from what actually shows on Facebook or X.
Each platform has its own crawler and cache, and some (X included) only trust these tags from a page it has already crawled — a live page can look different here than on the platform until that platform re-crawls it. Treat this preview as what the tags say to render, not a guaranteed pixel-for-pixel match.
Why is my og:image not showing?
og:image (and twitter:image) needs to be a full, absolute URL starting with http:// or https:// — a relative path like /og/image.png is not enough for most platforms to resolve it. The checklist below flags this specifically.
What's the difference between the Facebook/LinkedIn card and the X card?
Facebook and LinkedIn read Open Graph (og:*) tags. X reads its own twitter:* tags first and falls back to Open Graph tags when a twitter:* tag is missing — that fallback is exactly what this tool simulates for the X preview.
How we compare
| Feature | Online Tool Store | metatags.io | Facebook Sharing Debugger |
|---|---|---|---|
| No file/HTML upload — runs in your browser | ✓ | ✗ | ✗ |
| No sign-up or Facebook login required | ✓ | ✓ | ✗ |
| Works on a page that isn't publicly live yet | ✓ | ✗ | ✗ |
| Flags missing/oversized tags with a checklist | ✓ | ✓ | Partial (errors only) |
Both alternatives require your page to already be live at a public URL, since they fetch it themselves. Since Social Preview Checker works from pasted HTML, it also works on a page that's still local or behind a staging login — paste the source and see the checklist before you ever deploy it.