Preview images: a card composed rather than imagined

The alternative is not to generate a picture. It is to compose one out of things the site already has.

What goes into it

Three inputs, all yours. The brand colour, given as a hex value, becomes the card's background. The typeface sets the title. A picture of the page itself sits in a window frame beneath the title, so the card shows the thing it links to, not a stock abstraction.

The window frame can be drawn in the Windows or the macOS style. It sounds like a detail until the card is sitting in a feed next to four others.

The screenshot is the part that does the work. A card built around a picture of the actual page tells somebody scrolling past what they would be opening, which is more than a logo on a coloured field can do. It also ages honestly: when the page changes enough to make its own card wrong, the wrongness is visible instead of hiding behind an abstraction that was never specific in the first place.

Composed rather than imagined

Nothing in the card is invented. The colour is the one you set, the words come from the page's own title, and the image is a screenshot rather than an illustration of what the page might be about.

That is the difference worth naming. A generative image can be beautiful and wrong; a composed one can only be plain and accurate.

Why 1200 by 630

It is the shape most platforms crop toward, and cropping is the operation that decides what survives.

A card is almost never shown at the size it was made. It is scaled into whatever slot the reader has, and where the aspect ratio does not match, the difference is taken off the edges rather than added to them. Composing at the ratio platforms expect means the crop is a scale rather than a cut, and the parts you cared about are still in the frame.

There is a second reason to pick one size and keep it. A set of cards at different ratios previews inconsistently across the same feed, and the inconsistency reads as carelessness even to somebody who could not say what was wrong. One shape, applied everywhere, is the cheaper kind of polish.

Where composition stops

It cannot know what the page is for. It shows the page, and the page has to carry its own meaning.

That has consequences worth stating plainly before anybody discovers them later. A screenshot of a page that is mostly body text reads, at card size, as a grey rectangle with a lighter grey rectangle inside it. Pages built from the same template produce cards that resemble each other, because the thing being photographed resembles itself. Neither is a fault in the composition; both are the page showing through.

Where a page deserves a picture made for it, a composed card is not the better option and was never meant to be. What it is better than is the grey box, and that is the comparison that applies to the several hundred pages nobody was ever going to art-direct.

Which tags the card lands in

A composed card is a file, and a file does nothing until something points at it.

The address goes into og:image, which is what most readers look for and what Open Graph covers, and into twitter:image, which is what the second vocabulary looks for. The description of the picture goes into og:image:alt and twitter:image:alt. All four are filled only where the page declares none, on the same rule as everything else here.

Dimensions are declared alongside the address where the reader accepts them. That spares the reader from fetching the file to discover its shape, and it is the difference between a preview that appears at once and one that appears a moment late, after the layout has already settled without it.

What stays off

This is the one part that does not run until you switch it on, per domain. A page that already declares an image keeps it, and no card is composed for it.

The result is written into the image tags of the copy served to machines, so the preview appears where previews are read, and the page a person opens is unchanged.

FAQ