The short version
- A link preview image is the picture a platform shows when someone shares a URL, and it comes from the page's og:image tag.
- The most common reasons a link preview image is missing are no og:image tag, a relative image URL, an image the crawler can't reach, and tags added by JavaScript after the page loads.
- Platforms cache previews, so after fixing a page you often need a debugging tool or a changed URL before the new image appears.
- A 1200×630 image with words kept in the centre previews well on almost every platform.
- Testing a link in a private message to yourself is the quickest way to see what other people will see.
On this page
A link preview image comes from one line in your page's HTML: the og:image tag. When a platform such as WhatsApp, Slack, LinkedIn or iMessage sees a link, a crawler fetches the page, reads that tag and downloads the image. If the preview is blank or wrong, something in that chain failed: the tag is missing, the image address is relative, the crawler is blocked, or the platform is still showing an old copy from its cache.
Why link previews break: a diagnosis table
Start with the symptom you can see. The table below covers the eight causes behind broken previews, with the usual suspects first.
Likely cause
og:image tag on the pageFix
headLikely cause
/share.pngFix
https://Likely cause
Fix
Likely cause
robots.txt ruleFix
Likely cause
Fix
Likely cause
Fix
twitter:card set to summary_large_imageLikely cause
Fix
Likely cause
Fix
The tags a working preview needs
You need surprisingly little. A title, a description, a full image URL, the image size, and one extra line so X shows a large card instead of a thumbnail. The page's canonical URL in og:url helps platforms group shares of the same page.
<head>
<title>Autumn menu | Hearth Bakery</title>
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/autumn">
<meta property="og:title" content="Our autumn menu is here">
<meta property="og:description" content="Pumpkin loaf, apple buns and spiced coffee, baked every morning.">
<meta property="og:image" content="https://example.com/share/autumn-1200x630.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Autumn menu at Hearth Bakery">
<meta name="twitter:card" content="summary_large_image">
</head>Frameworks make this easy to get wrong. A single page app that sets tags after loading will preview fine in a few places and fail in most. Use your framework's server side metadata feature instead, or generate the image per page as described in dynamic OG images.
How to refresh a cached link preview
Platforms fetch a page once and keep the result for a while, so fixing your tags doesn't fix posts people already shared, and sometimes not new shares either. Use the platform's own tools where they exist, and change the URL where they don't.
- 1
LinkedIn
Paste the URL into the LinkedIn Post Inspector. It fetches the page again and shows exactly what LinkedIn sees.
- 2
Facebook, Instagram and WhatsApp
Meta's Sharing Debugger, in its developer tools, shows the tags it found and has a button to scrape again. WhatsApp can take longer to catch up.
- 3
Slack, Discord, iMessage and others
Most have no public refresh tool. Rename the image file, for example
autumn-v2.png, and update the tag, so the crawler sees a new address. - 4
Stubborn cases
Share the page with a harmless query string such as
?v=2. Platforms treat it as a new link and fetch it fresh.
Designing an image that previews well everywhere
Once the tags work, the image itself decides whether anyone taps. Make it 1200×630, a wide frame of about 1.91 to 1, which every major platform accepts. Some apps show it smaller or crop a little from the sides, and a few fall back to a square, so keep the words in the centre. The full sizing story is in OG image size.
Open Graph 1200×630
1200 × 630
LinkedIn link 1200×627
1200 × 627
Square fallback 1200×1200
1200 × 1200
Words run straight across the brightest part of the background and vanish at thumbnail size.
The same card with a calm, high contrast area behind the words. Readable even in a crowded chat.
Avoid
- Your logo alone on white
- A screenshot of the page itself
- Long sentences in small type
- Text touching the edges
- The same image for every page
Do
- A short headline that matches the page
- A background people recognise as yours
- Type big enough to read at 300 pixels wide
- A clear margin all round
- One image per important page
A preview is tiny in a chat thread, so the rules from thumbnail text apply: a few large words, strong contrast, one idea. In Gradiently a design's Mark keeps its calmest region behind the words and picks light or dark type per line, so the headline stays legible however the platform scales the card. Start from the Link preview size in the Studio and the same design can become your 1200×600 blog banner and the rest of your social media image sizes.
A two minute test before you share
- View the page source and confirm
og:imageis there with a full https URL. - Open that image URL in a private browser window. If it doesn't load there, crawlers can't load it either.
- Run the URL through the LinkedIn Post Inspector or Meta's debugger to see the parsed tags.
- Send the link to yourself in WhatsApp or Slack and look at it on a phone.
- If anything is stale, change the image file name and test again.
Do this once for each template on your site, not every page, and broken previews stop being a surprise. If you're building a site from scratch, the website hero background guide covers the main image those previews often borrow from.
Questions people ask
Why is my link preview image not showing?
Usually the page has no og:image tag, the tag uses a relative URL, the image is blocked from crawlers, or the tags are added by JavaScript. Check the raw page source first.
How do I update a link preview that shows an old image?
Platforms cache previews. Ask for a fresh scrape of the URL with the LinkedIn Post Inspector or Meta's Sharing Debugger, or rename the image file so its URL changes.
What size should a link preview image be?
1200×630 pixels. Keep the words in the centre, because some apps crop the sides or show the card as a square.
Why does X show a small thumbnail instead of a large image?
Add a twitter:card meta tag set to summary_large_image, and make sure the image is large enough, ideally 1200×630.
Do link previews work with single page apps?
Only if the Open Graph tags are in the HTML the server sends. Most crawlers don't run JavaScript, so tags added in the browser are invisible to them.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile