How To Create a Custom 404 Page

"Not Found
The requested URL was not found on this server.
Apache/1.3.31 Server at www.example.com Port 80"

Look familiar? We've all seen that too many times while wandering the Web. And if you're like most people you just hit the back button and try another website. Why not make a custom 404 page that's friendly for your website visitors and gives them a way back to more familiar (or at least not lost) territory.

Note: These tips for Unix hosts, not windows servers.

Step 1 - Create the Custom 404 page

Create a file called 404.php (or whatever you want to call it) with whatever you want your visitors to see when they hit a missing page. A small sitemap and / or search is a nice idea, along with letting them know the file they requested is not available. You might also be interested in checking out some tips for a useful 404 error page.

Step 2 - Create the .htaccess

To begin open up your .htaccess file if you already have one, if not pop open notepad or your favorite text editor (No, a WYSIWYG editor won't work here) and add this line:

ErrorDocument 404 /404.php

You can name your error file whatever you'd like and use whatever extension you are most comfortable with however DO NOT use an absolute (full url including the domain name) here since that makes it turn into a 200 (OK) on most setups.

Step 3 - Upload

Make sure your FTP program is set to upload as ASCII, upload the 404.php, then the .htaccess.

Step 4 - Check it

Make sure your browser cache is clear and type in a file you know doesn't exist on your server.. something like http://www.example.com/oops. You should be seeing your new, fancy, and much more welcoming 404 page.

Step 5 - Double Check it!

This is important, make sure your custom 404 is actually sending a 404 header! The easiest way I've found is using the Firefox extension called Live Http Headers. It shows the entire conversation between your browser and the website's server. Again, type in a file you know doesn't exist on your page, it should say 404 Not Found, not 200 OK. (If you have images on your 404 page, those will show code 200 which is exactly what you want because.. well they are there ;), so scroll to the top of the header testers output and read carefully. The page itself should send a 404.) If it's showing a code 200, remove the .htaccess and try again. The last thing you want is for the search engines to see a 200 response code for a page that doesn't really exist!

Notes About a Custom Error Page

What you have on your error page is personal choice. Some people prefer just a link to the main page, others go for a more friendly approach and let the visitor know that the file isn't there, but give a nicely designed page with links to other areas or even a search to let them find what they wanted. Here's some tips for making a useful 404 error page.