Developer SEO

Open Graph preview

Drop an image to see it here

example.com

Your Open Graph title

The og:description, shown under the title in most link previews.

Title 21 / 88 characters Description 64 / 200 characters Site or brand name Drop an image Optional. Nothing is uploaded.

Rendered in your browser · nothing is uploaded

Local · og:image must be an absolute URL

Renders the link card built from your og:title, og:description and og:image — the one Facebook, LinkedIn, WhatsApp, Slack and Discord all show when someone pastes your URL.

How to use the open graph preview

1 Type your title and description. The preview updates as you type.

2 Watch the character counts — they turn red past the limit, and the preview shows where the cut lands.

3 Drop an image in to see the whole card.

One set of tags feeds a lot of surfaces, and they truncate differently: Facebook shows around 88 characters of title, LinkedIn rather less, and Slack shows more description than either. Writing to the shortest is the safe approach. The failure that costs the most is not truncation though — it is a missing or wrong image, which turns a rich card into a bare link and measurably reduces clicks. Two things to check: og:image must be an absolute URL, and Facebook caches what it fetched, so updating the tag does not update the preview until you re-scrape the URL through their Sharing Debugger.

Questions

Which tags does a link preview use? −

og:title, og:description, og:image and og:url. X falls back to these if the twitter: tags are absent.

Why is my preview not updating? +

Why is no image showing? +

Is the truncation exact? +

What size should the image be? +

Does every platform truncate the same? +

Sources

The Open Graph protocol

Was this tool any good?

INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING