404 Error Page: How to Build a Custom One That Passes the Check

What is a 404 error page and why do visitors see one?

A 404 error page is the page a server returns when a browser or a crawler requests a URL that does not exist. The number is an HTTP status code defined in RFC 9110, where HTTP 404 Not Found means the server was reached and understood the request, but it has nothing at that address. People often search for it as error 404. It differs from a 5xx server error, where the server itself failed, and from a 403 forbidden response, where the page exists but you aren't allowed to open it. A 410 Gone response is the deliberate cousin: it tells clients that the page was removed on purpose. The MDN 404 Not Found reference from MDN Web Docs gives the exact wording of the code if you want the formal definition.

Most 404s come from a short list of causes. A visitor mistypes the address. You delete or rename a page and forget the redirect. A link inside your own site still points at the old path. Another website links to a URL you retired years ago. Or you change the permalink structure of your CMS and every old post address stops resolving at once. None of this means the site is broken. It means one specific address has no content behind it.

What the visitor sees depends on your setup. With no custom page, many servers print a bare line such as Not Found, with no logo, no menu and no way forward, and to an ordinary visitor that looks like the whole site is down. A crawler sees something simpler: a status code and a body. Google reads a 4xx status as a sign that the URL has no content and removes it from its index over time. A redirect is judged by where it ends, so a missing URL that is redirected to a live page is no longer a 404 in the crawler's eyes.

Why a custom 404 error page matters for visitors and SEO

A 404 is not a penalty. A handful of not found URLs on a healthy site is normal, and Google Search Central documentation says that it ignores content from URLs returning a 4xx status instead of marking the whole site down. The real costs are quieter. You lose the visitor who landed on a dead address, which feeds your bounce rate, and you lose the link equity the old URL had collected if nobody redirects it to a close replacement.

The page also works as a diagnostic. Whenever someone reaches it by clicking a link on one of your own pages, that link is a defect you can repair, and our guide on how to fix broken internal links shows how to find them. Crawlers that keep hitting such links spend requests on addresses that lead nowhere.

There is a brand angle as well. A calm message in your normal layout reads as a site somebody looks after, while a raw server message reads as abandonment, so a helpful 404 page is a small user experience win.

Visitor experience

Picture someone who taps a link a friend pasted into a chat app, with one letter wrong in the address. They can't tell whether your site or the link is broken. The first screen needs three things: a plain statement that the page wasn't found, your usual header so they know they're still on your site, and a way forward, either a search field or a few links to your main sections.

Many visitors who follow a link from a social app or a message arrive on a phone, so the way forward has to work with a thumb. A mobile friendly 404 page gives the links large tap targets with space between them and keeps the search field wide enough to type in without zooming. A bare server line offers none of this.

Crawling and indexing

For search engines the status code is what counts, not the design. According to how Google treats 4xx codes, URLs that return a 4xx status are dropped from the index, and a page that looks like an error but answers 200 is reported as a soft 404. A beautiful error page with the wrong status therefore does more harm than an ugly one with the right status.

Keep the error page itself out of circulation. The error page should not appear in your XML sitemap, in the navigation or in a footer link, because a URL that is meant to be missing has no business being listed as a destination.

How SEO Site Checker tests your custom 404 error page

Our report probes your site with one made up address and reads what comes back. It does not crawl your pages looking for a 404 template, and it does not judge the design. It asks a narrow technical question and gives you a narrow technical answer.

The exact rule: the report requests /this-page-should-not-exist-12345 on the root of your domain with a plain GET and a 3 second timeout, follows any redirects, and reads the final response. It passes when the final status is 404 and the raw HTML contains 404 or the phrase not found, in any letter case.

Because the match runs on the page source and not on the visible text, the digits 404 anywhere in the markup are enough, whether they sit in a heading, a script or a class name. That makes the status code the strongest part of the test. It proves the status far better than it proves the wording.

A warning means the status was 404 but the source held neither 404 nor not found. A stock Apache or Nginx page passes because it says Not Found, so the warning usually points at something else: a minimal app response such as an Express Cannot GET message, a blank body, or a well made page whose copy only says we can't find that page. If you see it, add a plain Page not found heading so the check recognizes the page. Be aware that the on-screen message for a warning says no custom page was found, which is stricter than what the warning actually measures.

A fail covers everything else: a 200 soft 404, a redirect that lands on your homepage, a 403 or a 500, a response slower than 3 seconds, a DNS or SSL error, or a firewall that blocks the report request. The fetch sends default request headers and no browser user agent, so bot protection that challenges unknown clients can produce a fail even though real visitors see a perfect page.

• Pass: the final response is HTTP 404 and the source contains 404 or not found.
• Warning: the final response is 404 but the source contains neither phrase.
• Fail: any other final status, a timeout past 3 seconds, a connection error or a blocked request.
• Not tested: whether the page is custom, how it looks, and what happens in subfolders, apps or language folders.

Two limits are worth stating plainly. Because those stock pages pass, a server with no custom page at all can still get a green row, and only a look in the browser tells you whether yours is really custom. And since only one address at the site root is probed, a separate 404 setup inside a blog folder or a web app is invisible to the report.

Run the free site check

What a good custom 404 page includes

Good 404 page design is a small, friendly signpost. It doesn't need illustrations or jokes, although a touch of personality is fine. It needs to answer one question: where can I go from here? A page with a site search and links to your main categories sends people on, while one with only a joke and a cartoon makes them leave. Use this checklist when you draft your branded 404 page.

• A plain heading. Say Page not found in everyday words and add one line that explains what happened, such as the page may have moved or the link may be mistyped. Skip technical jargon.
• Your normal header and navigation. Keep the logo, main menu and footer so the visitor is never stranded and can reach any section in one click. Planning those menus well starts with a clear site structure guide for your whole site.
• A search box. People who land on a dead address often know what they were looking for, and on a content heavy site a search field is the fastest way back to it.
• Three to six popular links. Point to your best categories, your most read posts or your main service pages. Fewer, well chosen links beat a long dump of every page.
• A way to report the problem. A mailto link or a short form works as a simple broken link report, and that feedback often finds problems your own checks miss.
• Light weight. Avoid autoplay video and big animations. Aim to stay under roughly 1 MB in total so the page appears instantly on mobile data.
• No unrelated promotion. An error page isn't the place for offers or ads that have nothing to do with what the person wanted, and it needs no noindex tag, since the 404 status already keeps it out of search.

How to create a custom 404 page, step by step

The design is the easy part. What decides whether you pass is the status code, so build the page and the server rule as two separate jobs.

1. Draft the page in your site template. Reuse the header, footer and styles you already have, then add the heading, a short message, a search form and a few links. You can preview your markup in the free HTML editor before it touches the live site.
2. Save it as a file or a template. On a static or hand built site, save it as /404.html in the web root. On a CMS, use the theme's built in 404 page template instead.
3. Point the server at it. Use a local path, never a full external address, so the 404 status survives. The next section has the exact lines for Apache, Nginx and WordPress.
4. Test it. Request a made up URL with curl and open the same address in a browser. You want a 404 in the response and your designed page on screen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page not found</title>
</head>
<body>
  <header><a href="/">Your Site</a></header>
  <main>
    <h1>Page not found</h1>
    <p>We couldn't find that page. It may have moved, or the link may be mistyped.</p>
    <form action="/search" method="get">
      <input type="search" name="q" placeholder="Search the site">
      <button type="submit">Search</button>
    </form>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Latest articles</a></li>
      <li><a href="/contact">Contact us</a></li>
    </ul>
  </main>
</body>
</html>

The title and the H1 both say Page not found, which satisfies the wording half of our check. The form action /search is a placeholder: point it at your real search address, which on WordPress is the site root with a field named s, or the search box will itself lead to a 404. Also remember that if you open 404.html directly in a browser, the server answers 200, because the file exists. Only the server rule makes the same content come back with a 404 status when a missing URL is requested.

Set up a 404 error page on Apache, Nginx and WordPress

Each platform wires the page in differently, but the principle is identical: serve your page from a local path and let the server keep the 404 status. Pick the stack you actually run and ignore the others.

Apache

Add one line to your .htaccess file or your virtual host in Apache HTTP Server. The ErrorDocument directive is described in the Apache ErrorDocument guide, including the difference between a local path and a URL.

ErrorDocument 404 /404.html

The path starts with a slash and has no domain. If you write a full address beginning with http, Apache sends the visitor a redirect instead of serving the file, and the final status is no longer 404. In .htaccess, the server also needs AllowOverride FileInfo enabled, or the directive is ignored.

Nginx

The error_page directive goes inside the server block. Name the error page and mark its location as internal so nobody can request it directly. Reload Nginx afterwards with nginx -s reload.

error_page 404 /404.html;

location = /404.html {
    internal;
}

Do not add =200 after the code, as in error_page 404 =200 /404.html, because that rewrites the response status to 200 and turns your page into a soft 404.

WordPress and site builders

WordPress already does the hard part. When a URL matches nothing, it loads the WordPress 404 template, which is the 404.php file of your active theme, and sends the 404 status itself. Edit the template in a child theme so a theme update doesn't overwrite your work, or, with a block theme, open the 404 template in the site editor. Add a search form, a few links and a Page not found heading. If the check still fails on WordPress, disable any plugin that redirects 404s to the homepage, and confirm your theme has a 404 template, because without a 404.php the theme falls back to index.php.

<?php get_header(); ?>
<main>
  <h1>Page not found</h1>
  <p>We couldn't find that page. Try a search or one of these links.</p>
  <?php get_search_form(); ?>
</main>
<?php get_footer(); ?>

On hosted platforms the platform itself already returns a real 404 for an unknown address, so your job is only to edit the content. In Shopify the not found page is a theme template, which you reach from the theme editor or the theme code. Wix keeps it with its utility pages, Squarespace offers a not-linked 404 page in its page settings, and Webflow has a 404 page among its utility pages. Menu names change between editor versions, so look for those labels rather than a fixed path.

You can't add server rules on these platforms, which is the reason they usually pass. Confirm the status with curl afterwards, because the platform controls the headers. Cloudflare and similar proxies show their own pages for origin failures in the 5xx range, but a normal 404 comes from your origin server or app.

404 error page mistakes: soft 404s and homepage redirects

Most failed reports trace back to a few repeat offenders, and they share one trait: the page looks fine to a human while the server tells a machine something different.

Soft 404: a friendly not found page that answers 200 OK. Visitors are happy, but crawlers see a thin page that should have been a 404, and our check fails it.

The commonest cause is a CMS or a plugin that sends the error content with a 200 header, or an Nginx rule that adds =200. Check the real status with curl, never by eye. Search Console files these URLs under Soft 404 in its Pages report.

Where the catch-all hides depends on the stack. On Apache, look in .htaccess for a RewriteRule that sends every unknown path to the homepage or to index.php. On Nginx, look for try_files $uri /index.html or a return 301 / in the server block. In WordPress, an SEO or redirect plugin may be set to send all 404s to the homepage. Single page apps built with React or Vue are a modern classic: the router draws a not found screen, but the server answers 200 for every route, so the server or framework must be told to return 404 for routes that don't exist.

Homepage redirect: sending every missing URL to the homepage looks tidy but confuses visitors, who wonder why they landed there, and search engines treat it like a soft 404.

Use a 301 Moved Permanently redirect only when a close replacement exists, and read the redirect types explained guide to choose between permanent and temporary ones. Otherwise let the missing URL return a 404 with your helpful page, or a 410 Gone if you removed it on purpose.

• Listing the error page in the sitemap. A sitemap should hold only live, indexable URLs, and the sitemap guide explains how to keep dead addresses out of it.
• Using noindex to cover a 200 status. This hides the page from search but still leaves the status wrong, so fix the status instead.
• Returning 200 for missing assets. A catch-all rewrite to index.php can make missing images and scripts answer 200 with an HTML page, so broken assets stay hidden from you.
• Slow or blocked probes. A firewall that challenges unknown clients, or a template that takes more than 3 seconds to build, can fail the check even when real visitors are fine.

How to test your 404 error page

The fastest check is the command line, which shows the status without any styling in the way.

curl -s -o /dev/null -L -w "%{http_code}\n" https://example.com/this-page-should-not-exist-12345

This prints one number: the final status after redirects, which is what the report judges. You want 404. Test the canonical https address, and don't worry if a 301 for www or a trailing slash comes first. A 301 followed by a 404 is fine, whereas a redirect that ends on a 200 page is the failure, and the cause is the server rule. To read the response headers of every hop, use curl -IL and take the last status line. Note that curl -I sends a HEAD request, which a few apps answer differently from GET, so trust the first command when the two disagree.

After that, open the same address in a private window on your phone and your desktop to see the design, and open the browser developer tools on the Network tab (Chrome DevTools, and other browsers have the same panel) to check the status of each request. Our console errors guide covers 404s hiding on images and scripts.

The Google Search Console Pages report, the successor of the old index coverage report, lists not found URLs and soft 404 URLs once Googlebot has crawled them, which can take days. When your own check looks good, run the SEO Site Checker report again and look for the green Custom 404 Error Page row.