How To: Create a Great 404 Page Not Found Error Page
Ian Lurie Jun 13 2008
I hate seeing these:
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:
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
- Open your favorite HTML or web page editor.
- 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.
- Edit the page so it follows the three principles of a good 404 error page (see below).
- 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?
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.
- Connect to your server via remote desktop connection or whatever remote access software you use.
- Open the Internet Information Services Manager.
- Wipe off your palms. See? This isn’t so scary.
- Expand the ‘Web Sites’ folder.
- 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).
- Click ‘Action’ and then pick ‘Properties’.
- In the window that appears, click the ‘Custom Errors’ tab.
Take a moment and wonder why your head of IT couldn’t find this.
- Scroll down until you find ‘404’ in the ‘http error’ column. Select the one that’s just plain old 404:
- Click ‘Edit’ and then find the 404.html file you created in Step 1.
- Click OK ad nauseum, then click Apply.
- 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.
- Connect to your site via FTP. Do you already have a file named .htaccess? If so, skip to step 3
- Create a new file. Name it .htaccess – use that exact name!
- 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.
- 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.
Bad 404 Page Setups
- 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!
Ian Lurie is CEO and founder of Portent Inc. He's recorded training for Lynda.com, writes regularly for the Portent Blog and has been published on AllThingsD, Forbes.com and TechCrunch. Ian speaks at conferences around the world, including SearchLove, MozCon, SIC and ad:Tech. Follow him on Twitter at portentint. He also just published a book about strategy for services businesses: One Trick Ponies Get Shot, available on Kindle. Read More