How To Create a Custom 404 Page

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.

These tips won't work for windows servers, but are perfect for Unix hosts.
Step 1 - 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.
Step 2 - Create the Custom 404 page

Create a file called 404.php (or whatever you wrote in your .htaccess), add whatever you want your visitors to see when they hit a missing page. A sitemap or search is nice, along with letting them know the file they requested is not available.
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.yoursite.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 best way I've found is using the Firefox extension called Live Http Headers. It shows you the entire conversation between your browser and the website. 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 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. Below are a few (hopefully) helpful notes.
"Friendly" Error Messages in Explorer

Internet Explorer 5 and up display "'friendly' error messages" and not the carefully crafted and actually helpful 404's available on many sites. To avoid this simply make sure your 404 files size is over 512 bytes, not including images (the actual pages code itself) and even IE users will have the benefit of your new page. (This is probably the only time I suggest to get files size up. Useful in this case though!)
Absolute URLs

If you use images or any type of external files in your new custom page, use absolute links in your error pages code. (ie. /images/mylogo.png or http://www.example.com/images/mylogo.png). Why? Well your 404 pages is different than other files on your server, if someone lands on http://www.example.com/stuff/morestuff/lostfile.php the error page is actually being served from that folder. If you use relative links your images won't show up since the path would be wrong.
Cover Your Bases

It's a good idea to add to the top of your 404 page just in case a search engine lands on it or gets the header wrong. That in place you should have your bases covered in case of an accident or confused bot.
Things to Avoid

I've seen many people use the 404 to redirect to the main page... no warning that the file was missing, no way of letting the visitor choose where to go. Besides, do you really want the search engines to get caught in a redirect and see you main page as one big 404?

Another thing I've seen a lot is a customized 404 that is well... not so customized. More than once I've seen just the logo and "Not Found", no way of getting to the main page or other areas.