Guide

Absolute vs relative Open Graph image URLs

Q: What is the correct og:image format?

Use an absolute https URL to a publicly fetchable image, for example https://example.com/og.png or your CDN. Optionally set og:image:width and og:image:height. For Discord large embeds, also set twitter:card=summary_large_image.

A relative og:image is one of the most common reasons link cards ship without a picture. Paths like /img/og.png or ../og.png look fine in a browser on your site, but most social crawlers resolve them against the wrong base—or not at all—so Facebook, X, LinkedIn, Slack, Discord, WhatsApp, and iMessage fetch nothing useful. Prefer an absolute https:// URL to a publicly fetchable image.

CardScope fetches the URL from the edge and rebuilds diagnostic shells from the tags it finds. It is not a pixel-perfect Facebook, X, or Discord UI. Use CardScope to confirm the live og:image is absolute; use each platform’s debugger or a fresh share when you need to refresh a cache.

What breaks (and what works)

Relative root paths — /img/og.png often fails for crawlers that do not join against your page’s origin.
Relative parent paths — ../og.png or images/share.jpg are even more ambiguous; many clients never resolve them.
Protocol-relative — //cdn.example.com/og.png is fragile; prefer full https://.
Correct — https://example.com/og.png (or your CDN) pointing at an image crawlers can GET without login, cookies, or IP blocks.
Also set og:image:width / og:image:height when you can; Discord large embeds often want twitter:card=summary_large_image.

Platform notes (not hard guarantees)

Client	Image URL notes	Practical check
Facebook / Meta	Needs a fetchable absolute `og:image`; relative paths commonly yield empty thumbs	Absolute https, then rescrape — see Facebook guide
X (Twitter)	Uses `twitter:image` when present; otherwise falls back to OG — both should be absolute	Mirror absolute URLs — see LinkedIn vs X
LinkedIn	OG-first; relative images often omit the thumb	Absolute `og:image`, stable permalink
Slack	OG-first; missing or relative image collapses to text-only unfurl	Public absolute URL — see Slack vs Discord
Discord	Large embeds often need `twitter:card=summary_large_image` plus a fetchable absolute image	Set OG + Twitter image together as https
WhatsApp / Telegram	Chat UIs lean on absolute OG images	Public https image — see WhatsApp / Telegram
iMessage	Rich links lean on OG; missing or relative image collapses the card	Absolute `og:image` — see iMessage

After you switch to an absolute URL, live HTML can be correct while a client still shows an old card. Use the clear Open Graph cache workflow: fix → verify → rescrape where a tool exists. Pair the absolute URL with a solid size — see OG image size. For title and description soft length guidance, see OG title & description.

A minimal set

If you only set image tags once for every network, set these:

<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/og.png">

Do not ship content="/og.png", content="og.png", or content="//cdn.example.com/og.png" if you can avoid it. Same foundation as the Facebook, LinkedIn vs X, Slack vs Discord, WhatsApp / Telegram, and iMessage guides — one absolute image URL, then client-specific tools where they exist.

Checklist before you ship the image tag

Use absolute https:// for og:image (and twitter:image if you set it).
Confirm the image is publicly fetchable — no login wall, no hotlink block that rejects crawlers.
Avoid relative and protocol-relative paths; they are the usual silent failure.
Set og:image:width / og:image:height when you know the dimensions; start from ~1200×630 guidance in the size guide.
Set twitter:card=summary_large_image when you care about Discord / X large cards.
Verify with CardScope, then rescrape platform caches if an old or empty image is stuck.

FAQ

Why does a relative `og:image` break link previews?

Most social crawlers do not reliably resolve relative paths against your page URL. Values like /img/og.png or ../og.png often become missing or wrong image URLs, so Facebook, X, LinkedIn, Slack, Discord, WhatsApp, and iMessage show a card with no image.

Is a protocol-relative `//cdn.example.com/og.png` OK?

It is fragile. Some clients mishandle protocol-relative URLs. Prefer a full absolute https:// URL so every crawler gets one unambiguous fetch target.

What is the correct `og:image` format?

Use an absolute https URL to a publicly fetchable image, for example https://example.com/og.png or your CDN. Optionally set og:image:width and og:image:height. For Discord large embeds, also set twitter:card=summary_large_image. Soft size notes live in the OG image size guide.

I fixed `og:image` but the old card still shows. What next?

Verify the live tags with CardScope, then clear platform caches where a rescrape tool exists — see clear Open Graph cache. Live HTML can be correct while a client still shows a cached card.

Is CardScope free?

Three free checks per day per IP, no account. Pro is $19 once for unlimited checks. We parse HTML in memory and discard it — rate limits store a hash of your IP for 48 hours, not the page.

Check a URL on CardScope

Paste the permalink. You get reconstructed shells for the clients CardScope supports, the tag table, and a fix checklist — so you know the live og:image is absolute before you fight a platform cache. Three free checks per day per IP, no account. Pro is $19 once if you want unlimited checks. We parse HTML in memory and discard it — rate limits store a hash of your IP for 48 hours, not the page.

Try a URL