About this tool
Paste the <head> HTML you're about to ship (or just the relevant meta tags) and see exactly how the Open Graph tags will render as a link preview card, plus warnings for anything missing or too long. This checks your tags directly rather than fetching a live URL — see "Things to watch out for" for why that's actually the more reliable way to test a page before it's even published.
How to use the Open Graph Preview Tool
- Copy the
<head>section of your page, or just theog:*and<title>/description tags. - Paste it in and click "Preview".
- Fix anything flagged — a missing image, a title that will get cut off, or a missing description.
Common use cases
- Checking how a blog post or landing page will look when shared before it goes live
- Debugging why a shared link on Slack or social media shows the wrong title, image, or no preview at all
- Verifying og:title and og:description aren't so long they'll be cut off on most platforms
Worked example
The sample tags above have og:title, og:description, and og:image all set, well within the safe length ranges, so the tool reports no warnings and renders a full preview card with the image, site name pulled from og:url's domain, title, and description. Delete the og:image line and re-run it, and you'll see a warning appear along with a blank image placeholder in the preview — exactly what most platforms would show a real visitor.
Things to watch out for
This tool reads the tags you paste in; it does not fetch a live URL. That's a deliberate choice, not just a limitation of a browser-only tool: a script running in your browser can't read another website's raw HTML unless that site explicitly allows it (a security restriction called CORS that applies to nearly every site on the web), so a "paste a URL and we'll fetch it" version would fail on most real pages anyway. Pasting your own tags directly also means you can preview a page's social card before it's published — something a URL-fetching tool can never do.
The sample og:image above is a self-contained data URI (an image encoded directly into the tag) purely so this page's preview doesn't depend on an external image loading. For a real page, og:image needs to be an actual hosted URL — social platforms fetch the image separately when generating their own preview, and most of them reject or ignore data URIs entirely.
Frequently asked questions
Because a browser-based tool fetching another site's raw HTML is blocked by CORS on almost every website by default — that's a security restriction, not a bug. Pasting your tags directly works for any page, published or not, and needs no server on this end.
From the hostname in your og:url tag, since that's what platforms display next to the title. If og:url is missing, it falls back to og:site_name, or shows a note that neither was found.
The preview falls back to your <title> tag and meta description, exactly like most platforms do — and the tool flags that it's using a fallback, since dedicated Open Graph tags usually give you more control over wording than your SEO title and description.