We've all ran into the unhelpful, and sometimes frightening 404 Page not found error messages. With those there's little to do but grumble and hit the back button to continue trying to find what you were looking for.
Thankfully it's very easy to set up a custom error page that not only helps the visitor find their way out of the void and back on track, but that also helps the web design team discover those mistakes and be able to fix them.
Some designers prefer a page that very obviously looks like an error and it can either be funny or simple and to the point. Others go with a similar layout to the rest of the website for a more familiar feel (more like a 'oops, not here, lets try this' than 'OMG, I broke the internet!'). Really it comes down to personal preference, after all, you know your visitors best.
There are some things that will make it much easier on you, your visitor and even bots, so here's a few tips for a better 404 page not found.
How to Make an Error Page Useful to your Visitors
Mistakes happen, links are mis-typed, pages are deleted but this doesn't necessarily mean you have to lose those visitors.
Give Visitors a Place to Go
So your visitor is happily clicking along and then, Boom, Page Not Found... it can feel a bit like running face first into a wall and the first reaction is often to back up and try another direction.
Instead, make it easy on your poor lost visitor by providing somewhere useful or interesting to go, this could be a search box, links to the latest content, your most popular categories or main pages or even a simple link back to the home page.
I also like trying to help them out a bit by offering a suggestion of something that seems like what they may have been after. Google makes this pretty painless with a handy little 404 Widget that adds links to similar pages. It's as simple as a quick copy and paste into your custom 404 file and it can even be prettied up a bit with some css to blend nicely with your design. It's not always perfect, but along with other options it can be a nice added touch.
Remember, the goal is to help them get to the content they wanted in the first place, or something else that may interest them, and not to leave your site in frustration.
Keep it Friendly
The worst 404 I've ever seen was a custom one that stated in big red letters that I'd "made a mistake" and it demanded that I send an email "right away" describing what I'd "done wrong" so that "the webmaster could take corrective action immediately"... Umm, scary! So I hit the back button only to discover they'd disabled it... trapped on a 404 with only an accusation and an email link. That's a surefire way to send a visitor scurrying back to a search engine.
Keep it Simple
Let them know something went wrong by stating it's a 404 (or 410) or that the file can't be found, but there's really no need to list all the possible reasons. Great aunt Mathilda would just be confused by it (and worse, possibly feel like she did something wrong) and the more savvy web surfer already knows that things break, files go missing and people make mistakes, so keep the page as simple as possible and offer easy solutions.
Turning the error page into a sitemap that lists every single page may work well for smaller sites but can be overwhelming on larger ones. People have short attention spans so a simple way back to real content is usually best.
How to Make the Error Pages Useful for the Web Developer
It's nice to be alerted that errors are happening so that they can be corrected. With a custom error page you can get the benefit of seeing beyond your log files by simply add a javascript tracking code to the error page. There are many free trackers around and a simple one added only to the error pages keeps the info clean and easy to read.
Another benefit of this is that it filters out a lot of bot traffic (most bots ignore javascript) so it gives a clearer view of what the actual human visitors are getting without the sometimes overwhelming info from bots poking around.
Make the Error Page Understandable to Bots
Many 404 pages that send a 200 (OK) code, which is often referred to as a soft 404, and will confuse bots since it's telling them nothing is wrong and they can index the page. Make sure that the error page actually sends the correct header response. If the page doesn't exist it should serve up a 404 (Not Found), if it's been removed and is not coming back, a 410 (Gone) response is best.
The easiest way I've found to test is with Live Http Headers extension for Firefox. Please note that if you have images, scripts or external css files on your 404 page, those will show code 200 which is exactly what you want because.. well they do exist ;), so scroll to the top of the output window and read carefully. The page itself should send a 404 or 410.
More Tips for Better Error Pages
Use Absolute Links
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.
Add Noindex Meta Tags
Another thing to do is to add a <meta name="robots" content="noindex, nocache"> or <meta name="robots" content="none"> to the head of the page in case somehow a bot decides to index it. Yes, sometimes bots make mistakes, and if someone finds the actual URL of your error doc and links to them, guess what, it's a real page so that gives a code 200 which makes it indexable. So if you don't want it indexed, save yourself a potential headache and pop one of those meta tags into the head of your 404 document.
"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!)
Be Careful with Redirects
I've seen many websites use the 404 to redirect to the main page, sometimes after a short delay... no warning that the file was missing, no way of letting the visitor choose where to go? Besides the usability loss, do you really want the search engines to get caught in a redirect and see your main page as one big 404? (Note, this is different than a 301 redirect, which is when content is moved to a new permanent location.)