coding-404-page

Tips for creating a good custom 404 error page

by

It is common that users arrive on a page not found on your site. Rather than showing them the default 404 page, you should create a custom 404 page. Here’s how to do it with lots of tricks!

What is a 404 error? Why customize it?

Just a reminder: if a surfer or a robot (Googlebot and others) tries to access a page on your site that doesn’t exist, your server must return the HTTP 404 code. If it returns something else, it is badly configured…

In this case, depending on what you have planned on your site or your CMS, the page that will be displayed will be more or less understandable and pleasant for the user.

Even if the user is likely to be disappointed when he or she comes across a page that cannot be found, it is better to do everything possible to “make up for it” by reassuring the user that he or she will still be on your site.

That’s why you should have a personalized 404 error page! It’s very easy to do, especially if you follow this tutorial.

How to customize the 404 error page

If you don’t expect anything, in case of an error, the page that will be displayed will be the default error page of your server (Apache or others) or maybe a page expected by the browser (Chrome, Firefox, Safari, Internet Explorer, Edge, Opera, etc.).

Apache’s default 404 error page will display something like this, with the title “404 Not Found” :

Not Found

The requested URL /test-erreur-xyz was not found on this server.

You have to admit, it’s not very welcoming!

On Apache, just add a line in your .htaccess file located at the root of your site. Download this file locally to your computer via FTP, edit it and add the ErrorDocument directive (for example at the end of the file). Then upload it.

The syntax of the ErrorDocument directive is as follows:

ErrorDocument <code HTTP> <action>

<code HTTP> is the error code to be customized within 400 or 500.

and <action> can be :

  • either a local redirection URL (if the action starts with a “/”), which I strongly recommend you do
  • or an external redirection URL (if action is a valid URL), which I do not advise you to do.
  • a text to display (if the action does not meet either of the two previous conditions). Enclose the text in quotation marks (” ) if it contains more than one word.

In concrete terms, you must indicate in the URI of a specially created HTML page. It can be in PHP, HTML or whatever you want.

Concretely, here is a valid example:

ErrorDocument 404 /404-page.php

Tip #1: the URI of your custom page must start with / and not with http or https, otherwise your server will return a 302 code (temporary redirection) instead of the error code (404 for example). In other words, you should not use this kind of line :

ErrorDocument 404 http://www.example.com/404-page.php

Tip #2: the custom page should be based on the design of your site, with the same page template as the other pages of your site (menu, sidebar, footer). In this way, Internet users will understand that they are still comfortable on your site and will be reassured. I’m not the only one to recommend it, Google’s official help to create “useful” 404 error pages says this :

Make sure your 404 error page keeps the same graphical appearance (including navigation) as the rest of your site.

Tip #3: The custom page should remain light, without including elements that are heavy to load or long to execute. Otherwise, if you have too many 404 errors, your server will saturate…

Tip #4: In addition to reassuring the user, give them the means to find what they were looking for. I suggest you post directly in the middle of the page:

your internal search engine
a link to your contact form (inviting the user to explain the problem he encountered)
possibly some links to the main pages

Tip #5: Check that your 404 page does not generate 404 errors! For example, if your template uses relative paths in reference to your image, CSS, Javascript or other files, then it may happen that these paths no longer point where they should when the 404 page is called.

Tip #6: If you have multiple subdomains, set up a custom page for each subdomain.

Tip #7: Find out how to properly configure your audience measurement tool to record as much information about 404 (or 500, etc.) errors as possible. For example, you can create alerts to be warned if the number of errors exceeds a certain threshold or increases too much. To go further, set a target (even if you want to have as few 404 errors as possible) because you can then study the path that led the user to the error (if it is an internal link). Read for example this article on the official Google Analytics blog.

Tip #8: Customize the 404 error but also the others! That way, the message can be more precise, which will be appreciated by the user. Here is a reminder of the most common errors (check W3C list) :

  • 400 : syntax error in the page address
  • 403 : the server denies access to the page (usually because password authentication has failed)
  • 404: the requested page does not exist (implied it was not expected to be requested)
  • 410 : the page does not exist anymore (implied it’s wanted and it won’t come back)
  • 500: internal server error
  • 503 : service not available (the whole server is “crashed” !)

For example, to configure a custom 404 error page and also a custom 410 error page, create the pages 404-page.php and 410-page.php and put these lines in your .htaccess file:

ErrorDocument 404 /404-page.php
ErrorDocument 410 /410-page.php

Customization of errors with CMS

Customizing error pages with WordPress

If you use WordPress, it’s really very simple! You can use a dedicated plugin (e.g. 404page), but it’s better not to overload the list and use what is provided. Indeed, it is likely that your theme contains a 404.php file. To verify this, once in the WordPress back office, click on “Appearance > Editor” then on “404.php” to edit it online.

Then simply edit the title (H1 tag a priori) and the text below, and save your changes. That’s all you have to do!

If your 404.php page does not display an internal search form, add this in the main content area of your 404.php page:

<?php get_search_form(); ?>

You can also create a 410.php page to handle 410 errors, and so on for other error codes.
Customizing error pages with Joomla

To create a custom 404 error page for your Joomla site, follow these steps (source) :

  • Create a ‘404-page’ article
    Create an article with the alias for example “page 404” in order to use it as page 404. Add a text like for example Sorry, we didn’t find the requested page… As a precaution, forbid indexing by choosing the value “no index, no follow” for the “robots” field.
  • Add it to your hidden menu
    Create a menu item related to your new item 404 (as a precaution, also put a noindex there).
  • Copy the error.php file in the directory of your template
    In your Joomla installation, you should have an error.php file located in your templates directory. If not, copy the error.php file located in templates/system in your templates directory. For example, if my template is named ‘Cleancloud’ I will copy the file error.php in the templates/cleancloud directory.
  • Modify the error.php file to redirect 404 errors to your 404 article.
    Check that the error.php file contains this line at the very beginning:
<?php defined('_JEXEC') or die;

than add :

if (($this->error->getCode()) == '404') {
  header("HTTP/1.0 404 Not Found");
  echo file_get_contents(JURI::root().'404-page');
  exit;
}

Place the ‘404-page’ information by the alias you chose for the menu item you created.

Examples of custom error pages

If you’re looking for inspiration, look at fun sites like our blog that reference the best ideas for custom 404 pages.

You can even use your custom error page in your communication strategy! Or why not recruit (to look for good geeks or web developers)!

404 errors and SEO

404s error are a trouble for your SEO - Solve them as soon as posssible
404s error are a trouble for your SEO – Solve them as soon as posssible

By the way, what is the impact of 404 errors on natural referencing? It all depends on the cause of the 404 error:

  • if you make internally broken links (to erroneous URLs), it’s not good!
  • if the error does not come from you but from an erroneous link from another site, it is not penalizing

However, I would like to clarify things a little and encourage you to click on the links to learn more:

  • you should check that internally, no link points to a page in error (404 but also 403, 410, 500, etc.). Use my RM Tech tool for that! Same for the URLs indicated in :
    • your canonical URL tags
    • your alternative URL tags for languages and countries (hreflang)
    • your alternative URL tags for the mobile version, if you have not chosen the responsive web design technique
    • your next/prev URL tags for pagination
    • your image tags
    • etc
  • regularly consult the report on search errors in Search Console it’s not quite a 404,
  • but almost: watch out for soft404 errors!
  • you should regularly check that you don’t have (good) backlinks pointing to pages with

source : one of the best french SEO, Olivier Duffez on webrankinfo.com