How Much Would I Have If… — the what-if calculator built to earn its long tail

Spin up a thousand near-identical “calculator” pages and Google’s Helpful Content System reads the pattern as thin and demotes the entire site — not just the weak pages.

The easy build is a template that swaps a ticker and a year into the same hollow sentence. It scales to thousands of URLs in an afternoon and ranks for nothing, because every page is a doorway with a number stamped in it. The design problem was the opposite of generation: how do you make a page that was produced programmatically read — to a person and to a crawler — as if it were written deliberately, with real data, a real chart, and something true to say that no other page says? Treat thinness itself as the bug to fix.

The most dangerous bug never threw an error. Two correct data sources, naively overlaid, produced confident, wildly wrong returns.

Long histories come from an index level; recent, precise history comes from an ETF-proxy feed. They measure the same asset on different scales. The first implementation interleaved them by date — and the seam between scales manufactured phantom swings of hundreds to thousands of percent that looked completely plausible on a chart. On a Your-Money-Your-Life topic, a believable wrong number is far worse than a visible crash. The fix was a deliberate merge(): within the span a fetched feed covers, that feed is authoritative and the seed series is never allowed to bleed in; the older seed only fills history the feed doesn’t reach. One rule, unit-tested, with the failure case pinned so it can’t come back.

A charting library would have shipped in an hour — and quietly failed keyboard users, screen readers, and the page-weight budget on ~1,070 static pages.

The charts are hand-built SVG. A single useChartHover hook drives mouse, touch, and keyboard — arrow keys to move point-to-point, Home and End to jump to the extremes, Escape to dismiss — with an aria-live region narrating each value, a touch-action: pan-y rule so the page still scrolls on mobile, and a reduced-motion path. One sharp gotcha: CSS custom properties don’t resolve inside SVG presentation attributes, so theme colours rendered as invisible lines. A small chartColor() resolver reads the CSS variable and hands SVG a real hex value — the kind of bug a library hides until it doesn’t.

The arc isn’t a feature changelog. Each step defends the same thesis — every page must earn its rank with real data and something true to say — against the cheaper, thinner version of itself.

It begins with the data spine (two sources of truth), then forces substance into every templated page, then builds the content graph that makes the long tail cohere, then makes the data verifiably real, then kills the one bug that could have made the whole thing dishonest, then earns trust through brand and accessibility — and ships.