404 page design: a dead end that still gets people where they meant to go
A 404 page appears when someone follows a link or types an address that doesn't exist. Its job is short: say plainly that the page isn't here, suggest the few places they were probably heading, and look like the rest of the site so they know they haven't left it. A joke is optional. A way forward isn't.
Why people reach a 404
Knowing the cause shapes what the page should offer. The most common routes are an old link from another site or a search result after a page moved, a mistyped or shortened address, a link inside your own site that was never updated, and a product or event that has ended. Only the last two are fully in your control, which is why a 404 page design is no substitute for fixing internal links and adding redirects when pages move.
What the page should contain
- A plain heading. “We can't find that page” or “This page doesn't exist”. Many visitors don't know what “404” means, so don't rely on the number.
- One line on what might have happened. “It may have moved, or the address may be mistyped.”
- Three to five likely destinations. The pages people most often want: for a restaurant, the menu, booking and opening hours; for a shop, the main collections and contact. Name them as links in plain words.
- Search, if the site has it. Useful on large sites; unnecessary on a five-page one.
- A way to report it, if you want to hear about broken links: a contact link is enough.
- The normal header and footer, so navigation still works and the visitor recognises the site.
Tone: helpful first
Many 404 error page examples online are jokes, illustrations or games. They can be charming once, but the visitor is mildly frustrated and wants to get on. A clever line is fine if it's short and the links come straight after it. Avoid humour that blames the visitor (“Looks like you got lost”) when the broken link is often yours, and avoid making the error feel like a new destination with nothing to do there. Keep the page in the site's own type, colours and layout rather than a novelty design that looks like a different website.
Do's and don'ts
| Do | Don't |
|---|---|
| Return a real 404 status code | Show an error message on a page that returns 200 |
| Keep the site's header, footer and style | Strip the page down to a lone message |
| Offer a few specific links | Offer only “Go home” |
| Keep it short and readable | Fill it with an animation that delays the links |
| Log or review which addresses get 404s | Assume nobody hits it |
| Redirect moved pages with a 301 | Send every missing address to the homepage |
The status code matters for search engines. A page that says “not found” but returns a success status is what Google calls a soft 404; its documentation on HTTP errors explains how these are handled. MDN's 404 Not Found reference covers the status itself. Redirecting every missing page to the homepage confuses visitors as well: they land somewhere unexpected with no explanation. For moved pages, see 301 redirects explained.
Accessibility
- Give the page a
titlethat says what happened, such as “Page not found – Northside Barbers”, so screen reader users hear it immediately. - Use a real
h1for the message and a list for the suggested links. - Write the suggestion links as their destinations (“Menu”, “Book a table”), not “Click here”.
- If you include an illustration, give it empty alt text when it's decorative, or a short description if it carries the joke.
404s and Anticode
The best 404 is one nobody reaches from your own site. The Critic flags empty links (an empty href, # or javascript:), and the design gate blocks them at publishing, so a build can't ship with buttons that point at nothing. Neither checks that an outside address still works, so test links to other sites yourself. Each published site also serves its own sitemap.xml listing its real pages, which helps search engines drop old addresses.
When someone does request an address that doesn't exist on a published Anticode site, the server returns a genuine 404 status with a short plain-text message, “This page doesn't exist.”, rather than a soft 404.
Questions people ask
What should a 404 page say?
That the page can't be found, a likely reason, and a few links to the pages people most often want, inside the site's normal header and footer.
Should a 404 page redirect to the homepage?
No. Show a helpful 404 with a real 404 status, and use individual 301 redirects for pages that have moved.
Should a 404 page be funny?
It can be, briefly. The links forward matter more than the joke, and humour shouldn't blame the visitor.