How To: Create a Great 404 Page Not Found Error Page

Ian Lurie Jun 13 2008

I hate seeing these:
bad_404.gif
It’s a waste. You put all that work into creating a great site. Someone makes a mistake like mis-typing a page name, or they click a bad link on someone else’s site, and you drive them away with the internet equivalent of a wagging finger.

By the way, this is a competitor’s site: A marketing agency that claims to offer internet marketing. Why am I not a multi-millionaire?

You can have a much friendlier ‘page not found’ page – also known as a 404 error page:

cm_404.png
It’s easy: If you can create a plain, static HTML web page, you can create a 404 error page. You may have to get your web host to do a little setup work, but that’s it.
I’m going to walk you through it.

Step 1: Create Your Page

  1. Open your favorite HTML or web page editor.
  2. Get HTML code for your site. This is easy. Open your site in a web browser and go to a simple page (I usually use ‘about us’ or something similar). Click ‘view’ and then ‘source’. Cut-and-paste that code into your editor. Voila – you have your page layout.
  3. Edit the page so it follows the three principles of a good 404 error page (see below).
  4. Save the page as something obvious, like 404.html.

Any 404 page should have 3 basic elements:

  • A clear statement that the visitor is in the wrong place;
  • Advice to help them get back on track;
  • An option for getting in touch with the website owner.

You’re done with step one. Pat yourself on the back. You’ve just done something that most of the web development world apparently doesn’t understand.

Step 2: Put the Page On Your Website

Connect to your website using whatever tool you normally do. It might be an FTP client, or the ‘file manager’ that’s built into your web hosting control panel.

Upload 404.html to the server.

Navigate to http://www.yoursite.com/404.html to make sure the page looks OK.

On to step 3…

Step 3: Setting Up Your Server To Point At Your 404 Page

This is where most folks turn pale and start to sweat. Chances are some developer or grumpy web hosting company support person has told you this part’s really, really, really difficult. I mean, they don’t know how to do it, so it must be difficult, right?

Wrong.

I’m going to show you how it’s done on Microsoft’s Internet Information Server (in about 10 steps, but they’re just point-and-click) and on Apache (in 3 steps, but you have to know how to type).

Setting Up On Internet Information Server (IIS)

If you don’t use a dedicated server, you hopefully can’t do this procedure on your own. Contact your web host. If they say you can’t set this up on Microsoft’s Internet Information Server, reach through the phone, slap them hard, and then e-mail them this page.

  1. Connect to your server via remote desktop connection or whatever remote access software you use.
  2. Open the Internet Information Services Manager.

    IIS_1.png

  3. Wipe off your palms. See? This isn’t so scary.
  4. Expand the ‘Web Sites’ folder.
    IIS_2.png
  5. Find and select your web site in the right-hand window (and no, IIS won’t be all blurry – I’m just not showing every web site we host on this server to the entire web-browsing world).
    IIS_3.png
  6. Click ‘Action’ and then pick ‘Properties’.
    IIS_4.png
  7. In the window that appears, click the ‘Custom Errors’ tab.
    IIS_5.png
    Take a moment and wonder why your head of IT couldn’t find this.
  8. Scroll down until you find ‘404’ in the ‘http error’ column. Select the one that’s just plain old 404:IIS_6.png
  9. Click ‘Edit’ and then find the 404.html file you created in Step 1.IIS_7.png
  10. Click OK ad nauseum, then click Apply.
  11. Close IIS Manager and log off of your server.

Test it out by going to http://www.yoursite.com/asdf.

Congratulations! You are the proud owner of a user-friendly 404 page.

Setting Up On Apache

This procedure can depend a little on exactly how your server is configured, but typically you’ll want to edit a file called .htaccess. Check with your web hosting provider. If they use Apache they almost certainly have a help document explaining this. If they don’t, contact me and I’ll connect you with a real hosting provider.

  1. Connect to your site via FTP. Do you already have a file named .htaccess? If so, skip to step 3
  2. Create a new file. Name it .htaccess – use that exact name!
  3. Add the following line of text to the file:

    ErrorDocument 404 /404.html

    This assumes you named your error page 404.html, and that the error page is in the root folder of your web site.

  4. Save the file and upload it to your web site, if you have’t already.

Test it out by going to http://www.yoursite.com/asdf.
Done!

Bad 404 Page Setups

Never:

  • Redirect 404 errors to your home page. That’s confusing to your visitors. They clicked a link thinking they’d get to one page and you sent them to another with no explanation.
  • Redirect 404 errors to another web site. Augh! Why do people even think that’s OK?!
  • Send 404 errors to a Flash page. Just don’t.
  • Send 404 errors to a page with a registration form that has 25 fields. I’m not making this up…

It Just Isn’t That Hard

Creating a great custom 404 error page is easy.

Having a great custom 404 error page means keeping more visitors on your site, and selling more stuff, getting more leads, etc..

Not having one will just cost you money.

So go do it already!

tags : conversation marketingDevelopmentSEO

13 Comments

  1. I would recommend that all 404 pages have these things.
    * A search form so that the user can search your site for what they were looking for.
    * A contact form so that they can ask for help if the error persists.
    * A little self-deprecating humor regarding the error. I’ve seen some really funny ones in the past from companies that you wouldn’t think have a sense of humor.

  2. @Chris, great tips! And Ian, super great post!
    Thank you!
    Maria Reyes-McDavis

  3. I completely agree – when I worked at Amazon, I remember users loved the little doggie that appeared on 404 pages. I also agree with Chris re: self-deprecating humor – it makes your company more memorable.

  4. great post.. and yes.. after having done over 500 websites.. it’s still not used… it should be the first thing after site redesign is completed.
    like as part of posting the new site.

  5. Ian

    Ian

    @paisley yeah, wouldn’t you think?

  6. Dave

    Dave

    Is there any way to access the invalid address and use it in the 404 error handling?
    Specifically, I want to take a page reference that does not exist (like http://www.mysite.com/XYZ) and redirect it as a tracking code to a pge that does exist (like http://www.mysite.com?source=XYZ).
    Does anyone know if that is possible?

  7. Steve

    Steve

    dave – yea you have to do that with mod_rewrite – which can get complicated but do some research on google about it. There is also a new service from google webmaster – 404’s that generates links on your 404 pages for related urls in your domain users may have wanted to go to. You can use http://www.httpviewer.net/ to check to make sure your http status codes are setup right for 404 pages too

  8. Great tips guys, I was wondering for a while on how to redirect error pages to 404 pages. Any ideas on how to implement on Joomla!

  9. Great post is right – Thank you very much! I agree it should be contained within many sites. As I am re-designing a site now I was thinking a humorous and customized 404 page would be a great idea. Not only does this site show me how to do that but it gave me even more! I love the other ideas people had to add to a 404 page – like a search feature and form!! What a great idea and so simple. Thanks much again and good luck with your futures and web designs :-)

  10. Keysle

    Keysle

    I’m using 1and1 as my domain keeper and host.
    my .htaccess file reads:
    ErrorDocument 404 /404.php

    and that is it (am I missing something?)
    the 404.php file exist. and they are both on the server, but I still received the same default error.

    This is supposed to be a broken… and yes it’s long.

    http://super-private-server-thats-so-high-end-you-dont-even-know-how.k8r.us/like-its-way-beyond-anything-youd-ever-think-of-like-in-forever-dont-even-mess-with-this-divine-knowledge/pasgggg

    SEOT: mBcWbn6FEsRp3EnIXe3G

    • Ian Lurie

      admin

      Hi Keysle,

      You probably have to set up the page in your .htaccess file.

  11. Pete

    Pete

    Using your advice, I built a notfound.html file about a year ago.
    I update it whenever I see a bad link that I can’t get the referer to fix, by listing the correct link on the page.
    But I can’t find a way to track the activity that it sees and whether or not my approach is effective.. I’d like to know how often a request actually gets there and where it goes from there. like GA Navigation stuff like Landing page and Next pages.
    notfound.html doesn’t show up anywhere on GA or in Cpanel that I can find.

    Any ideas?

  12. Rohit

    Rohit

    Working, thanks a lot. Took only 1 minute to design the 404 page and another half minute for uploading it.
    Cheers..

Comments are closed.