Preview Open Graph and Twitter share tags

Paste HTML or head markup, inspect OG and Twitter-card values, and review a practical share preview locally.

HTML input

HTML

Open Graph Preview

Details

How to use Open Graph Preview

What the tool does, how to run it, and what to expect from the result.

How to preview your Open Graph tags

To preview your Open Graph tags, copy your page's HTML or just the head section and paste it into Open Graph Preview. The tool parses the markup in your browser, pulls out the Open Graph and Twitter card values, and renders a share-style preview so you can confirm the title, description, and image before publishing.

Because it reads pasted markup rather than fetching a live URL, it works on local drafts, staging pages, and pages behind a login. The parsing happens locally, so your markup never leaves your device.

Copy your page HTML or just the head section
Paste the markup into Open Graph Preview
Review the extracted OG and Twitter card fields
Check the share-style preview card and fix any gaps

What it shows and what it does not

Open Graph Preview surfaces both the Open Graph fields, such as og:title, og:description, and og:image, and the Twitter card fields alongside them, so you can spot missing or duplicated values in one place. The preview card gives a clean local representation of those tags.

It is a local preview of the tags you paste, not a promise that every platform will render the card identically. Networks fetch and cache cards differently, so treat the preview as an accurate read of your markup rather than a live emulation of a specific platform.

Tips

Getting a better result out of Open Graph Preview

Specific settings and thresholds, not general advice.

Every field falls back: og:title to <title>, og:description to the meta description, og:url to the canonical, og:image to twitter:image, and og:type to the literal string "website" when nothing is set. A card that looks complete here can come from markup with zero og: tags, so read the field grid, not the card.
The image slot renders the og:image URL as text and never loads it. Nothing checks dimensions, format, byte size, or whether the URL resolves at all, so a typo in the image path looks identical to a working image.
Facebook renders the large card from 1200x630 and treats anything under 200x200 as too small; X uses roughly 2:1 for summary_large_image with a 5MB file ceiling. This tool reads none of that, so check the file itself before assuming the card is fine.
og:image and og:url must be absolute URLs. Crawlers do not resolve a relative path like /og.png against your page, and this preview will display the relative string without flagging it as a problem.
Wrap the tags in <head>...</head> before pasting. OG tags pasted as a loose fragment land in the body, where the document.head lookups cannot reach them, and every field then either falls back or reads Missing.

Limits

What Open Graph Preview does not do

The honest boundary, so you do not lose time finding it yourself.

No live fetch. It cannot show what Facebook's or X's crawler receives, which depends on your server response, redirects, and user-agent handling.
It does not read og:image:width, og:image:height, og:image:alt, og:locale, article:*, twitter:site, or twitter:creator.
The image is displayed as a URL string and never requested, so broken image URLs cannot be detected here.
It cannot clear a platform's cache. Facebook's Sharing Debugger and X's card validator still need to re-scrape after you change tags.

Reference

Terms used on this page

Short, plain-language definitions for the formats and settings above.

Web & SEOOpen Graph tagsOpen Graph tags are HTML meta tags (og:title, og:description, og:image, og:url) that control how a page looks when shared on social platforms and chat apps. They set the title, summary, and preview image of the link card instead of leaving it to guesswork.General

At a glance

Who Open Graph Preview is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Marketers, SEO teams, founders, and content operators reviewing share metadata before publishing.

Ideal for

Checking whether pasted metadata has enough title, description, URL, and image context for a share preview.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Is Open Graph Preview free?

Yes. Open Graph Preview is completely free, with no signup, and it runs in your browser.

Does it upload my markup to a server?

No. Open Graph Preview parses the pasted HTML locally in your browser, so your markup never leaves your device.

Does it fetch a live page URL?

No. Open Graph Preview works from pasted markup only, which lets you check drafts, staging pages, and pages behind a login.

Does it include Twitter card fields too?

Yes. Twitter card values are surfaced alongside the Open Graph fields so you can review both at once.

Will the card look exactly like this on every platform?

Not always. The preview is an accurate read of your pasted tags, but each platform crops, scales, and caches share cards slightly differently.

Why does a title appear when I have no og:title?

Because the preview falls back to the <title> element, and then to the meta description for the body text, and to the canonical for the URL. That mirrors what most platforms do, but it means a healthy-looking card is not evidence that your OG tags exist. The field grid below the card shows which values were actually found.

Does it check my image size?

No. The og:image URL is printed as text and never fetched, so dimensions, aspect ratio, file size, and format are all unknown to the tool. Verify the file separately: 1200x630 is the safe target for a large card, and X rejects images over 5MB.

My tags look right here, but Facebook still shows the old card. Why?

Platforms cache the scrape. Once Facebook, LinkedIn, or Slack has fetched your page, they keep the result for a long time and will keep showing the previous title and image. Run the URL through the platform's own debugger and ask it to re-scrape, which is the only reliable way to force a refresh.

Can I paste a URL rather than markup?

No. The tool works from pasted markup only. It also means the preview reflects the HTML you gave it, not what a crawler receives, which can differ if your server varies by user agent or if the tags are added by client-side JavaScript that a crawler may never run.

Do I still need twitter: tags?

Mostly not for the content. X falls back to the Open Graph tags for the title, description, and image, so the one tag that genuinely earns its place is twitter:card, which selects the layout, with summary_large_image being the wide variant. This tool shows twitter:card, twitter:title, twitter:description, and twitter:image so you can confirm what is set.

Is my markup uploaded?

No. The head is parsed in your browser and no request is made for your page or your image, which is precisely why the tool cannot validate the image file.

Recommendations

Nearby tools from the catalog that fit the same job or workflow.

Meta Tag Preview

Preview meta tags

Preview title, description, canonical, robots, and social meta fields from pasted HTML.

JSON

UtilityHTML

Schema Markup Preview

Preview JSON-LD schema

Preview pasted JSON-LD locally, pretty-print it, and inspect a practical entity summary.

OGP

UtilitySEO