Custom Error Pages and Friendly 404’s

by Scott Allen

So everyone hates those ugly white “404 File Not Found” pages when they either type in a non-existent URL, or the page has moved.

It is important to create your own custom error pages for a few reasons.

Number One, and this is a HUGE point…the UGLY ERROR PAGES MAKE PEOPLE GO AWAY! If you want to drive potential readers and customers away in droves, then fine, keep your default ugly white error pages. This one is a freebie in creating customers: Just make your own custom page that has some useful info and links, or a link to your sitemap, or if you’re really progressive, include your sitemap or highlights from your sitemap. Here’s a marketing tip: Every time someone hits a dead-end on your site, you risk losing a potential customer for good.
It is good for your search engine optimization. Search Engines delete pages from their index that disappear from your site, *AND* when Search Engine Spiders hit a default 404, it is like a wall. The spider hits the wall and leaves because it has nowhere to go. By creating a 404 with a link to your sitemap, or including the sitemap in the 404, you give the spider another place to go and it will continue to happily index your site. (You also want to use 301 Redirects in your .htaccess file when a page has been deleted or renamed so that its previous ranking in a search engine can be transferred to another page. Also for people who bookmarked that page.)

To create your own Custom Error Pages, you need to make a brand new text document called .htaccess, and put the following lines in it:

ErrorDocument 400 /400.php
ErrorDocument 401 /401.php
ErrorDocument 403 /403.php
ErrorDocument 404 /404.php
ErrorDocument 500 /500.php

Where “/401.php” is the name of the corresponding file and its location in relation to the root of your domain. Make your 5 basic error pages and upload them and your .htaccess to the root of your domain, and there you go. Note: You may have to create the file as “htaccess.txt” on your computer, then upload it and change the name to “.htaccess”.

It is also important to make sure your new pages serve the appropriate error codes in the headers so that search engines act appropriately when they receive an error. For example, if a page is gone, it is important that the 404 page serves a 404 Not Found code in the header so the search engine doesn’t index the custom 404 page. This can be done in PHP.

For some examples of great 404 pages and some fun 404 history, check out 404 Research Lab.

For More Info:
Wikipedia - Custom Error Pages
JavaScript Kit - How to Create Custom Error Pages
JavaScript Kit - How to Use .htaccess (Tutorial)
Customizing Error Messages on Your Web Site

Here are some samples of Custom 404 Error Pages I’ve designed:
(Click images to enlarge)

You can always add a little creativity or humor as well. The following examples are quick layouts I put together to demonstrate this. Obviously you would need to add some of the functionality of the above examples, but you get the point.