Website design · 12 Nov 2026 · 6 min read
404 page design: how to build a custom 404 page that helps
Every site shows a not-found page sooner or later. This guide covers what to put on it, how to write it, and the technical detail that decides whether it behaves correctly for search engines.
The short answer
A 404 page is what visitors see when they request an address that does not exist. A good custom one keeps your header and menu, says plainly that the page was not found, offers search and links to useful places, and still returns a real 404 status code so search engines do not treat it as a normal page.
What a 404 page is and why visitors land on it
Good 404 page design starts with knowing what the page is for. A 404 page is the page a visitor sees when they request an address on your site that does not exist. The server replies with the status code 404, which means not found. A default page for this is usually bare, unbranded and gives the visitor nowhere to go. A custom 404 page keeps your design and offers a way on.
Visitors arrive at it for ordinary reasons: a mistyped address, an old bookmark, a page you deleted or renamed, a broken link on your own site, or a link on someone else's site that points to an address that has since changed. The last case matters more than it seems. If you earn mentions through digital PR, each article links to a specific address on the day it is published. If you later move that page without a redirect, every reader from that article reaches your not-found page, so it should be ready to help them.
Check the status code before you check the design
The most important property of a 404 page is invisible: it must return a 404 status code. Google's documentation says custom 404 pages exist for users, and that the server should return the 404 code so the page is not indexed. A page that says "not found" but returns a success code is called a soft 404, and Google excludes such pages from Search.
Two habits cause this. One is a setup that redirects a missing address to a friendly page such as /not-found/, which then loads normally with a success code. The other is redirecting every unknown address to the home page. Google's guidance on site moves says that sending many unrelated old addresses to one destination, such as the home page, can confuse users and may be treated as a soft 404. The correct pattern is to serve the not-found page at the requested address and send the 404 code with it.
The same Google documentation says that 404 errors on addresses that should not exist do not count against your site. A missing page is part of the web. What matters is whether pages you care about return 404 by mistake, and whether the page that appears is helpful. Google also treats the 410 status, gone, like a 404 for these purposes.
To check the code, open your browser's developer tools, choose the Network tab, visit an address that cannot exist on your site, such as one with random letters, and read the status of the first request. Search Console's page indexing report can also list pages that Google treats as soft 404s. Check the current documentation for how the report is labelled.
404 page design: the parts of a useful page
Start with a simple wireframe before choosing colours or illustrations. A sketch of what goes where is enough to agree the content with a designer or developer.
| Element | What it does | Mistake to avoid |
|---|---|---|
| Normal header and menu | Keeps the visitor oriented and lets them navigate | Stripping the page down to a lone message |
| Plain headline | Says what happened in words anyone understands | Showing only a number such as 404, or a joke with no information |
| One or two sentences | Explains the likely cause and what to do | Blaming the visitor or using technical terms |
| Search field | Lets the visitor look for what they wanted | Adding a search box that returns poor results |
| Links to key places | Offers the home page, main services or products, popular articles and contact page | Linking to everything, which defeats the purpose |
| Reporting route | Lets a visitor tell you about a broken link | Hiding the contact details |
| Normal footer | Keeps the page part of the site | Leaving it out |
Keep the page short. The visitor is already lost, and a long page makes it worse. Four to six links are usually plenty. If your site has several distinct areas, such as a shop and a blog, consider showing links that fit the area the missing address belonged to. A missing blog address can show recent articles, and a missing product address can show the main categories.
What to write on a 404 page
Say what happened, say what to do next and keep the tone of the rest of your site. Here is a plain example of the copy.
We cannot find that page. The address may have been typed incorrectly, or the page may have moved. Try the search box, or go to one of the links below.
A little humour can fit a brand that is relaxed everywhere else, but the help must stay clear, and a joke is not a substitute for links. Avoid humour on sites where a missing page might cause real worry, such as health, finance, legal or government services. Skip exclamation marks and cutesy wording, which tend to read as brushing the problem off. If the site is available in several languages, translate the page for each one and link to the right language version of the home page.
Do not write "Error 404" alone in large type. Many visitors do not know what it means. If you want to show the code, keep it small as a reference.
Design details that are easy to miss
Use the same fonts, colours and spacing as the rest of the site, and the same web fonts so the page does not download extra files, as the guide to web fonts explains. Avoid large animations and heavy illustrations. The page should load quickly, since it often appears on a weak mobile connection after someone taps a stale link.
Make the headline the page's main heading and keep the text readable on a phone. Check contrast for links and buttons. If you use an illustration, give it a short description for screen readers or mark it as decorative. Make sure the search field and links can be reached by keyboard.
Keep the layout stable while it loads. Reserve space for any image so the links do not jump as the page appears.
How the page is built
How you set up the not-found page depends on how the site is made. Content platforms usually have a template for it, and changing the template changes the page. In WordPress the theme normally controls it, while a hand-coded site often handles it through a server setting that names an error document. The differences are part of the trade-off covered in WordPress website versus custom website.
Whichever route applies, ask your developer to confirm these points.
- The page is served at the requested address with a 404 status, not through a redirect.
- Missing files such as images and scripts also return 404, rather than the full page.
- The page is excluded from the XML sitemap and from internal links.
- Addresses that have moved to a close replacement get a redirect, so only truly missing pages reach the 404 page.
Build and test it on a copy of the site first. The guide to a staging site explains how to do that without risking the live pages. After launch, test again on the live address, since server settings sometimes differ between the two.
Looking after the page over time
A 404 page is not finished at launch. Look at which missing addresses get requested most often, using your server logs or your analytics. Some will be typing mistakes that need nothing. Others will be moved pages that deserve a redirect to the closest equivalent, or broken links inside your own site that you can correct at the source. After a redesign or a change of structure, check the not-found list within the first few weeks.
Review the page text once a year with the rest of the site. If you want help designing and building the error pages for a new or existing site, Liftup Technologies' website development service is one place to start.
Related guides
- Website wireframes what they are
- Wordpress website vs custom website
- Digital pr how to get press mentions
- Staging site what it is and why to use one
- On page seo checklist for one page
- Logo design brief how to write one
Questions and answers
What is a 404 page?
It is the page shown when someone requests an address that does not exist on your site. The server replies with the status code 404, meaning not found. A custom version keeps your branding and helps the visitor find something useful.
What should a good 404 page say?
It should say plainly that the page could not be found, suggest a likely cause such as a mistyped address or a moved page, and tell the visitor what to do next. Add a search field and a few links to the home page, main sections and contact page. Keep the tone consistent with the rest of the site.
Does a custom 404 page help SEO?
Google says 404 errors on addresses that should not exist do not count against a site, and a custom page is there for users. What matters for search is that the page returns a real 404 status code and not a success code. A helpful page can still keep visitors on your site.
Should I redirect all missing pages to the home page?
No. Google's guidance says redirecting many unrelated addresses to one page, such as the home page, can confuse users and may be treated as a soft 404. Redirect a moved page to its closest equivalent and let truly missing addresses show the 404 page.
How do I check that my 404 page returns the right code?
Visit an address that cannot exist on your site, open your browser's developer tools and read the status of the request in the Network tab. It should say 404. If it says 200, the page is a soft 404 and your developer should fix the setup.
Tell us what you are building.
A short call, a written plan and a fixed quote. No obligation.