Creating a custom 404 page

When a user is browsing your website, jumping from page to page through your internal links getting the information they need, everything is great. But what happens when a user tries to access a page on your site that doesn't exist? This can happen if they try to access a URL that has a typo in it or a page that no longer exists. It can happen when the user manually enters a bad URL into the browser's address bar or you have supplied a bad link on one of your pages.

Every time you try to access anything on the web an HTTP status code is generated. HTTP status codes exist to convey the status of data on the world wide web. For example, if the data was transmitted successfully or if a page that the user requested was not found. Every communication on the world wide web returns an HTTP status code. When a page is not found the status code 404 is generated.

Check out our HTTP status codes reference page for a full list of HTTP status codes as well as explanations of what each one means.

When a 404 status code is generated the user will see the dreaded 'page not found' message by default. But this is not helpful at all as the user still needs to access the information they were originally looking for. What you can do is create a custom 404 page that will display every time the page the user was looking for is not found. This can be used to help the user get to what they were originally looking for.

Creating the page

The first thing you will need to do is create the custom page that will be displayed every time one of your visitors gets a 404 error.

What will my custom 404 page contain?

Make sure to focus on being helpful to the user. After all, they will have stumbled on the 404 page because they did not get to what they were looking for. It's your job to get them back there. The first thing you might want to do is issue a message like 'We're sorry, but the page you are looking for was not found'. Then you should offer them a way to find the page again. For that, you can do something like display a search box for them to search your site and hopefully find that page.

Your custom 404 page can contain any format or extension (.html, .php, .asp, etc.) you want. Once you have built the custom page, upload it to the web server.

The .htaccess file

Once you have built your custom 404 page, how will you be able to display it for the users who generate a 404 error? You will need to include a command in your .htaccess file to do this. The .htaccess file is a special file on your web server that dictates commands to the web server on how to handle user requests. There are many things you can do with the .htaccess file including setting an index page, setting password protection on a site, modifying dynamic URL's, and of course, creating a custom 404 page.

ErrorDocument 404 /pathTo/404.php

....where /pathTo/ is the path on the server to your custom 404 page and 404.php is the name of your custom 404 page.

Test it out

Enter a URL for your website in your web browser that you know doesn't exist to test out if the custom 404 page displays. If it does, great! You now have a working customized 404 page! If not, please go through the steps in this tutorial again and make sure you followed all of them.

Sitemap on your 404 page

One thing you can do that would be great for usability is to include a sitemap on your custom 404 page. This will definitely increase the chances that whoever gets a 404 error on your website will find what they were looking for. Your visitors will thank you for it!

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information