Creating Your Own Custom 404 Error Pages

May 29, 2005

We’ve all seen the dreaded 404 error page as shown below.

IMAGE

Most of us know that if we remove the incorrect path and visit the root of the site, we can still probably find what we’re looking for. But will all of our visitors do this? Probably not. One thing we can do to improve the usability of our site is create a friendly error page.

Most web sites have some search functionality, it’s good usability to provide one. It’s even better usability to provide one on your error page. By default, most error pages are dead ends, but with a few simple changes, you can turn a dead end into another satisfied visitor.

Firstly, we should go over the reasons why your visitors may be greeted with a 404 error page while visiting your site. Here are some of the common reasons:

* The user mistyped the URL
* You change (by moving or renaming) files on your site, someone, most probably a search engine will not know of these changes
* Another site links to your site with an incorrect URL
* Email clients are notorious for wrapping long URL’s and breaking links

Hopefully your vigilant enough to be checking your access and error logs, perhaps your statistics package has an “Errors” section. Nevertheless, I’ll now walk you through how you check your error logs manually. For now, we’ll assume you have a garden variety Linux hosting account with shell access. We’ll also assume you are running Apache as your web server.

STEPS TO CHECK ERROR LOG HERE – coming soon

Apache allows us to change from the default 404 page to specify our own custom page. You do this by adding the
ErrorDocument directive to either your httpd.conf file (Apache’s configuration file) or a .htaccess file. Apache configuration should be done using httpd.conf and .htaccess should only be used if you haven’t got access to httpd.conf. In a typical shared hosting environment, you won’t have access to the httpd.conf file, so I’ll explain how you do this using a .htaccess file.

What are .htaccess files! Taken from the Apache documentation:

.htaccess files (or “distributed configuration files”) provide a way to make configuration changes on a per-directory basis. A file, containing one or more configuration directives, is placed in a particular document directory, and the directives apply to that directory, and all subdirectories thereof.

You can do a lot with .htaccess files and even though custom error pages are the tip of the iceberg, it’s a good place to start. Before you start modifying Apache, you should consult your web host to see if you are allowed to use .htaccess files.

Open your favourite text editor and copy and paste the text below.

ErrorDocument 404 /custom-errors/404.html

By now, you’ve probably guessed you can customise all of Apaches various error pages!

Save your newly created text file as .htaccess. If you’re a Windows user you will probably be greeted with the message “You must type a filename”. Fear not, simply name the file htaccess without the “.” and rename once you’ve uploaded it via FTP to the root of your web server (in the Unix world, files starting with a “.” are hidden files).

You should now be able to enter any incorrect URL at your site and be greeted with your custom error page!