--- title: "404 page examples" description: "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." source: https://savepad.app/blog/404-page-examples --- [Blog](https://savepad.app/blog) · 10 January 2025 # 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. *A playful 404 page saved in Savepad* **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 1. **Say what happened, plainly.** “This page doesn’t exist, or it moved.” Not “Error 404: resource not located”. 2. **A search box.** The fastest way back. 3. **Links to where they probably wanted to go.** Your top pages, recent posts, docs. 4. **A way to report it.** “Tell us which link sent you here.” 5. **Your normal header and footer.** So they can navigate like on any page. 6. **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](https://github.com/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. *A mock playful 404 page for the fictional brand Oddsocks* 0333 · 404 · Oddsocks *A mock 404 page with a search box and popular links* 0430 · 404 · search + top links *A mock honest 404 page for the fictional dev tool Tidepool* 0527 · 404 · Tidepool 404 pages from a swipe file: one joke, one useful, and one honest. ## 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](https://savepad.app/blog/landing-page-examples) and [onboarding and empty state examples](https://savepad.app/blog/saas-onboarding-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. [Join the waitlist](https://savepad.app/#waitlist) ## Read these next - [Hero section examples: Hero section patterns that work, from product-first heroes to one-line promises, with real dev tool and SaaS homepages and the mistakes that cause bounces.](https://savepad.app/blog/hero-section-examples) - [Landing page examples I keep stealing from: The landing pages in my own swipe file, what each one does well, and the patterns worth borrowing for your next homepage.](https://savepad.app/blog/landing-page-examples) - [How to use Pinterest secret boards as a swipe file: How to make a secret board on Pinterest, use sections to sort a swipe file, cut down the AI pins in your feed, and know when Pinterest stops being the right place.](https://savepad.app/blog/pinterest-secret-board-swipe-file)