...Processing...
error
big error
11 tips for creating useful 404 error pages - TutnIQ
Table of contents X

11 tips for creating useful 404 error pages

Don't be 404, get your error pages right!

  • This tutorial will show you to make a good impression with your website's 404 error pages.

  • Sending the right message

    In this section we will learn about the different HTTP status codes, and in particular the 404 'not found' status code.

  • When a webserver cannot find the page (or file) a web browser is requesting, the webserver sends back an HTTP status code of 404 to indicate that the page is not found, and may display an error page known as a 404 error page. This is the correct server response to requests for missing pages and is not necessarily a problem, unless it happens frequently.

    There are a number of HTTP status codes. Sending the correct one is important from a usability and search engine optimization (SEO) perspective.

    Common HTTP status codes
    CodeDescription
    200OK. The server successfully returned the page.
    301The requested page has been permanently moved to a new location.
    302The requested page has been temporarily moved to a new location.
    404The requested page does not exist.
    503The server is temporarily unavailable.

    Tips

    1. Make sure that your webserver actually emits a 404 HTTP status code for pages or files not found and not a code 200.

      Sending a 404 status code makes it clear to search engine crawlers that the content could not be found and that the page should not be crawled. If the webserver sends back a 200 HTTP status code, for a non-existent page (known as a 'soft 404') the server is incorrectly indicating to search engines that the page actually does exist. This may potentially delay search engine discovery of legitimate pages and negatively impact search engine rankings.

    2. If a page has been moved, permanently redirect users (and search engines) with a code 302.

    3. Do not use code 404 to indicate that your site is down temporarily for maintenance. Rather use a code 503.

  • Online resources:
  • Customizing your 404 error page

    In this section we will look at the features of a useful 404 error page, and learn how to create 404 pages with common server applications.

  • Default 404 error pages are often sparse with details and not very helpful. Some users may find such pages intimidating and confusing. A good 404 page will engage the user and encourage them to explore your site.

    Tips

    1. Use a customized 404 error page to inform users clearly that the page they are looking for cannot be found.

    2. Use the same look and feel as the rest of your site, but keep it light-weight so that it loads quickly. This is especially important if something has gone horribly wrong and other parts of the site are broken. If possible use a static page.

    3. Help the user find what they are looking for by linking to your most popular pages, navigation pages and your homepage.

    4. Include a link to support (or consider providing contact details).

    5. Include a search box so that users can search for what they are looking for.

    6. Use humor to lighten the mood, and reassure visitors that your site is not broken.

    Examples of 404 error pages

    Some ideas for cool 404 error pages:

  • Setting custom error pages with the Apache web server

    If you use the Apache web server you may be able to change the default error documents by editing the .htaccess file (if AllowOveride is appropriately set) and setting the location of your custom error page.

    Apache 2.4:

    ErrorDocument 404 /path/to/custom/error/page/not_found.html    
    

    The syntax is the same for Apache 2.2:

    ErrorDocument 404 /path/to/custom/error/page/not_found.html
    

    Generating 404 errors with PHP

    It is fairly common for a web server to pass a page request on to a script (for example a PHP script) for further processing and display. In such an instance it is up to the script to emit the appropriate HTTP status code, especially if it is not the default code 200.

    The following code snippet demonstrates one way of generating a 404 HTTP status code with PHP:

  • <?php
        if (!headers_sent())
        {
            $protocol = "HTTP/1.0";
            if ( $_SERVER["SERVER_PROTOCOL"]  == "HTTP/1.1" ){$protocol = "HTTP/1.1";}
            header( "$protocol 404 Not Found", true, 404 );			
        }
        
        //Load the error page here, for example:	
        include ("your_404error_page.html");
        die();
    ?>
  • Creating 404 error pages with popular content management systems

    Many popular content management systems allow you to create customized 404 error pages:

  • Getting technical: Strategies to reduce uncessary 404 errors

    In this section we will consider different ways to reduce unnecessary 404 errors.

  • Tips

    1. Log all site errors, if this is not possible, consider providing a way for users to report a broken link or other site error. Review the error log regularly.

    2. Check your site's crawl stats, logs and analytics:

    • If you have 404's on internal links as a result of typos (example: www.example.com/t-shirt instead of www.example.com/tshirt), fix the links.

    • If you have 404's on incoming links as a result of typos consider capturing this lost traffic by using a permanent redirect (code 301) to automatically send the user to the correct page.

    • If you have 404's on incoming links as a result of changes to your site structure use a permanent redirect (code 301) to automatically send the user to the correct page.

    • If you have many visitors, or links from a valuable source, to a deleted page consider recreating the page.

    • Do not redirect 404's to your homepage, unless you are confident that users were actually intending to visit your homepage (example: you might redirect www.example.com/index.html to www.example.com).

    • Check sitemap and search scripts to make sure that they are not generating incorrect links.

    Useful resources:

    The following links provide further detail on how to deal with 404 error pages from a search engine perspective.

  • Online resources:
ad placeholder

Sharing is caring!

About the author

Course stats

My progress

Find related courses