Link Previews: The OG Image Size That Works Everywhere

The tags that make it work

Four Open Graph tags do almost all the work, and X reads the same ones unless you override them. Everything else is optional refinement.

• `og:image` — an absolute URL, including the protocol and domain. A relative path is the single most common reason a preview shows no image at all.
• `og:title` — the headline on the card. Around 60 characters before truncation, and it need not be identical to your page title.
• `og:description` — one or two sentences, roughly 150 to 160 characters. Platforms truncate at different points, so front-load the meaning.
• `og:url` — the canonical URL. This stops the same page shared with different tracking parameters from being cached as several separate previews.
• `twitter:card` set to summary_large_image — without it, X may render a small square thumbnail beside the text instead of the full-width card.

Two details that account for a lot of broken previews. The image URL must be publicly reachable without a login, because the platform's crawler fetches it as an anonymous visitor — an image behind authentication or on a staging server with basic auth simply fails. And the page itself must be reachable by the same crawler, which is why previews frequently work in a browser and fail in a chat app.

File size and format

Card images have ceilings, and exceeding them means the preview silently falls back to no image rather than showing an error. Keep an OG image under 1 MB as a working target — the hard maximum is around 8 MB, and X's own limit for card images is 5 MB with a minimum of 300 × 157 pixels and a maximum of 4096 × 4096.

WebP is worth a caution. Most platforms handle it now, but a handful of older link unfurlers do not, and the failure mode is a missing image rather than a fallback. If a link matters commercially, JPEG or PNG remains the safe choice; compressing a JPEG properly gets you most of the saving anyway. Transparency is the other trap — a transparent PNG will be composited onto whatever background the platform uses, which in dark mode can render dark text invisible.

Designing a card that reads at thumbnail size

A link preview is rarely seen at full size. In Slack it is a few hundred pixels wide; on a phone it competes with everything else in the feed. Designs that work on a monitor routinely fail at that scale, and the failures are consistent enough to be avoidable.

• Six to eight words maximum. A card is a poster, not a paragraph. If the headline needs three lines at 1200 pixels wide, it is unreadable at 400.
• Set type far larger than feels right. 60 to 90 pixels for a headline on a 1200 pixel canvas. Anything under about 40 pixels vanishes.
• High contrast, always. Text over a photograph needs a scrim or a solid panel behind it; light grey on white disappears entirely at small sizes.
• Do not repeat the headline. On Facebook, LinkedIn and Slack the card already shows your og:title as text beneath the image (X shows at most a small headline). Putting the same words in the picture wastes the space — use it for a logo, a category or a single visual idea.
• Test it small. Shrink the design to 400 pixels wide and look at it. That is closer to how most people will see it than the canvas you designed on.
• Keep a template. Once a layout works, reuse it with different text. Recognisable cards are worth more than individually clever ones.

When the preview shows the wrong thing

You fix the image, share the link, and the old picture appears anyway. This is caching, not a mistake in your tags. Every platform stores the preview it built the first time anyone shared that URL, sometimes for weeks, and it will not refetch simply because the page changed.

A practical note on making the images: card design is the kind of small, repeated task that people hand to an online generator without much thought, and those generators upload whatever you feed them — often including unreleased product screenshots and pre-announcement headlines. The design and image tools here — the poster maker, resizer and compressor — run entirely on your device, so a card for something embargoed is built and exported with nothing transmitted.