Custom 404 Error Pages

Osamu Morozumi, 12th April 2020
a striking custom 404 error page example

404 errors are an inevitable part of internet life. Anyone who has spent time surfing the web will have come across this error at some point:

404. Not Found. The resource requested could not be found on this server!

The internet

The error is self explanatory: the web page doesn’t exist! 404 errors can be irritating for website users and if not taken control of can negatively effect website traffic and user experience. The remedy for this is to create a custom 404 page.

Why make a custom 404 page?

While good website management practices can go some way to minimizing the occurrence of 404 errors, it is nearly impossible to keep them from happening altogether. If a custom 404 page is not available the hapless user will be redirected to the default 404 error page for their web browser. These are typically featureless and will not have any information or branding specific to your website. Taking control of the 404 redirect can turn a negative user experience around and keep website users on your website. It also helps web crawlers find their way back to your website.

What should a custom 404 page contain?

At a minimum a 404 page should do three things:

  1. Clearly let the user know that they are in the wrong place
  2. A way to get back to the website
  3. A way to contact the website owner or developer

It is a good idea to paraphrase the generic 404 error message to let the visitor know what has happened. You can even use the same wording, the important thing is to give the visitor a clear message.

Include the navigation bar and site map so visitors can easily get back to the main content. This will soften the impact of a 404 redirect. In addition to this it may be a good idea to include links to:

  • Popular articles from the same website
  • Important product pages
  • A search bar

Use the 404 page as a way to redirect users to content you want them to see.

Don’t redirect 404 errors to the homepage

While this remains a common practice it is a bad idea as it confuses users. It is also bad for SEO as Google will register the home page as a soft 404 error.

How to create a custom 404 page

Plugins

If you’re using a pre-made WordPress theme there’s a chance that a custom 404 page already exists. At the very least it will maintain the same style and include the header, footer and search bar. There are plugins available to further customise the 404 page. Most Content Management Systems have a way to customise 404 pages.

Custom code

If you’ve got a hand coded website it’s fairly easy to add a 404 page. Its basically a matter of:

  1. Coding the page and adding it to the public facing directory
  2. Configuring the server to direct 404 errors to that page

Coding the page

Create a file called 404.html in the root directory. The file could also be written in PHP or theoretically any language capable of rendering HTML. Code the page as any other HTML file: with a head, title, meta tags, stylesheets etc. The style can be consistent with the rest of the site or you may prefer to create something unique, although it should still tie in with the overall brand of the website. Most importantly be sure to include the 3 elements outlined above.

Configuring the server to redirect 404 errors

This can be done using the .htaccess file. If your website doesn’t already have one create a file called .htaccess and place it in the root directory. Then paste this code into it and save it:

ErrorDocument 404 /404.html

Once these files are uploaded to the live website you can test the results by trying to access a page which doesn’t exist in the website. For example mydomain.com/nosuchpage should result in a 404 error and the server should redirect you to the custom 404 page.

References