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. The full checklist is in Rebuilding your site without losing rankings. 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.

Some frequently cited examples

Roundups of 404 pages keep returning to the same names. Error pages change over time, so open and check them before taking them as a reference.

• Lego: a worried minifigure and a pun, perfectly on brand.
• Pixar: a character from Inside Out and the idea of the page lost in long-term memory, a reference fans recognise instantly.
• GitHub: simplicity and developer humour.
• Mantra Labs: an animated astronaut and an automatic return to the home page after a few seconds.
• Dan Woodger: humour in keeping with the illustrator's work.

More examples in the roundups from IONOS, UX Planet and Speckyboy.

The common thread: the theme belongs to the site, the error is not the visitor's fault, and there is always a visible way out.

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 component loaded only there and only in the browser, so it adds no weight to other pages;
• 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.

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 only where needed, no dead weight on the rest of the site, and the main job (helping you find your way) not depending on the special effect.

Why work with me

I have been programming since 1999, delivered more than 300 projects and work as an external developer with about 30 agencies, 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.