How Open Graph Tags Control Link Previews

Open Graph Preview is a mock of that card from the values you supply. Meta Tag Extractor shows what a live public URL actually contains (that path fetches the page). Neither ranks the URL. Both stop you from posting a card that still says “Home” and shows a 32-pixel favicon.

The tags that fill the card

og:title - the headline on the card. Keep it readable at one line. Keyword stuffing that you might try in <title> looks worse here.

og:description - one or two sentences. Not the entire meta description if that description is a feature list. People scan cards in a hurry.

og:image - absolute HTTPS URL to a file large enough to survive a 1.91:1 crop. Relative paths (/og/tool.png) fail in some crawlers; use https://www.example.com/og/tool.png.

og:url - the canonical permalink for this content. It should match the URL you want shared, including https and host. A mismatch is how you split traffic between www and the apex in share stats.

og:type - website for a tool or homepage, article for a dated post. Optional extras (article:published_time) help some platforms and are ignored by others.

og:site_name - the product name, used as a small label on some cards.

You can set these in a layout per route. A single site-wide og:image of the logo is how every article looks identical in a feed.

Twitter cards versus Open Graph fallbacks

Twitter/X tags (twitter:card, twitter:title, twitter:description, twitter:image) override OG when present. If they are absent, most clients use og:*.

twitter:card values you will actually use:

• summary - small square image, more text. Fine for a utility with a simple icon.
• summary_large_image - wide image. Needs a real 1200×630 asset. Do not enable this with a tiny PNG.

You do not need a Twitter account for the tags to work. You need the meta tags in the HTML the crawler fetches. Client-side-only injection is as fragile here as it is for SEO titles.

Image size, crop, and the 1.91:1 problem

Chat clients clip. Important faces and words belong in the center third. A screenshot of an entire desktop UI will be unreadable at card size; crop to the control that matters, or design a dedicated OG graphic.

Other failure modes:

• File too small - upscaled blur.
• File huge - some crawlers time out. A 200–500 KB JPEG or WebP is plenty.
• Hotlink blocked - og:image on a bucket that 403s the Facebook/Slack user-agent.
• WebP-only - still spotty for some older unfurlers; keep a JPEG/PNG fallback if cards come back empty.

Favicons are for tabs. Generate those separately with Favicon Generator. Do not reuse a 16×16 ICO as og:image.

Cache: why last week’s title is still there

Unfurlers cache by URL. Changing tags does not notify Slack. Each platform has a sharing debugger (Facebook Sharing Debugger, LinkedIn Post Inspector, Slack’s unfurl refresh). Use those after the HTML is correct.

Open Graph Preview tells you the card should look like this given these strings. It cannot purge a vendor cache. If the extractor still shows old tags, you did not deploy. If the extractor is new and Slack is old, it is cache.

Query strings (?v=2 on the image URL) can bust an image cache when the path stayed the same. Do not add random query strings to og:url itself.

How to preview before you post

1. Decide the sentence you want in a DM. Write og:title and og:description for that sentence, not for a SERP.
2. Paste those values (and the image URL) into Open Graph Preview. Adjust crop and length.
3. Put the tags in the template. Deploy.
4. Confirm the live head with Meta Tag Extractor - that fetch hits your public URL.
5. Then refresh the platform debugger if a stale card is already in the wild.

If you are still writing the search title in parallel, SERP Snippet Preview is the other window. The two strings can differ on purpose.

What platforms still ignore

Some apps use their own scrapers and a subset of tags. Discord is OG-friendly. Some messengers only show a title. Email clients often show the raw URL. WhatsApp generally respects OG images when they can fetch them.

There is no tag that forces a rich card everywhere. There is a tag set that gives well-behaved clients something decent to show.

Mock the card, then check the live head

Mock the card in Open Graph Preview. Then verify the deployed head with Meta Tag Extractor. For the search snippet, not the chat card, use How to Write Title Tags and Meta Descriptions.