Home > Development Best Practices, Front End Development, How to > How To Create a Useful 404 Page

How To Create a Useful 404 Page

June 28th, 2009


404 pages are going to happen whether you like it or not. This article will show how to create a 404 page that is useful for users.

Why Customize your 404 Page?

All browsers give some sort of page letting you know that the page wasn’t found. Why would you create your own of the browser handles this for you? Simply because browser error pages aren’t user friendly and are often confusing for non-computer savvy users. Ideally you would want to create a page that is helpful to the user. Some how they navigated to a page that doesn’t exist, so help them get back on track.

page cannot be found

What You Should Have on Your 404 Page

The name of the game is to make users less frustrated. They’re lost and they need some help. First thing you should offer them is a link to your sitemap and your homepage. These will offer a quick way to get back in the game. Alternatively you can put a search bar in your 404 page. This gives a familiar way for your users to find what they are looking for. There are mixed feelings about putting a contact form on your 404 page. The idea is that users can tell you that your page is missing. Ideally though, you should be actively checking that you aren’t missing any pages. Google webmaster tools can help you with this. Here is an example of a 404 page. Granted there are much better 404 pages out there, this is just a sample of the basic tools that you should have.

Create Your 404 Page

You’ll need to create a HTML page. Try to keep it very simple for the user. They’re lost so you have to create a clear path for them to follow. You’ll find a lot of humourous 404 pages to help keep the users entertained. Although this is nice, make sure you have a way for users to get back to your site. Also remember to keep your page above 512 bytes. Earlier IE browsers don’t handle small 404 pages well. Throw in an image and it should solve this problem.

Also, it is probably a good idea to put a robots meta tag telling search engines not to crawl your 404 page.

Example:

1
<meta name="robots" CONTENT="noindex, nofollow">

Put the 404 Page on Your Site

After you have your HTML page created, dump it onto your server and take note of where it is. You’ll have to reference it later when setting up the server.

Setting Up the Server for Your 404 page

A lot of web hosts and CMSs allow you to setup your custom 404 page right from within the control panel. This should be the first thing you check as it gives you a nice interface to work with. The alternative isn’t complicated, but why trouble yourself if you don’t have to.

You’ll need to know what kind of server you are on if you don’t plan on using the control panel. If you are on an Apache server you can create a file by the name of .htaccess .

Within this file you just have to put the line:

1
ErrorDocument 404 /404.html

Replace 404.html with the path to your 404 page. This will tell the server where to look if it encounters the error 404 (page not found).

If you have an iis server (windows) than it’s a little more complicated. You’ll have to open your internet service manager, select the properties of your web server, then head to the custom errors tab. You’ll find all of the error codes there, just select 404 and replace the page with the one that you created. For a more in depth look at this you can visit this tutorial on how to create a custom 404 page in iis.

404 iis panel

That’s it you should have your 404 page up and running. Type in a bogus address to your domain to test it out. eg. http://www.devirutoso.com/fake-address

Related Links

Creating a Custom 404 Error Page
How to Create a Custom 404 Error Page in Microsoft IIS
Creating User Friendly 404 Pages




Top