CardScope

Guide

og:image not showing

The title is in the preview and the picture is not, or the preview never forms because the image request failed. The usual causes are a relative URL, a blocked bot, the wrong size or format, a redirect that never lands on the file, and a cache that still has the old result. Check them in that order and stop at the first one that fails.

This page is the sequence. Each cause already has a longer guide, so the detail lives there. CardScope fetches the page you paste, reads the tags, and tries the image. It does not clear any app’s cache. A picture on the check means that file was reachable on that fetch.

1. Is the tag in the HTML the server sends?

Look at view-source or the raw response, not the Elements panel after JavaScript has run. Preview clients do not run your bundle. If og:image is inserted by React, Vue, or a tag manager after load, they never see it. Put the tag in the first HTML response. The JavaScript / SPA guide is the write-up.

If the tag is missing entirely, you are done with this list. Add it, then come back only if the picture is still gone.

2. Is the image URL absolute https?

The Open Graph examples use a full URL, such as https://example.com/og.png. A value like /images/card.png, images/card.png, or //cdn.example.com/card.png is a common reason the picture disappears. Use an absolute https:// URL.

Discord’s current link preview docs are a narrower case: a relative image URL is allowed only when it starts with /. That is not a reason to ship a relative path. Other clients are stricter, and an absolute URL satisfies Discord too. Cases and examples are in absolute OG image URL.

3. Can a bot fetch the file?

The image is a second request, often to a CDN or a bucket. The page can be fine while that request returns a login page, a challenge, a 403, or HTML instead of an image. Open the image URL in a private window. If you do not see the file, a preview client often will not either.

Then request it the way a crawler does, with no cookies:

curl -sI -A 'Twitterbot/1.0' https://example.com/og.png

You want a 200 (or a short redirect that ends in 200) and a Content-Type that is actually an image. A 403, 401, or an HTML body means the picture will not show. Hotlink rules, expiring signed URLs, and firewall challenges are the usual story. The crawler blocked guide covers the page and the image request.

4. Size and format

A file can be reachable and still be dropped. SVG share images often show no picture. WebP and AVIF work in some clients and not others. Very small images get skipped. The practical default is PNG or JPEG at 1200×630, with og:image:width and og:image:height set to match the file.

The tables are in OG image size and OG image format. Discord publishes its own format list, which is not the same as every other app — that list is in Discord embed not showing.

5. Redirects

Two different redirects get blamed for the same missing picture.

The page URL. If the link people paste 301s somewhere else, or og:url and rel="canonical" name a different address, the preview can be stored against the wrong URL. That is the og:url vs canonical problem. Fix the identity before you keep swapping image files.

The image URL. Point og:image at the file when you can. A redirect that ends on HTML, a login page, or a format the client does not accept shows no picture. Not every vendor publishes a redirect rule. Discord does, for the page fetch: at most 5 redirects, a 2xx, HTML, and the whole fetch — including measuring the image — must finish within 10 seconds. A long chain can miss that window. If you are unsure, request the image URL and read the final status and content type, as in the curl line above.

6. Cache

If the raw HTML and a fresh fetch both show the new absolute image, and Slack, X, LinkedIn, Discord, or Facebook still show the old preview with no picture, the tags are no longer the bug. Those apps keep the previous result. CardScope does not purge their caches. Which of them have a public rescrape tool, and which do not, is in clear Open Graph cache.

A pass that takes a minute

  1. Fetch the page with a crawler user agent and confirm og:image is in that HTML, not only after JavaScript.
  2. Confirm the value is an absolute https:// URL.
  3. Request that image URL with no cookies. Expect 200 and an image Content-Type.
  4. If the file is SVG, WebP, AVIF, or far from 1200×630, read the size and format guides before you touch cache tools.
  5. If the live tags are right and the app is wrong, rescrape where a tool exists. Do not expect CardScope to do that.

FAQ

Why is my og:image not showing?

In practice it is one of five things: the tag is not in the server HTML, the URL is relative, the image request is blocked or is not an image, the size or format is one a client drops, or a redirect never reaches the file. After those are fixed, a stale cache can still show the old preview. Walk the list above and use the linked guide for the step that fails.

Does a relative og:image work?

Ship a full https:// URL. Discord’s link preview docs allow a relative image URL only when it starts with /. That exception is not a license to use /og.png everywhere else. The absolute image guide has the failing shapes.

Can CardScope refresh a cached preview image?

No. It shows the tags and image from the fetch it just made. It does not clear Slack, X, LinkedIn, Discord, Facebook, iMessage, or Teams. Use each app’s own tool where one exists — see clear Open Graph cache.

What does a CardScope check cost?

Previews for X, LinkedIn, Slack, Discord, and iMessage, plus the fix checklist, are Pro: $19 once via Stripe Checkout. No account. A sample report shows the shape of the result before you pay. We parse HTML in memory and discard it — we do not store the page.