404 page examples
Good 404 pages get people somewhere useful and leave them in a better mood. Patterns that work, a checklist, and how to keep the clever ones you find.
TLDR
- A 404 page has two jobs: get people somewhere useful, and not make them feel stupid.
- The useful bits: a plain explanation, a search box, links to your top pages, and a way to report the broken link.
- Personality is welcome, as long as it doesn’t get in the way of the useful bits.
Why bother
Everyone hits a 404 eventually: an old link, a typo, a page you renamed. It’s one of the few pages where the visitor is already annoyed. A good one turns “ugh” into “ha, OK” and gets them back on track. A bad one (a white page with “Not Found”) sends them back to Google, possibly to a competitor.
The checklist
- Say what happened, plainly. “This page doesn’t exist, or it moved.” Not “Error 404: resource not located”.
- A search box. The fastest way back.
- Links to where they probably wanted to go. Your top pages, recent posts, docs.
- A way to report it. “Tell us which link sent you here.”
- Your normal header and footer. So they can navigate like on any page.
- A real 404 status code. Not a 200 page that says 404, which confuses search engines.
Patterns that work
The joke that fits the brand. GitHub’s 404 has been a Star Wars parallax (“This is not the web page you are looking for”) for over a decade. It works because it’s nerdy and so are its users.
The mini-game. Chrome’s dinosaur is the famous one (the offline page, not a 404, but same spirit). Fun, but make sure the search box still comes first.
The useful one. No jokes, just search plus the five pages people look for most. Boring and very effective for docs and ecommerce.
The honest one. “We broke this. Sorry.” With a link to report it. Works for small teams.
Find your broken links first
The best 404 is the one nobody sees. Check your site for broken internal links, and redirect old URLs that still get traffic, in one hop, not three.
Keep the clever ones
404s are hard to find on purpose, so when you stumble on a great one, save it. In Savepad you get a picture of the whole page as it was, which matters here, because 404 pages get redesigned without anyone announcing it. Put them in a folder next to your landing page examples and onboarding and empty state examples, since the same writing skills apply.
FAQ
What should a 404 page include?
A plain line saying the page doesn't exist, a search box, links to the most useful pages, and a way to report a broken link. A bit of personality is a bonus.
Do 404 pages affect SEO?
A proper 404 status code tells search engines the page is gone, which is fine. The problem is broken internal links. Fix those, and redirect old URLs that had traffic.
Should a 404 page redirect to the homepage?
No. Redirecting every missing page to the homepage confuses visitors and search engines. Show a helpful 404 with links instead.