Web & marketing

Open Graph Preview

See how a link will look when shared on Facebook, LinkedIn, X/Twitter, WhatsApp and Slack — and copy a clean meta-tag snippet for your own pages.

URL to preview

Paste a URL or fill in the fields below to compose a card from scratch.

og:title

og:url

og:description

og:image (URL)

og:site_name

Meta tags to paste in <head>

Facebook

example.com

Your headline goes here

A one or two-sentence description of the page. Most platforms truncate around 200 characters.

X (Twitter)

example.com

Your headline goes here

A one or two-sentence description of the page. Most platforms truncate around 200 characters.

Your headline goes here

example.com

Slack

example.com

Your headline goes here

A one or two-sentence description of the page. Most platforms truncate around 200 characters.

What is Open Graph?

Open Graph is the protocol Facebook published in 2010 to let websites declare structured metadata about a page — title, description, image, type, canonical URL — so that links shared on social platforms render as rich cards instead of bare URLs. Most platforms now consume it: Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage. X/Twitter has its own twitter:* namespace but falls back to Open Graph when the Twitter tags are missing, so a single set of og: tags covers most of the ecosystem.

How to use this previewer

Paste a URL to fetch its existing tags, or fill in the four core fields manually to design a card before publishing. The preview updates live and approximates how Facebook, LinkedIn and Slack render the card. Watch the image: anything narrower than 1200px or with a wildly off-square aspect ratio will be cropped or downscaled. When the card looks right, copy the snippet at the bottom and paste it into your page's <head>.

Why your share image isn't updating

Facebook, LinkedIn and most other platforms aggressively cache scraped metadata — sometimes for days. Once a URL has been shared, changing the og:image alone usually won't refresh the card. The fixes are: (1) use Facebook's Sharing Debugger to force a re-scrape, (2) bump the image filename (card-v2.png) so the cached version is invalidated, or (3) publish at a fresh URL. Plan this into your launch checklist instead of debugging it under deadline pressure.

Tag reference

Tag	Purpose	Tip
`og:title`	Keep under 60 characters to avoid truncation.	Headline shown on the card.
`og:description`	110-200 characters renders well on most platforms.	Subtitle / summary line.
`og:image`	1200×630 PNG or JPEG over HTTPS, < 5 MB.	Card image.
`og:url`	Use the canonical URL, not the tagged one.	Canonical URL the share resolves to.
`twitter:card`	`summary_large_image` matches the OG card style.	Twitter card type.

Frequently asked questions

Do I need both Open Graph and Twitter card tags?

Not strictly. If twitter:* tags are missing, X/Twitter falls back to og:* tags. Adding the Twitter tags only matters when you want a different image or copy on X than on Facebook/LinkedIn. For most pages, a clean OG block is enough.

What's the right image size?

1200×630 pixels (the 1.91:1 aspect ratio Facebook recommends). LinkedIn, Slack, Discord and Telegram all render this size without cropping. Smaller images (down to 600×315) still work but render as a smaller card on Facebook.

Why doesn't the preview look exactly like Facebook's card?

Each platform applies its own typography, padding, and crop logic, and they tweak it without notice. The preview is a faithful approximation, not a pixel-perfect reproduction. For final validation, use the official Sharing Debugger / Post Inspector for the platform you care about most.

Does the tool fetch URLs through a server?

Only when you ask it to fetch an existing page's tags — and even then, the request goes through your own browser via a CORS proxy when possible. If you only fill in the fields manually, no network request is made.

Can I use a video as the og:image?

No. Use og:video for that, alongside a still og:image as the fallback. Most platforms still show the still on the card and only play the video on click.

What does og:type do?

It tells consumers what kind of object the URL represents — website, article, book, profile, etc. Facebook used to render different layouts per type; today it mostly affects discovery features. Set it to article for blog posts and website for everything else and you'll be fine.

Open Graph Preview