Why is my link preview image not showing?
Usually the tags are fine and something else is wrong. Check in this order: the platform's cached copy, whether the tags are in the served HTML rather than added by JavaScript, whether a stranger can reach the image URL, and only then its size. Each platform caches separately.
Is it the cache?
Usually, yes. When a link is first shared, the platform fetches your page, reads its preview tags, and stores the result. It doesn't fetch again on the next share. So if anyone posted your URL before the tags were right, everyone posting it afterwards gets the stored version, sometimes for weeks.
The fix isn't to wait. Each major platform runs its own debugging tool that re-fetches a URL on demand and shows you exactly what it read, and running it is what clears that platform's stored copy. They're separate caches: clearing one does nothing for the others, which is why a link can preview correctly in one app and badly in the next on the same afternoon.
This is also the answer to "it worked yesterday and now it doesn't." Nothing broke. A different platform's showing you its own older copy.
Are the tags in the served HTML?
Preview crawlers aren't browsers. They fetch your page and read the markup that comes back, and most of them don't run your JavaScript. If your tags are inserted by a script after the page loads, a person viewing the page sees them and the crawler doesn't.
The test takes ten seconds. View source, or fetch the URL with the network panel open and look at the document response itself rather than the rendered page. If the tags aren't in that response, they're not there as far as a crawler is concerned.
Can a stranger reach the image?
Three things catch people here, in descending order of frequency.
-
A relative path.
/images/preview.pngworks in your browser because the browser knows what site it's on. A crawler gets the tag value on its own and needs the fullhttps://address. -
The image is behind something. A staging password, a login, a
robots.txtrule, a firewall that blocks unknown user agents, or an image host that refuses requests without a referrer. Test it by opening the exact URL in a private window, signed out, on a different network. If you don't see the image, neither will the crawler. - A redirect. Some crawlers follow one hop and give up. Point at the final address.
Common questions
What size should the image be?
Platforms publish their own minimum dimensions and file size limits, and they change, so check the current documentation rather than a number you read once. A large image at roughly 1.91:1 satisfies the common cases and crops predictably. Below a platform's stated minimum the image is refused, which shows up as no image at all. Above the minimum but still small, it usually posts as a small thumbnail instead of a full-width card, which is a different symptom with a different cause.
The preview appears but it's cropped badly. Same problem?
No, that's the one case where size is the answer. If a preview is appearing at all, the tags were read and the image was fetched, so look at dimensions and aspect. If nothing appears, it's one of the three problems above.
What order should I actually work through?
View source and confirm the tags are in the served HTML. Open the image URL, exactly as written in the tag, in a private window. Run each platform's own debugger, which shows what it read and refreshes its cache. Only then look at dimensions.
Related
The Open Graph generator writes the tags and shows what each platform will read, the UTM builder handles the campaign parameters that ride on the same links, and the marketing tools hub has the rest.