Stop your links looking broken when people share them

6 min readSPOT Agency

You send someone your website in WhatsApp. Instead of a neat little card with a photo and a headline, they get a bare blue link, or a grey box where the image should be. Embarrassing, and completely avoidable.

The fix is a set of tags called Open Graph. Most websites are missing them, which is exactly why so many shared links look like an afterthought.

What Open Graph does

Open Graph started at Facebook, but nearly every app reads it now: LinkedIn, WhatsApp, iMessage, Slack, Discord, Telegram, the lot. When your link gets pasted somewhere, the app peeks at your page's code to work out what the preview card should say and show.

If there's nothing there to read, it improvises. And it's a bad improviser.

The five tags worth adding

Drop these into the <head> of each page:

<meta property="og:title" content="Dough Bros, Wood-Fired Pizza in Leeds">
<meta property="og:description" content="Naples-style pizza from a wood oven, in the middle of Leeds.">
<meta property="og:image" content="https://doughbros.co.uk/share.jpg">
<meta property="og:url" content="https://doughbros.co.uk/">
<meta property="og:type" content="website">

What each one controls:

  • og:title is the bold headline on the card.
  • og:description is the line of text under it.
  • og:image is the picture. This is the one people actually notice.
  • og:url is the link the card should point at.
  • og:type is usually website, or article for a blog post.

Getting the image right

The image is where most people come unstuck. Three rules keep it looking sharp:

  • Make it 1200 by 630 pixels. That's the shape the apps crop to. Anything smaller turns blurry or gets rejected.
  • Use a full web address that starts with https://. A path like /share.jpg means nothing to WhatsApp; it has no idea where your site lives.
  • Keep the file light, under a megabyte or so, so the preview builds quickly.

One more thing: keep any text or your logo near the middle of the image. Some apps trim the edges, and a logo jammed in the corner can vanish.

On X (Twitter), add <meta name="twitter:card" content="summary_large_image"> as well. Skip it and you'll get a tiny thumbnail instead of the big card.

Why it's worth ten minutes

Every time someone shares your link, that's free advertising. But a naked URL doesn't sell anything. A card with a good photo, a clear headline and one honest line of text gets clicked far more often. You write these tags once and every future share benefits, forever. Hard to think of a better return on ten minutes.

When the old preview won't go away

Here's the bit that drives people mad. You add the tags, you re-share the link, and the same broken preview shows up. That's because the app cached the first version it saw and is too lazy to look again.

To force it, paste your link into Facebook's Sharing Debugger or LinkedIn's Post Inspector. Both re-read your page on the spot and show you exactly what they found, which is handy for spotting a typo in your tags too.

Common questions

What are Open Graph tags?

Small bits of code in your page's <head> that tell apps like WhatsApp and LinkedIn what title, text and image to show when your link is shared.

What size should the image be?

1200 by 630 pixels, hosted at a full https address, under a megabyte. That's the shape the apps crop to.

Do they help SEO?

Not as a ranking signal, but a better-looking shared link gets more clicks, and that extra traffic is worth having.

Why is the old preview stuck?

The app cached it. Run the link through Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a refresh.

Curious how your own links look when shared?

SPOTlight checks the Open Graph tags across your pages and flags the ones that are missing or broken, in a few seconds.

Run a free audit →