A good 404 error page says plainly that the requested page cannot be found, gives the visitor ways forward such as site search, popular pages and a link to the homepage, and keeps the brand's voice. Technically, the server must return the page with a real HTTP 404 status (or 410 for permanently removed content); otherwise Google flags it as a soft 404.
With 404 in our name, this topic is close to our hearts. Jokes aside, the 404 page is the most neglected page on most sites: either the server's grey default error screen appears, or the visitor is left facing a single sentence. Yet every visitor arriving through a broken link is a potential customer about to be lost.
What elements should a 404 error page include?
A 404 error page should include four core elements: a clear message explaining that the page was not found without blaming the visitor, a site search box or category links, shortcuts to the most visited pages, and a link back to the homepage. The site's main navigation and footer should also stay visible on the 404 page.
- —Clear message: something like "The page you are looking for may have moved or been removed", without blaming the user.
- —Search: a search box, especially on sites with a blog or product catalogue.
- —Popular links: main services, most-read articles or category pages.
- —Home and contact: a one-click way back and a way to report the problem.
- —Consistent design: the usual menu, logo and footer, so the visitor never feels they left the site.
Can a 404 page use humour and brand voice?
A 404 page can use humour and brand voice, as long as it does not delay the visitor from finding a way out. A short joke that fits the brand softens the moment and sticks in the memory. In serious sectors such as healthcare or law, though, a plain and helpful tone is usually the better choice. Humour should sit next to the function, not replace it.
It is also wise to avoid heavy animations and large media files; the 404 page should load as fast as any other page. The error text should make sense to screen readers too, since a message written only inside an image is not accessible.
Why must a 404 page return a real 404 status code?
A 404 page must return a real 404 status code because search engines decide whether a page exists from the HTTP code the server sends, not from the text on screen. A page that shows an error message but returns 200 OK tells Google "there is valid content here". The result is an index filling up with useless, low-quality pages.
- —404 Not Found: the page does not exist; it may exist again later.
- —410 Gone: the page was removed permanently; Google treats it much like a 404 but may drop it from the index slightly faster.
- —301 Moved Permanently: the right choice when content moved to another address.
- —200 OK plus an error message: wrong; it gets flagged as a soft 404.
URLs listed under "Soft 404" in Search Console's Page indexing report are the sign of this problem. Redirecting every broken URL to the homepage is not a fix either; Google generally treats such blanket redirects to an unrelated page as soft 404s as well.
Why are 404s a problem in single-page applications (SPAs)?
404s are a problem in single-page applications (SPAs) because the server usually sends the same index.html file with a 200 status for every unknown URL, and JavaScript in the browser shows the "page not found" message. The user sees an error screen, but the HTTP code Google receives says success. This setup is the most common cause of soft 404s on sites built with React or Vue.
- —Keep a list of known routes on the server and return a 404 status for unknown URLs.
- —Generate pages as static HTML at build time (prerendering) and use a separate 404 file for unrecognised URLs.
- —If neither is possible, add a noindex meta tag with JavaScript whenever the error screen is shown.
For example, 404 Ajans's own site is written in React, and at build time every page is generated as static HTML alongside a dedicated 404.html fallback page. Whichever method you choose, verify the result through the status code the server returns and the URL Inspection tool in Search Console, not just by looking in the browser.
Should removed product and service pages return a 404?
Whether removed product and service pages should return a 404 depends on whether the removal is temporary or permanent. A product that is temporarily out of stock should keep its page live with a 200 status, showing stock information and alternatives. For a product or service removed for good, use a 301 if there is a close replacement, otherwise a 404 or 410.
- —Temporary stock issue: the page stays live with an "out of stock" note and similar products.
- —Product replaced by a new model: a 301 redirect from the old page to the new model.
- —Service discontinued entirely: 404 or 410, with internal links and the sitemap cleaned up too.
- —Seasonal campaign page: updating the same URL each year beats creating a new one and breaking the old.
Whatever you decide, internal links to the removed page should be updated as well. Old links left in menus, blog posts or the sitemap send visitors to the 404 page and waste the crawl budget search engines spend on your site.
How do you find and fix broken links?
Broken links are found through Search Console's indexing report, server access logs, views of the 404 page in your analytics and a crawling tool. The fix depends on the type of link: an internal broken link is updated directly, while old URLs that still receive valuable external links are redirected with a 301 to the closest matching content.
- —Track 404 page views in analytics as a separate event or page title.
- —Check monthly which URLs return 404 most often and where the visits come from (referrer).
- —Add a 301 for moved content; leave a 404 or 410 for content that is truly gone.
- —Before a site migration or redesign, prepare an old-to-new URL mapping table.