404 pages: technical handling, creative design and mine (a video game)

The 404 page is one of the few places where a site has to disappoint the visitor: what they were looking for is not there. Handled badly, it is a dead end and a small SEO problem. Handled well, it is a detail that shows how thoroughly the site was thought through. Here I bring the two together: the technical side, which matters most, and the creative side, including my own 404, which is a video game.

The technical side, before design

The right status code

A missing page must respond with status 404 (or 410 if permanently removed). Many sites show a nice error page but respond 200: that is a soft 404, and Google flags it in Search Console because it cannot tell real pages from empty ones. In modern frameworks and pre-generated sites you must explicitly check that the error page is served with the correct status, including from the CDN.

Redirects yes, but one to one

When a page changes address, the old URL should be redirected with a 301 to the equivalent new content. Redirecting everything to the home page is the wrong shortcut: Google treats it as a soft 404, and users find it disorienting. If no equivalent content exists, a 404 is the honest answer.

Finding the 404s that matter

Not every 404 is a problem: those generated by bots trying random addresses can be ignored. What counts are URLs with external links, historical traffic or internal links. Sources: Search Console's indexing report, server or CDN logs, a periodic crawl of the site for broken internal links, backlink tools for external ones.

Prevention

Most important 404s come from a rebuild or a content reorganisation without a redirect map. On this site, for example, when the articles section was renamed and some articles were merged, every old address was redirected to the closest content.

The design side

A good 404 does three things: it explains that the page does not exist without blaming the visitor, offers somewhere to go straight away (menu, search, main pages) and keeps the site's tone. The creative part makes all this more pleasant; it does not replace it.

Criteria for the creative part

The visual effect must always leave the message, navigation and search available. A game or an animation requires keyboard controls, focus management and a choice consistent with reduced-motion preferences. The main content of the error page must remain understandable even if the effect does not load.

I'd rather verify these requirements on the real project than rely on a gallery of screenshots; references from other sites change over time.

My 404: Bug Invaders

On my site I took a developer's route: the 404 is a small video game, Bug Invaders. Instead of a line of text, an invasion of bugs to shoot down: arrow keys to move, space bar to fire, finger drag on a phone. Score, waves, lives, high score.

The technical choices behind it:

• the page responds with a real 404, not a disguised 200;
• the game is a client-side loaded component in the contexts that use it, such as the 404 and the playground; its impact is checked on network requests;
• above the game the message, buttons and menu remain: you can ignore it completely and move on, keyboard included;
• the game area stays dark even in light theme, so it does not lose legibility.

The theme fits the trade: anyone who writes code fights bugs every day. If you want to try it, open my 404 page.

Checklist for a 404 that works

1. A real 404 or 410 status, checked behind the CDN too.
2. Clear message, menu, search or links to the main pages.
3. Tone consistent with the site; when in doubt, understated.
4. Minimal weight: no libraries loaded globally for the 404.
5. Accessible by keyboard and screen reader, animations that respect reduced motion.
6. Periodic monitoring of 404s on URLs with links or traffic.

Checking the error in production

The most useful check uses an address that has never existed, requested directly on the public domain: the response must be 404 and not a 200 document showing an error message. I repeat the test on a deep route and in both languages, verifying that the CDN does not apply a global fallback to the home page.

Internal navigation needs a separate check: in an SPA changing screen may not generate a new HTML response, so a visual 404 in the router does not prove the status of a direct access. I then check an old URL with a valid equivalent: it must return the planned redirect and reach a 200 page without unnecessary chains.

Finally I check in the Network tab when the game is downloaded: dynamic import alone does not prove that other routes do not load or preload it.

My take

I see the 404 as a small quality test: it shows whether whoever built the site cared about the cases nobody looks at during sign-off. I like it to be creative, but only once the technical side is right, because a beautiful 404 that responds 200 or a mass redirect to the home page does more damage than a bare page.

The game in my 404 is also a practical demonstration of how I work: components loaded in the contexts that use them, with the weight verified on individual pages, and the main job (helping you find your way) not depending on the special effect.

Why work with me

I have been looking after websites since 1999: more than 300 projects delivered and more than 30 agencies beside me, from Rome and remotely. I also look after the parts of a site nobody sees at sign-off: errors, redirects, empty states and ways out.

If you want a site that is well made even when something goes wrong, get in touch: in a call of about 20 minutes we look at how yours responds today. The service is in Website development.