The link had no image at all

Sharing a link to this site produced a bare grey card. The obvious reading was a broken favicon. It was not, and checking the live page rather than guessing turned up two faults that happened to produce the same symptom.

There was no og:image. The homepage carried og:title, og:description, og:url, og:site_name and og:type, and no image at all. Every unfurler had nothing to draw. The tags that were present are the easy ones to get right, which is probably why nobody noticed the missing one.

The fallback was broken too. /favicon.ico returned 404, and the only icon was an SVG. Several platforms fall back to a site's favicon when there is no social image, and will not render SVG. So the second chance failed for a different reason than the first.

What went in

A 1200 by 630 card, a Twitter image, a 180 pixel Apple touch icon and a real favicon.ico, all through Next's file conventions. The card type is set to summary_large_image explicitly, because without that X falls back to a small square crop and loses the line the card exists to carry.

The card leads with the tagline rather than the company name. The name is already in og:site_name, and the line is what a stranger has to understand in the half second they give a link in a feed.

Two decisions worth writing down

Static committed PNGs rather than generating the image at request time. An unfurler fetches once, caches the result for a long time, and shows nothing at all if that fetch is slow or cold. Runtime generation also needs font bytes, which means committing a font or fetching one during the build. A committed PNG is served from the CDN, cannot cold start, and cannot fail a build on a network hiccup. It does not template per route, which is the right trade for a site this size.

The build caught the one real mistake. Chrome screenshots an opaque page, so the PNG came back with no alpha channel, and Next refuses a PNG inside an ICO unless it is RGBA. That failed the build with a specific error naming the format, which is precisely what a build is for. A quieter pipeline would have shipped a favicon that renders as nothing on some platforms and been impossible to diagnose from the symptom.

Verified afterwards by requesting the page as each unfurler identifies itself, rather than by assuming they all behave alike.