Notes · 4 March 2020
A 404 page that does something
Most 404 pages are wasted real estate. A short post on what to do with them instead.
Most 404 pages are wasted real estate. The default ones say “Page not found” and offer a link back to the homepage. The clever ones say “Page not found” with a cute illustration. Neither is doing useful work.
A 404 page is, by definition, the page somebody lands on when they were trying to get somewhere else. They have a goal. Your job is to either get them to the goal, or to close the loop honestly. Almost no 404 page does either.
A few things a useful 404 page can do.
Search. The single most useful thing on a 404 page is a search input that actually works. Most static sites can ship a build-time search index with Pagefind for almost no cost. The user types a fragment of what they were looking for. The page returns the closest matches. The loop closes.
Suggest related URLs. If your URL structure has any pattern at all, you can guess what the user was after. A request to /about/team/jane-doe that 404s probably wants the team page. A request to /blog/2023-something-something probably wants the most recent post. The cost is a small server-side or build-time mapping. The benefit is that the user does not have to start over.
Show the most recent posts. If somebody followed an old link, the chances are good that the most recent posts are at least loosely on the topic they cared about.
Be specific about what went wrong, if you know. “We removed this page in 2023 because the product line was retired” is more useful than “Page not found”.
For sites that take comments or feedback seriously, log every 404. Most CMS analytics will give you a list. Most sites do not look at it. Looking at it once a quarter and fixing the top ten broken paths costs an hour and is the single highest-leverage SEO and UX move most small sites can make.
The studios that get this right tend to think of the 404 page as a feature, not a fallback. The ones that do not, ship a default and forget about it.
Two examples I keep open as references: Wikipedia’s 404 (suggests a random article, which works because Wikipedia is enormous), and Notist (matches the slug to the closest existing slug). Both close the loop. Neither is exotic.