Static Sites & Deployment

Custom 404 Page

Definition

When a web server cannot find the file behind an address, it answers with HTTP status 404 and some body text. Left alone, that body is whatever the host supplies — often a bare line of type on a white background, with no branding and no way onward. A custom 404 page replaces it with a page of your own: the site header, the navigation, a search box, links to the three pages people usually wanted. On a static host the convention is to put a file named '404.html' at the root of the site, which the host then serves for any path it cannot match. It should still go out with a 404 status rather than a 200, or search engines will treat every wrong address as a real page worth indexing.

Why It Matters

Broken links are normal: a mistyped address, an old link inside a PDF, a page you deleted last year. The 404 page is where all of those people land. A default error page loses most of them within seconds, where a page offering search and a short list of likely destinations keeps a decent share. There is a search side too — a page that returns 200 with the words not found in it is a soft 404, and it invites crawlers to index thousands of phantom addresses. Where a page has moved rather than vanished, a 301 redirect is the right answer and the error page is the wrong one. Watching which paths reach the error page is the cheapest way to find links that need repairing.

How It Works

A request arrives for a path. The host looks for a file at that path, then for an index document inside a directory of that name. If neither exists it looks for the site's error document — '404.html' by convention — and returns its contents under the status line 'HTTP/1.1 404 Not Found'. Because that page can be served from any address at all, every asset it references should use absolute paths beginning with a slash; a relative reference such as 'css/site.css' resolves against the missing directory and quietly fails, leaving an unstyled error page. Crawlers and analytics read the status code rather than the wording, so a correctly served error page is kept out of the index automatically. A single-page application inverts the arrangement, answering unmatched paths with the index document and a 200 so the application can render its own not-found view.

Real-World Example

A consultancy moves its case studies from one path to another and forgets the old addresses printed in a conference handout. Everyone following them hits an error. The team writes a '404.html' saying that page has moved, lists the six case studies underneath, and republishes the folder to 99helpers, so 'brightlane.99helpers.site' now catches those visitors instead of losing them. Their analytics recorded 214 views of that page in the first month, which told them precisely which old paths deserved a proper redirect.

Common Mistakes

  • Serving the error page with a 200 status — crawlers index every mistyped address as a genuine page and the site fills with duplicate thin content
  • Referencing styles and images with relative paths — the page works when tested at the root but arrives unstyled from any deeper address
  • Using the error page to catch addresses that simply moved — a permanent redirect preserves the link value and saves the visitor a click

Related Terms

Put a file online in seconds

Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.

Host a file free →