Open Graph Preview Generator

You only find out what a shared link looks like after you have shared it — by which point the post is live and the image is wrong. The tool above renders the card preview from your Open Graph tags before you publish, so you can fix the title length or the missing image first.

How it works

There are two ways in. Fill the fields directly — title, site name, description, page URL, image URL — and the preview updates as you type. Or paste your page's <head> HTML into the import box and the tool extracts the tags for you.

The parser follows the precedence a real crawler uses:

• og:* tags win whenever they are present.
• twitter:* tags fill in anything Open Graph left empty — so a page with only twitter:title still previews.
• A plain <title> element and <meta name="description"> are the last fallback.
• HTML entities are decoded, so & shows as & rather than leaking into the preview.

The domain under the card is derived from the page URL with the protocol and any www. prefix stripped, which is how most platforms display it. Everything runs in your browser: paste from an unreleased staging page without it going anywhere.

What to check before publishing

The image is the whole card. A large-card preview is mostly image, so a missing or broken one collapses the post into a text link that gets a fraction of the clicks. Requirements worth respecting: an absolute URL, at least 1200×630 pixels, under about 5 MB, a common format, and reachable without authentication. A relative path is the single most frequent cause of a blank card — the crawler fetching your page is not sitting in your app's origin.

Titles are truncated by pixel width. Around 60 characters is safe across platforms, and less on mobile. Put the part that earns the click at the front; a title that reads "… | Section | Site Name" wastes its most valuable position.

Descriptions get cut at roughly 150–200 characters, and some platforms omit them entirely on small screens. Write the first sentence so it stands alone.

Card type follows the image. twitter:card should be summary_large_image when you have a proper image and summary when you do not; declaring the large card without a large image produces a stretched, low-quality crop.

Every absolute URL must be absolute for a stranger. og:url, og:image and the canonical should all be the public production URL, not a localhost or staging address that leaked through a template variable.

Why the preview and reality sometimes differ

This tool renders what your tags say. Platforms then apply their own rules on top, and three of them catch people out.

Caching. Facebook, LinkedIn and Slack cache scraped metadata aggressively — often for days. Fixing a tag does not refresh an already-shared link; you need the platform's own scraper or debugger to force a re-fetch.

Crawlability. Social crawlers generally do not execute JavaScript. Tags injected client-side after hydration are invisible to them. If your card is blank in the wild but correct in the browser's element inspector, this is almost certainly why — the tags have to be in the server-rendered HTML.

Redirects and auth. A crawler that hits a login wall, a geo-redirect or a consent interstitial sees that page's metadata, not yours.

Related reading and tools

The document head and the rules governing what belongs in it are covered in HTML5 essentials. Since a card only appears when the crawler gets a successful response, the response codes it might get instead are worth knowing — HTTP status codes covers the redirect and error cases that silently break sharing.

To produce the tag block in the first place, use the meta tag generator; to tidy up the surrounding <head> markup, the HTML formatter.