OpenGraph.so
Learn

How link previews actually work

Everything behind the scan, written so you can do it yourself: what each tag does, the sizes that survive every crop, how each platform behaves, and the exact prompts we use to generate share images with AI.

What are Open Graph tags?

Open Graph tags are meta tags in your page's head that tell other services what title, description and image to show when someone shares your link. They come from the Open Graph protocol, published at ogp.me, and nearly every platform that renders a link preview reads them.

Read

What does every Open Graph tag do?

The Open Graph protocol defines four required tags — og:title, og:type, og:image and og:url — plus optional ones for description, site name, locale and media details. Certain og:type values unlock extra tags, such as article:published_time for articles.

Read

How do Twitter / X cards work?

X reads twitter: meta tags first and falls back to your Open Graph tags for anything missing, so the only tag you strictly need is twitter:card. Set it to summary_large_image for a full-width picture, or summary for a small square thumbnail.

Read

What size should an OG image be?

Use 1200x630 pixels — a 1.91:1 ratio — which is the size every major platform is built around. Keep the file under about 1 MB, serve it over https at an absolute URL, and keep important content away from the edges because several platforms re-crop it.

Read

How does each platform read your link?

Every platform reads the same tags but renders them differently: Google uses your title, description and favicon, X prefers twitter: tags, and the chat apps use Open Graph with their own crops and caches. The differences that bite are cropping, text truncation and how long each one holds an old copy.

Read

How do you add Open Graph tags to your site?

Put the tags inside the head of the HTML your server sends, not into the DOM after the page loads. Every stack below has a way to do that; pick yours, paste the block, then scan the page to confirm a scraper can actually see it.

Read

Do Open Graph tags help SEO?

Open Graph tags are not a Google ranking factor — Google does not use them to rank pages. They affect how many people click your link when it is shared, which is a real traffic difference, while your title tag, meta description and favicon are what shape the search result itself.

Read

How do you generate OG images with AI yourself?

Do it in two passes: first have a text model read the page and return a short structured brief — name, headline, colours, one visual idea — then feed that brief into an image model inside a fixed composition template. The template is what makes the output consistent; left to itself, an image model invents a new layout every run.

Read

Why is my link preview wrong or out of date?

Nine times out of ten it is either a platform cache holding an old copy, or tags that only exist after JavaScript runs so the scraper never saw them. Check what the raw HTML contains first, then clear the platform's cache — in that order, because clearing a cache on broken tags just re-saves the broken version.

Read

Glossary

Short definitions of every term used across these guides — og:image, canonical, unfurling, scraper and the rest.

Open the glossary

Now check it on your own site.