You spent real money on a website. Then you paste the link into a LinkedIn post or a Slack channel and it shows up as a sad gray rectangle, a tiny pixelated logo, or — worse — your competitor's old description because something got cached wrong. It looks broken. It looks cheap. And it quietly kills clicks, because a link with a clean preview gets shared and tapped far more than a link that looks like an error.
The good news: this is almost never a website problem. It's a tags problem. Social platforms don't read your page the way a person does. They look for a specific set of hidden meta tags — Open Graph and Twitter Card tags — that tell them exactly what title, description, and image to show. Get those right and your link looks deliberate everywhere. Get them wrong, missing, or stale and you get the gray box.
This guide is the checklist I'd hand someone who said "my link looks weird when I share it." It's plain-English, it names the exact tools, and it tells you what "bad" actually looks like so you can spot it on your own site.
By the end you'll know:
- The five tags every page needs to preview correctly
- The one image size that works on Facebook, LinkedIn, X, and Slack at once
- The four reasons previews break — and how to tell which one is biting you
- How to force-refresh a stale preview so your fix actually shows up
- How to test a page before you publish it
Part 1 — The Tags That Control the Preview
When you share a URL, the platform sends a bot to fetch the page and scrape its <head> for meta tags. There are two families: Open Graph (og:), invented by Facebook and now read by almost everyone — LinkedIn, Slack, Discord, WhatsApp, iMessage — and Twitter Cards (twitter:), used by X. You need both, but they overlap, so it's less work than it sounds.
1. og:title — the headline of the preview
This is the bold line in the card. If it's missing, platforms fall back to your <title> tag, which is often stuffed with SEO keywords like "Acme Plumbing | Drain Cleaning | Emergency Service | Springfield IL" — fine for Google, ugly in a Facebook share.
What "bad" looks like: a preview headline that's truncated mid-keyword, or that reads like a search listing instead of a sentence.
What to do: add an explicit og:title with a clean, human headline, ideally under ~60 characters so it doesn't get cut off.
2. og:description — the gray subtext
One or two sentences under the title. If it's missing, platforms grab your meta description, or — if that's also missing — a random chunk of body text, which is how people end up with "Skip to main content" or a cookie-banner sentence as their share blurb.
What "bad" looks like: preview text that's a navigation label, a legal disclaimer, or empty.
What to do: write a 1–2 sentence og:description (roughly 110–160 characters) that sells the click.
3. og:image — the part everyone actually cares about
This is the picture. It's also the tag that goes wrong most often, so it gets its own section below. For now: every page needs an og:image, and the URL you give it must be absolute — starting with https://.
What "bad" looks like: no image at all, or a 50×50 favicon stretched into a blurry mess.
What to do: point og:image at a full https:// URL of a properly sized image (see Part 2).
4. og:url — the canonical address
The "real" URL of the page. This keeps previews consistent when the same page is reachable at several addresses (with and without www, with tracking parameters, etc.) and helps platforms dedupe likes and shares.
What "bad" looks like: shares of ?utm_source=... versions of a URL counting separately, or previews flickering between variants.
What to do: set og:url to the clean canonical version of the page.
5. twitter:card — the layout switch for X
X needs to be told what shape of card to render. The value you want for a link with a big image is summary_large_image. Without a twitter:card tag, X often falls back to a tiny thumbnail-on-the-left "summary" card, or nothing.
What "bad" looks like: a cramped little square thumbnail on X when everywhere else shows a big banner.
What to do: add <meta name="twitter:card" content="summary_large_image">. X will reuse your og:title, og:description, and og:image, so you usually don't need to duplicate those — just the card type (and optionally twitter:site for your @handle).
Here's the full minimum set, dropped into the <head>:
<meta property="og:title" content="Your clean headline">
<meta property="og:description" content="One or two sentences that sell the click.">
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:url" content="https://yoursite.com/the-page">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
That's the whole foundation. If your page has all six, you're ahead of most of the web.
Part 2 — The Image That Works Everywhere
The image is where most "broken link" complaints come from, and almost all of them trace back to size, ratio, or URL.
1. Use 1200×630 (the 1.91:1 magic number)
Facebook, LinkedIn, X (with summary_large_image), and Slack all render a wide rectangle at roughly a 1.91:1 ratio. The size that hits that ratio cleanly and stays crisp on retina screens is 1200×630 pixels. Make one master image at 1200×630 and it will look right in every one of those apps.
What "bad" looks like: a square logo (1:1) that gets center-cropped so the edges of your wordmark vanish, or a tall image that shows only a sliver.
What to do: export your share image at exactly 1200×630. Keep important content — text, faces, logos — away from the extreme edges, since different apps crop slightly differently.
2. Don't go too small
Facebook will refuse to use images under 200×200 and will downgrade or skip images that are too small to render at full width. Tiny images are why you sometimes get the title and description but a blank image area, or the platform falls back to a thumbnail layout.
What "bad" looks like: a 600×315 or smaller image that renders blurry, or a preview that shows text but no picture.
What to do: stay at 1200×630. Keep the file a reasonable weight — under ~1MB, PNG or JPG. Avoid huge 5MB images; some scrapers time out.
3. Make the image URL absolute
This is the single most common silent failure. If your og:image is a relative path like /images/share.png instead of the full https://yoursite.com/images/share.png, many scrapers can't resolve it and you get no image — even though it looks fine in your code and loads fine in a browser.
What "bad" looks like: the image works on your live page but never appears in any share preview.
What to do: always use the complete https:// URL in og:image. While you're at it, confirm the image is publicly reachable — not behind a login, not blocked by a firewall rule, not returning a redirect.
4. Don't hide it behind login or robots rules
Some sites block bots in their robots.txt or put pages behind authentication. If the Facebook or LinkedIn scraper can't fetch the page (or the image), it can't build a preview. Staging sites and password-protected pages will never preview correctly — which is fine, just don't panic-test on them.
What "bad" looks like: a perfect preview locally, nothing in production, and a "couldn't fetch URL" error in the debugger.
What to do: make sure the live page and its og:image return a normal 200 OK to anonymous visitors.
Part 3 — Why Your Fix "Didn't Work" (Caching)
Here's the part that makes people lose their minds. You add the tags, you republish, you paste the link again — and it still shows the old broken preview. So you assume the fix failed. It didn't. You're looking at a cache.
Every major platform caches the preview it built the first time it saw your URL, sometimes for days or weeks, so it doesn't have to re-scrape on every share. That cache is sticky. The fix is real; you just have to tell the platform to look again.
1. Facebook & most platforms — the Sharing Debugger
Go to the Facebook Sharing Debugger (developers.facebook.com/tools/debug), paste your URL, and hit Scrape Again. This forces a fresh fetch, shows you exactly which og: tags it found, lists any warnings ("image too small," "couldn't resolve og:image"), and updates the cached preview for Facebook, Messenger, Instagram, and — because so many apps respect the same signals — often clears the logjam elsewhere too. This is the single most useful tool in this whole guide. Use it after every change.
What to do: debug, read the warnings, fix, scrape again, repeat until the preview at the bottom looks right.
2. LinkedIn — the Post Inspector
LinkedIn keeps its own cache and it's especially stubborn. Use the LinkedIn Post Inspector (linkedin.com/post-inspector), paste your URL, and it re-scrapes and shows the preview LinkedIn will use. If LinkedIn shows the wrong image after you've fixed the tags, this is almost always the cure.
3. X & Slack
X reads your tags fresh fairly often, but if it's stale, posting and deleting a test tweet usually forces a re-scrape. Slack caches per-workspace; a previously-shared link may keep its old unfurl for a while, but new links and other workspaces will pick up your corrected tags immediately. Don't judge your fix by one stale Slack channel.
What to do: validate the fix in the Facebook and LinkedIn tools first — those are authoritative. If those show the new preview, your tags are correct and the rest is just caches aging out.
This checklist gets you a clean preview on the pages you check by hand. What it won't do is check every page on your site, render what each one actually looks like in each app, or catch the subtle stuff — an og:image that returns a redirect instead of an image, a template that drops the tags on certain page types, or a homepage that's perfect while every blog post falls back to the gray box.
Specifically, a quick manual pass tends to miss:
- Pages where the tags exist but the image URL 404s or redirects
- Inconsistent previews across page templates (product pages vs. blog posts vs. landing pages)
- Images that are technically present but the wrong ratio, so they crop badly on one platform and fine on another
- The actual rendered preview per platform — code review tells you the tags are there, not that they look right
Seeing the real, rendered preview for each platform side by side is the only way to be sure, and doing that by hand for more than a couple of pages gets old fast.
If you'd rather just see the problem than hunt for it, that's what the Social Preview Audit is for. It's a $19.99 one-time check — no subscription, a fraction of an agency retainer, delivered in under 24 hours. It crawls up to five pages, parses every og: and twitter:card tag, verifies each preview image actually loads and meets the dimension and ratio requirements, and then renders pixel-faithful mockups of exactly how each page looks when shared on Facebook, LinkedIn, X, and Slack — including the ugly fallback you get when a tag is missing. You see the broken box before your customers do.
If your links look wrong when you share them and you want the answer today instead of after an afternoon of debugging, run a Social Preview Audit and we'll show you every page that previews badly and the exact tag to fix.
Rather have it done for you? The Social Preview Audit pulls the data, runs every check above, and hands you a prioritized, plain-English report in under 24 hours — a fraction of an agency retainer, no subscription, no upsell.
FAQ
og:image tag (so Facebook has no picture to show), or the image is too small, the wrong ratio, or pointed at by a relative URL Facebook can't resolve. Run your URL through the Facebook Sharing Debugger — it tells you exactly what's missing and lets you force a re-scrape./share.png instead of the full https://yoursite.com/share.png) and a stale cache. Make the URL absolute, confirm the image loads in a browser when you paste that full URL, then hit Scrape Again in the Sharing Debugger to clear the cache.twitter:card set to summary_large_image, which tells X to use the big banner layout instead of a tiny thumbnail.<head> section of each page's HTML, as <meta> tags. If you're on a CMS like WordPress, Shopify, Squarespace, or Webflow, your platform or an SEO plugin (Yoast, Rank Math) usually has fields for the share title, description, and image — fill those in rather than editing raw HTML. While you're tightening up what search engines and social platforms see, it's worth running through the On-Page SEO Checklist too, since titles, descriptions, and canonical URLs overlap with this work.