Feature
Post

Category
Publishing

Don’t Lose Your Visitors: Better 404 Pages

Error pages control a lot more of our destiny than you may think. If a visitor has the unfortunate coincidence of reaching an error page on your site, chances of them attempting to access the page again are slim to none, especially if they were referred to the page from a direct link. How can you prevent this? Don’t let your error pages, especially 404, go un-noticed.

404 Error Pages

A lonely 404 leads to a lonely site

Every site is going to face a 404 at some point. No matter how well you manage your links, you can not control how outside sources will link in to your site, and what visitors will attempt to access. Unfortunately, with every time a visitor reaches an error on your site, it makes you look bad, even if the visitor was referred to the page by another person or site who was wrong with their linking.

For example, I manage all the Devlounge links as best as possible, but for the month of February 2007 alone, I had 12,279 hits to just 404 pages! Upon further inspection, many of this bad links came from people trying to go directly to pages on Devlounge, like the prebuilt page, simply by going to www.devlounge.net/prebuilt. Luckily for myself, my 404 page contained links back to the homepage, articles, and interview indexes. And that brings up the whole point of custom 404 pages - keeping your traffic.

Don’t let that traffic escape

If you leave your error pages alone, visitors are going to leave by the flock-full every time they run into the dead end that is an error page. The easiest and simplest way of keeping people from hitting that back button or closing the tab is to put together informative and helpful error pages that lead visitors back into the site, and not away from it.

The route you take to do this depends entirely on how you want to go about your error pages. You may want to take a sarcastic approach to error pages, to give visitors something to laugh at while redirecting them back to your homepage. Or you may want to take a more straightforward approach, like we’ve done, in which case you point out all the most important / significant sections of your site.

Some things to keep in mind when creating error pages:

  • Users don’t give a shit that they’re on an error page, so simply saying “404″ isn’t going to cut it, because at this point they’ve already figured out they’re not on the page they wanted to get to. Lead them back to the site with an automatic redirect after a few sections or a link.
  • Just automatic redirects don’t work either. If you are redirecting all your visitors back to your homepage when they access a missing page, good for you. But if you’re not telling them they reached a 404 or some other kind of error, how are they supposed to know why the page just redirected to your homepage? Many visitors would then just go back and try the page again, so make sure some how or another you give them a heads up that they hit an error!
  • Keep advertisements out! If your error page is not styled to match your site design, than do not include ads. Visitors already annoyed with a missing page, don’t make it seem like you’re trying to capitalize on their misfortunes now.

And some good things to include in error pages that don’t automatically redirect:

  • Archives - If you’re running a blog or any kind of site with a large collection of posts / news, include an archives list for visitors to browse.
  • Search box - If you’re in the same situation as above, include a search so visitors can maybe find the page / post they were looking for to begin with.
  • Site logo - If you are not styling the error pages to match the site design, be sure to include a logo or something so visitors know they are indeed on the right site.
  • Small site description - Let visitors know what’s up. Also helps if search engines grab a wrong url for a few days that may be leading new visitors in for the first time, only to discover that what they were hoping to see isn’t there.

Tying the site and error pages together

When designing error pages, there are really two ways in which you can display them without annoying the visitor. Either (A) incorporate the error pages into the current sites design or (B) use a blank slate (for example, plain white background) with an error message or graphic and required links. Doing something “in between” can just become rather annoying.

Most of us do not need clinics on how to setup custom error pages. It can be done in Cpanel or just by using a few extra lines in the htaccess and creating the pages themselves. There are plenty of tutorials on the subject out there, so I don’t really believe it bears repeating. It’s not that we don’t know how to setup error pages, it’s just that many times the importance of error pages goes un-noticed.

A Quick(er) Error Fix for WP

If your using WP, you can use the Dunstan Error Page plugin to quickly turn your 404 error page into a much more informational and convenient page for visitors when they run into it. The Dunstan Error plugin allows visitors to submit an error report, send feedback, and view the latest 5 posts. This adds news functionality quickly and easily and requires little work to get up and running.

Simple steps for keeping your misplaced visitors

So in the end, it’s up to you whether or not you want to take a few moments to customize your error pages or if you’d rather have host and browser default messages displayed to visitors instead. Believe me when I say this, custom error pages are a lot more beneficial than they may seem, and they can be extremely helpful in keeping visitors on your site.

Now it’s your turn. Have you seen a really informational or fun error page? Leave the link in the comments, and some of them will be attached and featured in this article later in the week.

  1. By Ryan posted on March 4, 2007 at 3:50 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great article, reminded me I need to get on my 404’s. You have some good tips and the devlounge 404 is probably one of the best I have seen, excellent work.

    An example of a fun 404 that comes to mind is ibiblio’s error page (http://www.ibiblio.org/error). tons of fun and interesting ways to say they can’t find your page.

  2. By Aaron Bassett posted on March 4, 2007 at 4:55 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I had a bit of a database failure a while ago and have only recently relaunched my site but I was still getting alot of traffic looking for older posts which had been lost.

    But after a fair bit of tinkering I’ve managed to convert alot of that traffic into actual visitors.

    I’ve used some (most) of the tactics outlined above but I’ve also tried as best as I can to tailor the page to each specific request (it checks the page you were looking for as well as the referring url for any hints as to what you could be interested in)
    eg: http://foobr.co.uk/404/javascript

    It also looks to see if you came from one of the main search engines and checks for any search terms used.

    The perceived relevancy of the links it suggests is shown by how dark the background is behind them.

  3. By Ralph Dagza posted on March 4, 2007 at 5:24 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I add my recent, related post, and archives on my 404

  4. By romeo marquez posted on March 5, 2007 at 11:38 am
    Want an avatar? Get a gravatar! • You can link to this comment

    We did this one about a year ago…

    http://www.gelattina.com/404.asp

  5. By Douglas Karr posted on March 5, 2007 at 1:28 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I wrote about this last December. It’s amazing how many folks don’t utilize their 404 page to drive traffic.

  6. By Peter Bengtsson posted on March 5, 2007 at 7:00 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I developed the Page Not Found pages for http://www.invms.co.uk and what I did was a search for what the user might be after if the URL is spellt slightly wrong. It’s done in Javascript to avoid excessive serverwork when robots hit the site. Consider this page
    http://www.invms.co.uk/Market-View
    It finds that the correct page might be
    http://www.invms.co.uk/Market-Views

  7. By R Mitchell posted on March 6, 2007 at 9:23 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Here is the 404 page I put together for my site a while back.

    http://rustymitchell.com/error/

  8. By Sarah Johnson posted on March 7, 2007 at 6:59 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Really thorough article! Thanks!

    One thing that I do is place adsense and a google search on my 404 page. Then if people are looking for something they can find it.

    http://www.askapache.com/2007/htaccess/apache-status-code-headers-errordocument.html

  9. By Dennis Eusebio posted on March 7, 2007 at 8:05 am
    Want an avatar? Get a gravatar! • You can link to this comment

    We actually just added our a little while back that incorporates a lot of your tips and goes along with the theme of our site. Great Article.

    http://www.weareonlyhuman.com/error

  10. By aj posted on March 7, 2007 at 2:07 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for the comments guys. I’ll give these a look and consider adding them to the end of the article :)

  11. By inspirationbit posted on March 9, 2007 at 9:57 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    If anyone needs to be inspired for some cool 404 error pages, check out my inspirational list :-)
    http://www.inspirationbit.com/inspirational-404-error-pages/

  12. By Bes posted on March 16, 2007 at 6:27 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    You are right about many users not caring if they ran into an error or not. Since it is our sites, many people simply want a solution and a way to find out how they can avoid wasting time in the future.

    Good point also about not monetizing the error pages. The error page should probably be the simplest of all pages compared to other pages on the site. A user is probably already confused because of the error. Why? Because it is our site, and most probably the error could be our fault. So keeping an error page filled with links only confuses people. Telling people simply that something bad happened, why it happened and what to do helps users know that they are in the right hands. It is the same as being their guides; we tell them to come to our world [site], and if they get lost, we guide them.

  13. By Francesco posted on March 23, 2007 at 3:02 am
    Want an avatar? Get a gravatar! • You can link to this comment

    404 is annoying: I do not know why, but about 20 of my visitor go to a wrong page. I made a 404 search page to “solve” this problem http://www.cepolina.com/image.htm

  14. By Lorie Egan posted on March 29, 2007 at 8:58 am
    Want an avatar? Get a gravatar! • You can link to this comment

    terrific advice.. I’m just starting to step out into the freelance world and need to fill my bag’o tricks. I find the more “user friendly” computers and the internet gets, the less people are concerned with the inner workings. Such as, why they’ve hit an error page. This will help diminish the confusion nicely.

  15. TrackbackMy blog » Blog Archive » Writing better 404 pages» Blog Archive » Avoiding the 404 Boobytrap» Blog Archive » Avoiding the 404 Boobytrap

    Your words are your own, so be nice and helpful if you can. If this is the first time you're posting a comment, it might go into moderation. Don't worry, it's not lost, so there's no need to repost it! We accept clean XHTML in comments, but don't overdo it please.