Guide

Best og:image format: PNG, JPEG, WebP, GIF, SVG, or AVIF?

The tag is there, the URL is absolute, and the card still has no picture. A common reason is the file format: a crisp logo.svg, a modern .avif from your image pipeline, or a CDN that quietly swaps your PNG for WebP. Link-preview crawlers are not browsers, and the safe answer is still boring: PNG or JPEG.

Format by format

If your site serves WebP or AVIF to browsers, that is fine. Just point og:image at a separate PNG or JPEG file that never changes format.

The Content-Type header matters as much as the extension

Crawlers trust what the server says, not the end of the URL. A file called og.png can still fail when:

• An image CDN negotiates the format from the Accept header and sends WebP or AVIF to some clients and PNG to others.
• The server labels it wrong, such as text/html, application/octet-stream, or binary/octet-stream from a storage bucket upload.
• The URL redirects to an HTML page, like a 404 page or login page that still returns 200.
• The file is huge. X documents a 5 MB limit for card images, and other clients time out on slow, heavy files, so keep it well under that.

Check the real response:

curl -sIL https://example.com/og.png | grep -iE '^HTTP|content-type|content-length'
curl -sIL -H 'Accept: image/avif,image/webp,*/*' https://example.com/og.png | grep -i content-type

You want a final 200 with Content-Type: image/png or image/jpeg, and the same type for both requests. If the second line says image/webp or image/avif, your CDN is negotiating: turn that off for the og:image path or use a URL that bypasses the transform.

A tag set that works everywhere

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

Keep og:image:type honest. If it says image/png, the server should send a PNG. Size and URL rules are in OG image size and absolute OG image URL.

After you switch formats

Platforms cache the image they fetched the first time, so a link shared with the SVG or AVIF can stay blank for a while. Give the new file a new URL (for example og-v2.png) and follow clear Open Graph cache to refresh the platforms that already saw it. If the image request itself is being blocked, see crawler blocked.

Checklist before you ship

1. Export PNG or JPEG at 1200×630, not SVG, AVIF, or WebP only.
2. Request the image URL and confirm a final 200 with an image/png or image/jpeg Content-Type.
3. Turn off format negotiation on the og:image path if your CDN does it.
4. Keep the file small, comfortably under the 5 MB X documents.
5. Match og:image:type to what the server sends.
6. Verify with CardScope, which flags an image that doesn't fetch, comes back as a non-image type, or is served over HTTP, then refresh caches.

FAQ

What is the best image format for og:image?

PNG or JPEG. Every major link-preview client reads them. Use JPEG for photos and PNG for flat graphics, text, and logos, at 1200×630, served over absolute https:// with a matching image/png or image/jpeg Content-Type.

Can I use an SVG as og:image?

Not reliably. X documents that SVG is not supported for card images, and other preview clients commonly skip SVG too, so the card shows no picture. Export a PNG of the same artwork and point og:image at that file. An SVG favicon is fine; it is only the share image that needs a raster file.

Does WebP work for link previews?

Sometimes. X documents JPG, PNG, WEBP, and GIF as supported for card images. Support elsewhere is less consistently documented, and older apps and in-house unfurlers may not decode it. If one URL has to work everywhere, use PNG or JPEG for og:image even if the rest of your site uses WebP or AVIF.

Will an animated GIF og:image animate?

Usually not. X documents that only the first frame of an animated GIF is used. Treat a GIF og:image as a still of its first frame, and make sure that frame works on its own.

Why does my PNG og:image still not show?

Check what the server actually returns. An image CDN may serve WebP or AVIF based on the Accept header, the file may be served as text/html or application/octet-stream, a URL ending in .png may redirect to an HTML error page, or the file may be too large. The curl -sIL lines above show the status and Content-Type in seconds.

What does a CardScope check cost?

Link-card previews and the fix checklist are Pro: $19 once via Stripe Checkout. No account. We parse HTML in memory and discard it — we do not store the page.