SEO

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 an Open Graph social card

Either fill in og:title, og:description, og:image, og:site_name, and og:url by hand, or paste your page's raw <meta> HTML into the box and press Parse meta HTML. The parser reads the Open Graph tags first, then falls back to the Twitter equivalents and the standard description and <title>.

Compare the three renderings: Facebook and LinkedIn, X's large-image card, and the Slack or Discord unfurl. Watch for a crop that cuts your text and a title that clips. Nothing here is fetched from your site, so confirm the tags are deployed and force a re-scrape if the URL has been shared before.

  • Paste your page's <meta> HTML and press Parse meta HTML, or fill the fields in by hand.
  • Point og:image at an absolute https URL, sized 1200 x 630.
  • Check the title for clipping (aim under 60 characters) and the description (under 155).
  • Compare the Facebook/LinkedIn, X, and Slack/Discord previews for a bad crop.
  • Deploy the tags, then force a re-scrape with Facebook's Sharing Debugger and LinkedIn's Post Inspector.
Tips

Getting a better result out of Open Graph Preview

Specific settings and thresholds, not general advice.

  • This renders from the values you type or paste. It does not fetch your URL, so it cannot tell you whether the tags are actually live, whether the crawler can reach them, or whether Facebook has cached an older version.
  • That cache is the thing that bites people. Facebook and LinkedIn cache scraped cards for a long time, so fixing your tags does not fix an already-shared link. Push the URL through Facebook's Sharing Debugger and LinkedIn's Post Inspector to force a re-scrape.
  • og:image must be an absolute URL, on https, and publicly reachable. A relative path, a URL behind auth, or an image on a host that blocks non-browser user agents will all silently produce a card with no image.
  • 1200 x 630 is the size to target: it is 1.91:1, the ratio Facebook, LinkedIn, and X's summary_large_image card all use, and it is large enough that no network upscales it. Under 200 x 200 many networks will not render an image at all.
  • Titles get truncated around 60 characters and descriptions around 155 to 200 depending on the network and the surface. Front-load the meaning: a title that only makes sense once you have read all 90 characters will not survive the clamp.
Limits

What Open Graph Preview does not do

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

  • It does not fetch a URL. You have to type the values or paste the HTML.
  • It does not validate the tags, so a malformed URL, a missing og:image, or an unreachable image will preview happily and fail in the wild.
  • No character-count warnings and no truncation indicators beyond the visual clamp.
  • The previews are approximations of five surfaces. Each network changes its card rendering without notice.
Reference

Terms used on this page

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

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 checking social share cards.

Ideal for

Using the open graph preview without installing anything or signing up.

FAQ

Common questions

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

Does this fetch my page to read its tags?

No. It renders from values you supply, either typed into the fields or pasted as raw <meta> HTML which it parses locally with DOMParser. Nothing is requested from your site. That means it cannot confirm the tags are actually deployed, only that the ones you gave it would look like this.

I fixed my og:image but the old one still shows when I share. Why?

The network cached it. Facebook, LinkedIn, and Slack all scrape a URL once and reuse the result for a long time. Fixing your HTML does not invalidate their cache. Run the URL through Facebook's Sharing Debugger and press Scrape Again, and use LinkedIn's Post Inspector, to force a fresh fetch.

What size should my og:image be?

1200 x 630 pixels, which is the 1.91:1 ratio every major network's large card uses. Keep it under about 5 MB, use an absolute https URL, and make sure it is reachable without a login. Anything under 200 x 200 is likely to be dropped, and a square image will be cropped unpredictably by different networks.

Do I need Twitter card tags as well as Open Graph?

Not usually. X falls back to Open Graph tags when the twitter: equivalents are missing, so og:title, og:description, and og:image cover it. The one tag worth adding explicitly is twitter:card set to summary_large_image, because without it X may render the small square card instead of the wide one.

How long should the title and description be?

Keep the title under about 60 characters and the description under about 155. Beyond that they get clipped, and each network clips at a slightly different point and on a different device width. The preview here clamps the description to two or three lines, which is a good approximation of the real thing.

Why do my previews look slightly different from the real card?

Because every network renders cards its own way and changes it without notice, and the same card looks different in the feed, in a message, and on mobile. These previews reproduce the layout and the truncation behaviour closely enough to catch a bad crop or a title that is too long, which is what they are for.

Recommendations

You Might Also Like

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

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon