Most articles about 404 page design show you galleries of cute illustrations. Nice to look at, useless for your business. A 404 page is not a mascot showcase, it is a recovery page: a visitor hit a dead end on your site, and you have roughly five seconds to send them somewhere useful instead of back to Google.
At HTML Hunter we audit a lot of sites, and the pattern is always the same: the 404 page is the last thing anyone designs, it gets a generic “Page not found” message, and nobody ever looks at how much traffic it swallows. This guide fixes that. Below you will find the 9 elements an effective error page must contain, annotated examples of what good looks like, how to track 404 hits in analytics, and how to find and repair the broken links causing them.
Why your 404 page is a conversion asset, not a decoration
Every hit on your error page is a visitor who already wanted something from you. They clicked a link, typed a URL, followed an old bookmark or landed from a search result pointing to a page you deleted. The intent is there. Only the destination is missing.
Three things happen on a badly designed 404 page:
- The visitor hits the back button and returns to the search results (you just handed a click to a competitor).
- The visitor assumes the whole site is broken and loses trust in your brand.
- You never find out it happened, because nothing is tracked.
A well built error page typically keeps a meaningful share of those visitors in the funnel by offering an obvious next step. The goal is simple and measurable: reduce the exit rate of your 404 page and push visitors back into the pages that actually convert.
What a 404 page actually is (the short technical answer)
A 404 is an HTTP status code returned by your server when the requested URL does not exist. The page the visitor sees is the HTML document your server serves alongside that status code. Two important points:
- The page must return a real 404 status code, not a 200. A missing page that returns 200 with “not found” text is a soft 404, and search engines treat it as a quality problem.
- You can fully customise it. On most stacks it takes minutes (see the implementation table further down).
The 9 elements of an effective 404 page design
Here is the checklist we apply during client audits. Elements 1 to 5 are mandatory. Elements 6 to 9 separate an acceptable page from one that genuinely recovers traffic.
| # | Element | Purpose | Priority |
|---|---|---|---|
| 1 | Clear, plain language message | Remove confusion instantly | Must have |
| 2 | Full site navigation and header | Prove the site still works | Must have |
| 3 | Working search bar | Let the visitor self serve | Must have |
| 4 | Links to popular or high value pages | Offer an immediate next step | Must have |
| 5 | One primary call to action | Keep the conversion path alive | Must have |
| 6 | Smart suggestions based on the broken URL | Recover the original intent | High impact |
| 7 | Brand tone and visual consistency | Maintain trust | High impact |
| 8 | A way to report the problem | Collect fix data from users | Nice to have |
| 9 | Correct status code, speed and tracking | Make it measurable and SEO safe | Must have |
1. A clear message in plain language
Start with the fact, then the reassurance, then the action. The U.S. Web Design System recommends plain language for exactly this reason: an error state is already stressful, so jargon makes it worse.
What works:
- “This page does not exist anymore. It may have been moved or deleted.”
- “We could not find that page. Try a search or pick one of the links below.”
What fails:
- “HTTP Error 404. The requested resource could not be located on this server.”
- A giant “404” with no explanation and no exit.
- Blaming the user: “You have entered an invalid address.” Very often the broken link is yours.
Keep the headline under 10 words and the supporting sentence under 25. If the number 404 appears, pair it with a human explanation underneath.
2. Keep your full header, navigation and footer
A surprising number of error pages are standalone screens with no menu. That is the fastest way to lose a visitor. Your 404 page should look and behave like any other page of the site, with:
- The logo, linked to the homepage
- The main navigation menu
- The footer with contact, legal and category links
This single change usually does more for retention than any illustration, because it gives the visitor 15 or 20 escape routes instead of zero.
3. A real search bar, placed above the fold
The search field is the highest intent element on a 404 page. The visitor was looking for something specific, so give them a way to describe it.
Implementation details that matter:
- Autofocus the field on desktop so the user can type immediately.
- Pre-fill it when you can. If the broken URL was /blog/responsive-email-templates, prefill the search with “responsive email templates”.
- Make sure the search engine behind it actually returns relevant results. A search box leading to an empty results page is a second dead end.
- Track every search performed from the 404 page separately. It is a goldmine of “content we should have”.
4. Links to your most popular and highest value pages
Do not dump your sitemap. Pick between 4 and 8 destinations, chosen with data, not opinion. Good candidates:
- Your top 3 traffic pages (from analytics)
- Your main product, service or pricing page
- Your blog or resources hub
- Your contact page
Label them with benefit driven wording rather than raw page titles. “Browse our HTML templates” converts better than “Templates”.
5. One primary call to action
Even on an error page there should be a single visually dominant button. For an e-commerce site it is “Continue shopping”. For a SaaS it is “Start free trial” or “See pricing”. For a content site it is “Read the latest articles”.
The hierarchy on a strong 404 page looks like this: message > search > primary CTA > secondary links > report link. Everything else is decoration.
6. Contextual suggestions based on the broken URL
This is where most sites stop and where real traffic recovery starts. The requested URL contains information. Use it.
- Keyword matching: parse the slug, run it against your internal search index and display the 3 closest matches with “Did you mean?”.
- Section fallback: if the URL starts with /shop/shoes/, show the shoes category listing instead of generic links.
- Typo tolerance: a fuzzy match on slugs catches a huge number of mistyped or truncated URLs shared in emails and chat apps.
- Recently deleted content: if the page existed and was removed, say so and point to the replacement.
A 404 page that shows three relevant suggestions behaves like a search results page. That is the difference between a 90% exit rate and something far healthier.
7. Brand tone, used with restraint
Personality is fine. Personality instead of navigation is not. The rule we use: the joke never replaces the exit route.
Tone should also match context. A playful illustration works on a creative agency site. On a banking, medical or government page, plain reassurance works better. And remember accessibility: sufficient contrast, descriptive alt text on illustrations, a page title such as “Page not found | Brand”, a logical heading structure and full keyboard access to the search field.
8. An easy way to report the broken link
Add a small secondary link: “This link should work? Tell us.” Send it to a short form or a mailto with the broken URL and referrer pre-filled. Visitors will report broken links you would never have found, especially those coming from external sites you do not control.
9. Correct status code, fast load, full tracking
The invisible part of 404 page design is the technical layer:
- Return a genuine 404 (or 410 for content deliberately removed forever).
- Keep the page light. Do not load a 4 MB animation on a page whose job is to be left quickly.
- Add
<meta name="robots" content="noindex">if your system might expose the template on an indexable URL. - Fire a dedicated analytics event so you can measure it (full setup below).
- Never redirect all 404s to the homepage. It confuses users and creates soft 404s.
Annotated examples: what good looks like
Rather than a gallery of illustrations, here is what to look at on real error pages and why it works.
GitHub: navigation first
The page keeps the full header, the main search and a clear “Find code, projects, and people on GitHub” prompt. The illustration is secondary. Takeaway: on a site where search is the primary navigation method, the 404 page should simply be a search entry point.
Amazon and large e-commerce sites: push merchandise
Typical pattern: short apology, full navigation, search bar, then product carousels (recently viewed, best sellers, recommendations). Takeaway: a product grid turns a dead end into a browsing session. Any store can replicate this with “Best sellers” and “Recently viewed” blocks.
Government and public sector pages: plain language
The USWDS model is deliberately boring: a short factual headline, an explanation of possible causes, a search field and links to main sections. Takeaway: when your audience is broad or stressed, clarity beats creativity every single time.
Documentation sites: contextual suggestions
Good docs sites parse the URL and display matching articles plus a link to the current version of the documentation, because deleted doc URLs are often simply renamed. Takeaway: if your URLs are structured, you can almost always guess what the visitor wanted.
The anti-pattern to avoid
A full screen animation, a huge “404”, one small “Go home” link, no menu, no search, no tracking. It looks great in a design gallery and recovers nothing.
How to track 404 hits in analytics
If you cannot measure your error pages, you cannot fix them. Here is a practical setup for GA4 and Search Console.
Method 1: a dedicated GA4 event (recommended)
Add a small script to your 404 template only:
<script>
gtag('event', 'page_not_found', {
'broken_url': window.location.pathname + window.location.search,
'referrer': document.referrer || 'direct'
});
</script>Then register broken_url and referrer as custom dimensions in GA4 (Admin > Custom definitions). You will be able to build a report listing every broken URL with its traffic source, which is exactly what you need to prioritise fixes.
Method 2: a recognisable page title
Set the title of the 404 template to something unique such as “404 Page not found | Your Brand”. In GA4 you can then filter Pages and screens on that title and see every URL serving the error page. Less precise than events, but zero development time.
Method 3: Google Search Console
Go to Indexing > Pages > Not found (404). This shows URLs that search engines tried to crawl. Combine it with the Links report to find which pages point at the dead URLs. Search Console catches crawler level issues that client side analytics often miss, since many bots never run JavaScript.
Method 4: server logs
The most complete source. Server logs capture every 404, including images, PDFs, scripts and bot requests that never appear in GA4. Filter your access log on status 404, group by URL, sort by volume.
What to monitor each month
| Metric | What it tells you | Target direction |
|---|---|---|
| Total 404 sessions | Scale of the problem | Down |
| Top 20 broken URLs | Your fix priority list | Resolve monthly |
| Exit rate of the 404 page | Quality of the page design | Down |
| Clicks on suggested links and CTA | Recovery rate | Up |
| Searches started from the 404 | Unmet content demand | Analyse queries |
| 404s with external referrers | Lost backlink value | Redirect fast |
How to find and fix the broken links causing your 404s
A great error page is damage control. The real win is having fewer errors in the first place.
Step 1: crawl your own site
Run a crawler (Screaming Frog, Sitebulb, Ahrefs Site Audit, Semrush or the free crawler of your choice) and export all internal links returning 404. These are entirely your fault and entirely within your control. Fix the link at the source, in the content, rather than piling up redirects.
Step 2: check inbound links from other sites
Use your backlink tool or Search Console to find external links pointing to dead URLs. Each one is link equity leaking away. Redirect those URLs to the closest relevant page.
Step 3: choose the right fix for each URL
| Situation | Correct action |
|---|---|
| Page moved to a new URL | 301 redirect to the new URL |
| Product out of stock but returning | Keep the page live with availability info |
| Product discontinued, similar one exists | 301 to the closest equivalent or its category |
| Content deleted, no equivalent, no traffic | Let it return 404 or 410 |
| Mistyped URL with volume | 301 the typo variant to the correct URL |
| Spam or random bot URLs | Ignore, keep the 404 |
Important: redirecting an unrelated dead URL to your homepage is treated as a soft 404 by search engines and frustrates users. Only redirect when the destination is a genuine equivalent.
Step 4: prevent future breakage
- Create a redirect rule every time you change a slug, and make it part of your publishing checklist.
- Run an automated broken link crawl monthly and before every release.
- Keep a redirect map in version control so migrations do not lose history.
- Audit links in old articles once a year, especially external ones.
Where to put your custom 404 page, by platform
| Platform | How to set it up |
|---|---|
| WordPress | Create 404.php in your theme, or design a 404 template in your block or page builder |
| Static HTML on Apache | ErrorDocument 404 /404.html in .htaccess |
| Nginx | error_page 404 /404.html; in the server block |
| Next.js | Add not-found.tsx (App Router) or pages/404.js |
| Shopify | Edit 404.liquid in the theme files |
| Netlify / Vercel / Cloudflare Pages | Place a 404.html at the root of the published directory |
Copy and paste starter template
A minimal, accessible structure you can adapt. Keep your own header and footer around it.
<main class="error-404">
<h1>We could not find that page</h1>
<p>The page may have been moved, renamed or deleted. Here is how to get back on track.</p>
<form role="search" action="/search" method="get">
<label for="s">Search the site</label>
<input id="s" type="search" name="q" autofocus placeholder="What were you looking for?">
<button type="submit">Search</button>
</form>
<a class="btn-primary" href="/products">Browse our products</a>
<h2>Popular pages</h2>
<ul>
<li><a href="/">Homepage</a></li>
<li><a href="/blog">Latest articles</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
<p><a href="/report-broken-link">This link should work? Report it</a></p>
</main>Final audit checklist
- The URL returns a real 404 status code (check with a header checker, not your eyes).
- The headline is in plain language and under 10 words.
- The full header, menu and footer are present.
- A working, autofocused search bar sits above the fold.
- Between 4 and 8 curated links point to your best pages.
- One primary CTA is visually dominant.
- Contextual suggestions are generated from the broken URL where possible.
- The design matches the brand and passes contrast and keyboard tests.
- A report link is available.
- A GA4 event records the broken URL and the referrer.
- The page loads in under one second.
- The page is responsive and tested on mobile.
Work through that list once and your error page stops being a leak. Review your top broken URLs every month and the leak keeps shrinking.
FAQ about 404 page design
What should be on a 404 page?
At minimum: a clear message explaining the page does not exist, your full navigation, a search bar, links to your most popular pages and one primary call to action. Add contextual suggestions based on the requested URL and a way to report the broken link for best results.
What does a 404 page look like?
It looks like a normal page of your website with a short error message instead of the usual content. The best ones keep the header, footer and branding, show a search field and offer a short list of relevant destinations. A blank screen with a large “404” and nothing else is the version to avoid.
Can you customise a 404 page?
Yes, on every platform. WordPress uses a 404.php template or a visual template, Shopify uses 404.liquid, Apache uses the ErrorDocument directive and modern frameworks have dedicated not-found components. The only rule is that the custom page must still be served with the 404 status code.
What does a 404 error mean?
It means the server was reached but could not find anything at the requested address. Common causes are a deleted page, a changed URL, a typo, or an outdated link on another website.
Do 404 pages hurt SEO?
404 errors on URLs that genuinely no longer exist are normal and do not damage rankings. Problems appear when important pages with traffic or backlinks start returning 404, when internal links point to dead URLs, or when missing pages return a 200 status code and create soft 404s.
Should a 404 page redirect automatically to the homepage?
No. Automatic redirects disorient visitors, hide the real problem from your analytics and are interpreted as soft 404s. Keep the 404 and offer clear manual routes instead. Use 301 redirects only when there is a genuine replacement page.
404 or 410, which should I use?
Use 404 when content is missing or might come back. Use 410 (Gone) when you have deliberately removed content permanently and want search engines to drop it faster. For visitors, both should display the same helpful error page.
How often should I check for broken links?
Run a full crawl monthly for most sites, weekly for large e-commerce catalogues, and always after a migration, a redesign or a bulk content cleanup. Review your Search Console “Not found” report at the same time.
