Why Your Link Preview Shows the Wrong Image, and How to Fix It

You paste a link into a chat or a post and, instead of a tidy card with a picture and a headline, you get a bare URL, last month's image, or your homepage's title on an article. The card is built from a few lines of HTML in the page's head, read by a robot you never see. Once you know what that robot does, every one of these failures has an obvious cause.

What happens when you paste a link

The app you paste into does not show you the page. Its servers fetch it, using a crawler with its own name: facebookexternalhit, Twitterbot, LinkedInBot, Slackbot, Discordbot and so on. The crawler downloads the HTML, reads the Open Graph tags in the head, downloads the image they point to, builds the card, and caches it, often for days. Four facts about that process explain almost every broken preview:

• The crawler is a server, not your browser, so it cannot see anything that needs your login, cookies or location.
• Most crawlers do not run JavaScript, so they only see what is in the HTML as delivered.
• They fetch the image separately, with their own request, so the image has to be reachable on its own.
• They cache what they found, so fixing the page does not fix a card that was already built.

The tags that build the card

<meta property="og:title" content="How we cut our build time in half">
<meta property="og:description" content="Three changes, measured.">
<meta property="og:image" content="https://example.com/cards/build-time.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/blog/build-time">
<meta name="twitter:card" content="summary_large_image">

With these in place, nearly every platform draws a large card. Without them, each platform guesses, picking the page title, the first paragraph and whatever image it finds first, which is how a logo or an ad ends up as the picture.

No image, or the wrong image

• The image address is relative. /cards/a.png means nothing to a crawler reading tags out of context. Use the full address, starting with https://.
• The image is blocked. This is the most frustrating one, because the image works perfectly in your browser. Hotlink protection that rejects requests without a Referer header blocks crawlers, which send none. So do firewall rules and bot protection that challenge unknown visitors, a robots.txt rule disallowing the image folder, and images behind a login. Serve card images from a location that answers any request.
• The image is too small or the wrong shape. Large cards want about 1200 by 630 pixels, a ratio of 1.91 to 1. Small images get demoted to a thumbnail or dropped. Text near the edges gets cropped differently on each platform, so keep it in the middle.
• The image is too heavy. A multi-megabyte image can time out before the crawler gives up. Keep cards to a few hundred kilobytes.

The wrong title or description

If og:title is missing, platforms fall back to the page's <title>, which often carries the site name and a separator you did not want in a share card. On sites built as single-page apps, the tags are often added by JavaScript after the page loads, so the crawler only ever sees the default tags in the shell, the same for every page. The fix is to render the tags on the server, or to prerender each page, so they are in the HTML the crawler receives. Also check og:url: if it points at a different page, some platforms go and read that page instead.

The old preview will not go away

Platforms cache cards, sometimes for a week or more, so a fix you deploy today will not appear on links already shared. Facebook's Sharing Debugger and LinkedIn's Post Inspector both let you enter a URL and force a fresh fetch. For platforms without such a tool, change the image's address, for example by adding ?v=2 to it, which makes the crawler treat it as a new image the next time the page is read. Slack and Discord usually refresh on their own within a day.

A checklist before you share

1. The page has og:title, og:description, og:image and twitter:card in its delivered HTML.
2. The image address is absolute, uses https, and opens in a private browser window.
3. The image is about 1200 by 630 pixels and a few hundred kilobytes.
4. og:url matches the page's canonical address.
5. Nothing in robots.txt, a firewall or hotlink protection blocks crawlers.

The Link Preview Checker runs most of this for you. Paste the page's HTML and it shows the card on Facebook, X, LinkedIn, Discord and Slack, flags every missing or broken tag, and tests whether the image actually loads.