Open Graph Tags: Fix Your Link Previews in 10 Minutes

A link preview can be the difference between a click and a scroll-past. You share your product on Slack, Telegram, LinkedIn, or X, and instead of a title, description, and image, the recipient sees a bare URL or — worse — a random cropped logo. The root cause is almost always the same: missing or malformed Open Graph tags.

What OG tags actually do

Open Graph is a set of meta tags in your page's <head>. When a messenger, social network, or chat app builds a link preview, it fetches your page and reads those tags. The four that matter:

og:title — the headline in the preview card. Keep it under 60 characters.
og:description — one or two sentences, under 160 characters.
og:image — the preview image. This drives most of the visual attention.
og:url — the canonical URL of the page.

Skip the first two and platforms fall back to whatever text they can scrape — often your H1 followed by nav junk. Skip the image and the card renders small or text-only, which measurably lowers click-through.

The image rules that break previews

og:image is where most implementations fail. The practical checklist:

1200×630px minimum. Smaller images get letterboxed or cropped unpredictably.
Absolute URL. /img/cover.png fails on some scrapers. Use the full https:// address.
PNG or JPEG. Several platforms still don't render WebP in previews.
Keep it under 1 MB. Scrapers time out on heavy files and silently skip the image.
Stay in the center 1.91:1 zone. Some crops cut the outer edges; don't put text there.
Use og:image:width and og:image:height. They let the platform reserve space before the image downloads, avoiding layout jank.

A common real-world failure: the deployment pipeline copies <head> assets fine, but the og:image points to a staging domain nobody updated. The preview breaks only in production, and only for links shared externally — the site itself looks perfect in a browser. This is why you verify with a checker, not by opening your own page.

Why updates don't show up

Second most common complaint: "I fixed the tags, the preview is still broken." Platforms cache scrapes aggressively. X caches for about a week, LinkedIn several days, Telegram indefinitely until you force a refresh via its bot. Two escape routes:

Append a harmless query parameter (?v=2) to the URL when sharing — most caches treat it as a new link.
Use each platform's debugging tool (Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape.

What a good head block looks like

Minimal, production-safe set:

<meta property="og:title" content="ToolFYou — 233 free web tools">
<meta property="og:description" content="Free developer utilities for formatting, converting, and checking. No signup.">
<meta property="og:image" content="https://toolfyou.com/img/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://toolfyou.com">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

The twitter:card tag matters too: without it, X defaults to a small text-only card even when a valid og:image exists. summary_large_image forces the large visual card.

OG tags and SEO: related, not identical

OG tags don't directly affect rankings. But the same title and description discipline that makes a preview clickable also makes search snippets click-worthy. Google truncates the title around 60 characters and the description near 160 — the same limits apply. This is why it's worth checking both views together.

Open Graph Checker validates your OG tags the way a real scraper sees them: fetches the URL, parses the head, reports missing tags, size problems, and unreachable images. It catches the staging-domain mistakes and the WebP surprises in seconds.

For the search side, SERP Preview renders your title and description exactly as Google would truncate them, so you see where the text cuts off before you publish.

If you're starting from scratch, Meta Description Generator drafts descriptions in the 120–160 character sweet spot, which you can then reuse as og:description without a second editing pass.

A 10-minute audit routine

Paste your URL into Open Graph Checker and fix everything it flags.
Check og:image is ≥1200×630, absolute, PNG/JPEG, under 1 MB.
Open SERP Preview and confirm the title and description cut cleanly, not mid-word.
Re-scrape on the platform you care most about to clear its cache.

Five minutes of tag hygiene protects every link you share. Broken previews silently tax your traffic — most teams never notice because the page itself always looks fine to them. The checker sees what the scraper sees. That's the only view that matters.