Why Slack and Facebook Show the Wrong Link Preview Image

The explainer of what the tags mean is How Open Graph tags control link previews. This page is the incident.

What Slack actually requests

A bot fetches the URL (no cookies, no your login). It reads og:title, og:description, og:image (and Twitter card tags if that is the path). If og:image is missing, it may pick an <img> from the body. That is how a sidebar icon becomes the card.

Facebook and iMessage are the same idea with their own caches. LinkedIn is picky about image dimensions. Discord similar. Fix OG once; recrawl N times.

Open Graph Preview is the layout check from the tags you enter. Meta Tag Extractor is what the live HTML contains - it hits the URL you provide. Own URLs only.

The five failures

1. Relative og:image. content="/og.png" works in your browser on that origin. Bots often need https://www.example.com/og.png. Extractor will show the relative value. Fix to absolute.

2. 404 or 403 on the image. Hotlink protection, basic auth, or a CDN token. You are logged in; the bot is not. Open the image URL in a private window.

3. Tiny or extreme aspect ratio. A 32×32 favicon as og:image gets cropped into garbage. Use ~1200×630. Compress if it is 4 MB: Online Image Compressor. Some crawlers skip huge files.

4. Cache. You fixed the tag yesterday. Slack still has Tuesday. Facebook Sharing Debugger / LinkedIn inspector / Slack’s own cache behavior. Change image URL. Recrawl. Post the URL with a harmless query ?v=2 only if your app does not 404 on it.

5. SPA empty head. First HTML has <title>App</title> and no OG. Your React app fills it later. The bot never runs the app. Pre-render or server-render the meta. Extractor shows the empty head - believe it.

Title and description look wrong too

Same fetch. og:title vs <title> vs Google. SERP Snippet Preview is search. OG preview is chat. How to write title tags and meta descriptions. Launch list: Pre-launch checklist for a new web page.

noindex does not always stop Slack, but a staging password wall will. If Slack cannot fetch, you get no card or an old one.

WordPress, Next.js, and CMSs

Yoast/RankMath filled OG with the featured image. You changed the featured image in the media library but the file URL is the same. Cache. Or the plugin still points at the first upload. Extractor tells the truth.

Next.js openGraph in metadata API - check production, not localhost. Extractor cannot see your laptop.

A worked example: blog post card is the logo

Extractor: og:image is https://cdn.example.com/logo.png (200×50). Slack crops a gray mess.

1. Design 1200×630 with title text large enough to read in a 300px-wide card.
2. Compress. Upload to a public path.
3. Set absolute og:image. Deploy.
4. Extractor confirms. OG preview looks intentional.
5. Facebook debugger recrawl. Slack: paste in a private channel, or wait.

Do not set og:image to a Google Drive “anyone” link that 302s through login.

Checklist

• Absolute HTTPS image, 200, no auth
• Sensible dimensions
• Unique URL after pixel changes
• Head is in first HTML
• Recrawl after deploy
• Search snippet checked separately

Wrong preview images are tags, reachability, and caches. Open Graph Preview and Meta Tag Extractor show the card and the live HTML. Slack will catch up after the bot sees the new bytes.

Twitter/X, iMessage, and Telegram

Twitter cards (twitter:image) can override or duplicate OG depending on the crawler. If Slack is right and X is wrong, check both tag sets in the extractor. iMessage is closer to OG. Telegram has its own fetch. Fix OG first; add Twitter tags if X still lags.

WebP OG images

Some crawlers dislike WebP for cards. JPEG or PNG at 1200×630 is the boring default. Convert if needed: WebP to JPG. Compress. Absolute URL.

Multiple og:image tags

Some CMSs emit three. Crawlers pick unpredictably. One intentional image.

Locale and og:url

og:locale and og:url pointing at the homepage while you shared /blog/post make the card look like the homepage. Match og:url to the permalink.

Design the card as a 300px-wide object

Slack shows a small thumbnail. Text in the image must be huge. Your full-bleed hero will crop. Preview at the size Slack uses, not at 1200×630 full screen only. Open Graph Preview is that check.

Slack will catch up after the bot sees the new bytes. You still have to recrawl.

UTM and preview fetches

Some teams share ?utm_source=slack. The CMS serves a different template without OG. Share the canonical URL in Slack; put UTM on ads. Extractor both URLs if cards differ.

Image CDN transforms

og.png?w=1200 that requires a signing key fails for bots. Public unsigned URL for OG. Online Image Compressor then a static path.

Article vs website og:type

Wrong og:type rarely kills the image. Missing image does. Fix the image first.

AMP and alternate URLs

Google might share the AMP URL. OG on AMP must exist too. Extractor on the URL Slack actually fetched (look at the card’s destination).

LinkedIn, WhatsApp, and Discord are not Slack

LinkedIn is picky about image size and sometimes about og:image:width / og:image:height. A 1200×630 JPEG that Slack accepts can still fail LinkedIn’s inspector until you recrawl. WhatsApp often wants a smaller file and can ignore huge PNGs. Discord is closer to Slack. Fix one absolute 1200×630 JPEG, then recrawl each debugger. Do not maintain five different OG images unless a platform’s docs force it.

Crawler user-agents and bot walls

If you challenge “unknown bots” with a JS captcha, Slack’s fetcher never sees OG. Allowlist the published crawlers you care about, or serve meta in the first HTML without executing the app. Meta Tag Extractor from a datacenter is closer to the bot than your logged-in Chrome.

User-Agent blocking of facebookexternalhit, Slackbot, Twitterbot, and LinkedInBot is a self-own. Check CDN WAF rules after a “we locked down bots” ticket.

JSON-LD is not Open Graph

A perfect NewsArticle JSON-LD does not fill Slack. Google may use it. Chat crawlers want og:* in the head. How to audit meta tags covers both; this incident is the card image.

Next.js generateMetadata vs what you extract

Localhost metadata is irrelevant. Extractor hits production. ISR/CDN can serve an old HTML shell with a new image file at the same URL - then you have new pixels behind an old tag, or the reverse. Change the image URL when you change pixels. Confirm the deployed HTML, not the repo.

How to prove the bot saw the new image

1. Extractor: og:image is the new absolute URL.
2. Private window: that URL is 200, no login.
3. Open Graph Preview: crop looks intentional at thumbnail size.
4. Facebook Sharing Debugger (or LinkedIn inspector): recrawl, screenshot the new scrape.
5. Slack: paste in a channel that did not already cache the URL, or add a query your app honors.

If step 1 is old, you did not deploy. If step 1 is new and step 4 is old, you did not recrawl. If step 4 is new and Slack is old, wait or use a URL Slack has not seen.

Homepage OG leaking onto every path

Some layouts inject one og:image in the root layout. Every blog post then shares the homepage photo. Extractor on /blog/slug will show it. Per-route metadata in Next.js or Yoast’s per-post image is the fix - not a new Slack setting.

If og:url is always https://example.com/, crawlers may treat distinct permalinks as the same object. Set og:url to the permalink you pasted.

Hotlink protection and “it works in Chrome”

A CDN rule that blocks missing Referer will serve the image to you (you have a referer from your own site) and 403 the bot (empty or a Slack referer). Private-window the image URL, not the HTML. If that 403s, OG is dead no matter how pretty Open Graph Preview looks with a file you pasted in by hand.

summary vs summary_large_image

X/Twitter can ignore a large og:image if twitter:card is summary. Slack will still show the big crop. Extractor both tag sets. Set summary_large_image when the image is the card.

You still have to recrawl. Open Graph Preview is the design check. Meta Tag Extractor is the live check.