1 of 4

Every page on my site draws its own preview picture, from its own words

A client sends your pricing page to a friend. The friend sees a small picture, a title and your domain, and decides in about a second whether to tap.

On most sites that picture is the same for every page. A pricing page, an article and a contact page all look identical, so none of them says what's inside.

Every page on my site now draws its own picture: a topographic map grown from the page's own words and the day it was last edited. Three questions shaped it. What should the picture show? Why does the usual approach backfire? And what does it cost to run?

Why the usual approach backfires

The common choice is a logo and a headline on the image. But every platform already prints your title and domain beside the picture, and X stamps its own label in the bottom-left corner. Text in the image repeats what's there and collides with what the platform adds.

So the picture carries no text at all. It only has to say one thing: this page is its own place.

How each page gets its own map

The page's text becomes six measurements: how long it is, how varied its words are, how long its sentences run, how much punctuation it uses, how many long words it has, and how many numbers. Those shape the land. The nine most distinctive words each raise a hill. The edit date adds a fine layer of weathering, so editing a page changes its picture.

It's deterministic: the same page always gives the same image, byte for byte, so the platforms' caches behave. The brightest contour lines are drawn as ribbons of halftone dots that follow the slopes.

The colours are warm brown and orange. Nearly every app people scroll through is slightly blue, so a warm picture stands out in a feed.

What it costs to run

Nothing per visit. Every picture is drawn once, when the site is built, so visitors never wait for one. A 128-colour version came out at a third of the file size, and side by side it looked better than the full-colour one.

A link preview is the first thing a customer judges a page by. If every page shares one picture, someone sent your pricing page sees a generic card, and the client who forwarded it looks like they sent the wrong link. No public test measures how many taps that costs: the "47% more clicks" figures in circulation are vendor claims with no method behind them.

Do this on your own site

Ask whoever runs your site one question: "When someone shares my pricing page, what picture shows up?" If it's your home page's picture, every shared link is wearing the same face.

The full source is free to copy: a plain description of each page that any drawing style can read, a terrain drawer, and a second, ridgeline style built on the same description to prove it. It's in the original build log.

If you'd like a second pair of eyes on what your links look like when they're shared, write to me: mackenzie@mackenziebowes.com or @_mackenziebowes.