6 Steps to a Better 404 Page

We’ve all expe­ri­enced it. We’re read­ing a Web page only to come across a link which seems inter­est­ing enough to fol­low. So we do, and it happens:

404 Page Not Found

The URL you requested was not found.

Apache 2 Web server blah blah blah

Not a very help­ful error page, is it? What does “404” even mean to the aver­age Web surfer? Sadly, the Web is lit­tered with 404 error pages sim­i­lar to what is quoted above. And what’s wrong with such error pages?

The Problem

• They aren’t very friendly. Your vis­i­tors are human beings — talk to them like it. Treat them as your guests; they’ll be more likely to for­give the error and con­tinue to browse your site!

• They con­tain super­flu­ous infor­ma­tion. Seriously, why would Joe the Visitor care what server your site is hosted on unless he is a mali­cious user look­ing to exploit it? Why would Jane the Visitor care about “404” or other tech­no­jar­gon? I don’t even care about that sort of infor­ma­tion, and I’m just geeky enough to know what it means!

• They con­tain miss­ing infor­ma­tion. This may be a novel con­cept, but rather than sim­ply stat­ing that an error occurs, why not go out of your way to help your user get to some­thing they’d enjoy view­ing? No, I don’t mean auto­mat­i­cally redi­rect­ing them to your cur­rent YouTube favorite. What I do mean is shar­ing with your users any of a num­ber of pos­si­bly help­ful items: a list of your pop­u­lar con­tent, a list of pop­u­lar top­ics to browse, a freakin’ search box, or even a list of sug­gested con­tent based off of the errant address which caused the 404.

The Solution

Your con­tent not found page doesn’t have to be that way, though. It can be bet­ter — lots bet­ter! The fol­low­ing six steps are “best prac­tices” in my opin­ion. I am using them here to cre­ate an error page which Chris Pearson says is “WIN for most help­ful 404″ (Twitter).

Your mileage may, of course, vary, and I encour­age you to tai­lor each step to the theme of your blog (i.e., if you have a funny blog, make your error page funny!).

1. Explanation: Explain to your users what has hap­pened, why they are view­ing an error page. Reassure your users that it is not their fault, and invite them to make use of the help­ful resources you’re pro­vid­ing on the error page to get back on track. The faster they move from your error page to some­thing more inter­est­ing, the less time the error page will have to affect the men­tal­ity of your vis­i­tor. “Oh yeah, I remem­ber that site… 404s-​​ville.”

2. Search: Always, always, always pro­vide search func­tion­al­ity on your con­tent not found errors. Let me repeat: Always pro­vide search func­tion­al­ity on your con­tent not found errors. You may have removed the arti­cle on “foo” that you users browsed to, but if they are able to search for “foo” on the error page, they may find a num­ber of other help­ful arti­cles you’ve writ­ten on the sub­ject. (This ties in to the thought that rep­e­ti­tion is the best teacher and any­thing impor­tant on your blog prob­a­bly bears blog­ging more than once.) It doesn’t mat­ter if you already have a search bar in your side­bar; put one right in front of your user’s nose in the con­tent of the error page itself. Don’t risk “side­bar blind­ness” ren­der­ing your error page less than useful.

3. Popular con­tent: Whether you’re track­ing it or not, your blog has entries which is more pop­u­lar than oth­ers. There is a rea­son for this: It it’s pop­u­lar, your users like it! It only makes sense, then, that if your users get off the beaten path on your web­site, you would show them a list of pop­u­lar con­tent. If oth­ers have enjoyed it, why not them, right?

   In order to track pop­u­lar con­tent here, I make use of the Popularity Contest plu­gin for WordPress (Installing Popularity Contest on WordPress 2.5+). It allows me to use this block of code on my con­tent not found page to out­put the crème de la crème of Kingdom Geek:

   <h3>Popular content:</h3>
   <ul>
   <?php akpc_most_popular(); ?>
   </ul>

   Whatever method you use to list pop­u­lar posts (by vis­its, by com­ments, or by both via Popularity Contest), I highly rec­om­mend that you at least do some­thing. Your users will appre­ci­ate it.

4. Popular top­ics: There’s a chance that none of your most pop­u­lar posts will tickle your users’ fancy, and that’s per­fectly fine. Thankfully, for the past sev­eral ver­sions, WordPress has allowed us to tag our con­tent. You do tag, don’t you? Tagging our posts allows us to cre­ate a top­i­cal index of our con­tent which can be far more use­ful than the basic cat­e­gor­i­cal index. It also allows us to out­put a list­ing — in famous “tag cloud” form — of our most writ­ten about top­ics. The arti­cle on “foo” that your user was look­ing for may be miss­ing, but they may find just what they need in your arti­cles about “fubar.” Using this bit of code, you can add pop­u­lar top­ics to your error page:

   <h3>Popular topics:</h3>
   <p><?php wp_tag_cloud(); ?></p>

   You can fur­ther cus­tomize your tag cloud using the attrib­utes listed in the WordPress codex!<?p>

5. Google 404 wid­get: It’s hard to deny how use­ful Google’s wiz­ardy is. From rev­o­lu­tion­iz­ing search to unleash­ing a legion of use­ful prod­ucts such as Gmail, Reader, or Maps, Google is the one per­son in your life who you can exploit with­out fear of face-​​slaps!

   Recently, Google unveiled a new tool for web­mas­ters to help increase Big G’s expo­sure web­mas­ters make their sites more use­ful: the Enhance 404 wid­get.

   Basically, this new tool allows web­mas­ters who have added their site to Google’s Webmaster Tools pro­gram — suave web­mas­ters like you & I — to add a snip­pet of JavaScript to our con­tent not found pages which allows Google to offer up some poten­tially use­ful tools. The tools which are out­put depends upon how much Google knows about your site, but the include things such as a Google search box, “clos­est match” sug­ges­tions, and a link to your site’s sitemap, if you have one.

   That’s pretty use­ful, in my opin­ion, and it’s very easy to add. Google gives you a piece of code to add to your error page, you add the code, and it just works! Mine looks like this:

   <script type="text/javascript">
   <!--//--><![CDATA[//><!--
   	var GOOG_FIXURL_LANG = 'en';
   	var GOOG_FIXURL_SITE = 'http://rickbeckman.com/';
   //--><!]]>
   </script>
   <script type="text/javascript" src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>

   The fancy JavaScript escap­ing is a method I learned from Jeff at Perishable Press.

   You may also notice that I omit­ted Google’s styling infor­ma­tion. I moved it to my stylesheet and cus­tomized it to look nice within my style:

   #goog-wm h3 b { font-weight: normal; }
   #goog-wm-qt { width: 68%; margin-right: 0.462em; }
   #goog-wm-sb { color: #111; cursor: pointer; font-weight: bold; background: url('../images/submit-bg.gif'); border-color: #ccc #999 #999 #ccc !important; border: double 3px; font-size: 1.2em; padding:0.278em 0.222em; font-family: "Gill Sans MT", "Gill Sans", Calibri, "Trebuchet MS", sans-serif; }
   	#goog-wm-sb:hover { color: #1e39cc; }

6. Notification: I men­tioned ear­lier that the blame for a con­tent not found error should not be placed on the user. A corol­lary to that would be know­ing that the onus to fix the prob­lem is upon you. As a web­mas­ter, you should be will­ing to track down the rea­son con­tent not found errors are hap­pen­ing, rec­ti­fy­ing the problem(s) as soon as possible.

   If the prob­lem is that the user has fol­lowed a bad link, then you’re going to want to get that link fixed. To facil­i­tate this, I rec­om­mend adding a tiny bit of PHP code to auto­mat­i­cally notify the admin e-​​mail address of your blog of the con­tent not found error. This noti­fi­ca­tion is com­pletely anony­mous for your users; only the bro­ken address and the refer­ral address (if there is one) are listed in the email.

   I also have the code set to ignore blog admin­is­tra­tors so that you can test your error page with­out get­ting inun­dated with “Get this fixed!” e-​​mail messages.

   Here is the block of code to han­dle the notification:

   if (!current_user_can('level_10')) {
   	$referral		= $_SERVER['HTTP_REFERER'];
   	$not_found		= $_SERVER['SCRIPT_URI'];
   	$to				= get_option('admin_email');
   	$subject		= 'Content Not Found @ ' . get_option('blogname');
   	$content		= '';
   	if ($_SERVER['HTTP_REFERER'])
   		$content	= "Came from: $referral\n";
   	$content		.= "Landed on: $not_found\n\nGet this fixed!";
   	$headers		= 'From: ' . get_option('admin_email');
   
   	mail($to, $subject, $content, $headers);
   }

That’s a lot to take in, I know, but I encour­age you to apply as much of this as pos­si­ble to your error page, doing your part to make even the dark, erro­neous under­side of the Web that much more use­ful. If your users see that you took time to even make your error page use­ful, it will def­i­nitely set you apart from most other sites out there.

All Together Now

It may help to see the above used within the con­text of an actual error page, so I’m going to share the code I use to gen­er­ate the con­tent not found page in use here, video and all:

For the Thesis Theme

If you use the amaz­ing Thesis theme, you’ll want to add the fol­low­ing block of code to your custom/custom_functions.php file. Don’t for­get to cus­tomize it to fit your own site!

/**
*
*	404 Customizations
*
*/

function custom_404_title() {
	echo 'Content Not Found';
}
remove_action('thesis_hook_404_title', 'thesis_404_title');
add_action('thesis_hook_404_title', 'custom_404_title');

function custom_404_content() {
	if (!current_user_can('level_10')) {
		$referral		= $_SERVER['HTTP_REFERER'];
		$not_found		= $_SERVER['SCRIPT_URI'];
		$to				= get_option('admin_email');
		$subject		= 'Content Not Found @ ' . get_option('blogname');
		$content		= '';
		if ($_SERVER['HTTP_REFERER'])
			$content	= "Came from: $referral\n";
		$content		.= "Landed on: $not_found\n\nGet this fixed!";
		$headers		= 'From: ' . get_option('admin_email');

		mail($to, $subject, $content, $headers);
	} ?>
<p><span class="drop_cap">U</span>nfortunately, the content you are looking for could not be found. There are a variety of reasons why this could have occurred, but what is important is getting you back on track and hopefully to content that you will find to be useful.</p>
<div class="video">
	<object width="425" height="349">
		<param name="movie" value="http://www.youtube.com/v/yGZdqLgKrLE&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"></param>
		<param name="allowFullScreen" value="true"></param>
		<param name="allowscriptaccess" value="always"></param>
		<embed src="http://www.youtube.com/v/yGZdqLgKrLE&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="349"></embed>
	</object>
</div>
<p>In order to help you find what you need, you might consider using the search bar or browsing my categories in the sidebar. If you'd prefer to browse popular content or topics, they are listed below.</p>
<h3>Popular content:</h3>
<ul>
<?php akpc_most_popular(); ?>
</ul>
<h3>Popular topics:</h3>
<p><?php wp_tag_cloud(); ?></p>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
	var GOOG_FIXURL_LANG = 'en';
	var GOOG_FIXURL_SITE = 'http://rickbeckman.com/';
//--><!]]>
</script>
<script type="text/javascript" src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
<p>I hope you find what you are looking for!</p>
<p><?php if ($_SERVER['HTTP_REFERER']) { ?>I was automatically notified of the address of this page as well as the referrer address which contained the errant link, if there was one, so that I can see about fixing broken links. However, y<?php } else echo 'Y'; ?>ou are more than welcome to e-mail me regarding this error; I would love to hear from you, especially if you still need help finding something! My e-mail address is <a href="http://mailhide.recaptcha.net/d?k=01b-IllrVLyH5ns4ZAetQxxw==&amp;c=8-jNc3fhiknDjwtt2Xmz3g8AQdbKMET295VYd1WAoa0=" onclick="window.open('http://mailhide.recaptcha.net/d?k=01b-IllrVLyH5ns4ZAetQxxw==&amp;c=8-jNc3fhiknDjwtt2Xmz3g8AQdbKMET295VYd1WAoa0=', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" title="Reveal this e-mail address">rick...</a>@gmail.com.</p>
<?php }
remove_action('thesis_hook_404_content', 'thesis_404_content');
add_action('thesis_hook_404_content', 'custom_404_content');

For Most Other WordPress Themes

Your theme should pro­vide you with a 404.php file with which you can cre­ate your error page. If it does, open it and add the fol­low­ing block of code in the “con­tent” sec­tion of the page; if you need help deter­min­ing where that is, it may help get­ting in touch with the theme author or, if that isn’t prac­ti­cal, get in touch with me and I’ll see what I can do for you.

<?php	if (!current_user_can('level_10')) {
		$referral		= $_SERVER['HTTP_REFERER'];
		$not_found		= $_SERVER['SCRIPT_URI'];
		$to				= get_option('admin_email');
		$subject		= 'Content Not Found @ ' . get_option('blogname');
		$content		= '';
		if ($_SERVER['HTTP_REFERER'])
			$content	= "Came from: $referral\n";
		$content		.= "Landed on: $not_found\n\nGet this fixed!";
		$headers		= 'From: ' . get_option('admin_email');

		mail($to, $subject, $content, $headers);
	} ?>
<p><span class="drop_cap">U</span>nfortunately, the content you are looking for could not be found. There are a variety of reasons why this could have occurred, but what is important is getting you back on track and hopefully to content that you will find to be useful.</p>
<div class="video">
	<object width="425" height="349">
		<param name="movie" value="http://www.youtube.com/v/yGZdqLgKrLE&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"></param>
		<param name="allowFullScreen" value="true"></param>
		<param name="allowscriptaccess" value="always"></param>
		<embed src="http://www.youtube.com/v/yGZdqLgKrLE&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="349"></embed>
	</object>
</div>
<p>In order to help you find what you need, you might consider using the search bar or browsing my categories in the sidebar. If you'd prefer to browse popular content or topics, they are listed below.</p>
<h3>Popular content:</h3>
<ul>
<?php akpc_most_popular(); ?>
</ul>
<h3>Popular topics:</h3>
<p><?php wp_tag_cloud(); ?></p>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
	var GOOG_FIXURL_LANG = 'en';
	var GOOG_FIXURL_SITE = 'http://rickbeckman.com/';
//--><!]]>
</script>
<script type="text/javascript" src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
<p>I hope you find what you are looking for!</p>
<p><?php if ($_SERVER['HTTP_REFERER']) { ?>I was automatically notified of the address of this page as well as the referrer address which contained the errant link, if there was one, so that I can see about fixing broken links. However, y<?php } else echo 'Y'; ?>ou are more than welcome to e-mail me regarding this error; I would love to hear from you, especially if you still need help finding something! My e-mail address is <a href="http://mailhide.recaptcha.net/d?k=01b-IllrVLyH5ns4ZAetQxxw==&amp;c=8-jNc3fhiknDjwtt2Xmz3g8AQdbKMET295VYd1WAoa0=" onclick="window.open('http://mailhide.recaptcha.net/d?k=01b-IllrVLyH5ns4ZAetQxxw==&amp;c=8-jNc3fhiknDjwtt2Xmz3g8AQdbKMET295VYd1WAoa0=', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" title="Reveal this e-mail address">rick...</a>@gmail.com.</p>

If your theme does not pro­vide you with a 404.php file, you could try cre­at­ing one within your theme folder and using the fol­low­ing block of code. It is based off of the error page for Kubrick, the default WordPress theme:

<?php get_header(); ?>

	<div id="content" class="narrowcolumn">

		<div class="post">

			<div class="entry">

				<h2 class="center">Content Not Found</h2>

<?php	if (!current_user_can('level_10')) {
	$referral		= $_SERVER['HTTP_REFERER'];
	$not_found		= $_SERVER['SCRIPT_URI'];
	$to				= get_option('admin_email');
	$subject		= 'Content Not Found @ ' . get_option('blogname');
	$content		= '';
	if ($_SERVER['HTTP_REFERER'])
		$content	= "Came from: $referral\n";
	$content		.= "Landed on: $not_found\n\nGet this fixed!";
	$headers		= 'From: ' . get_option('admin_email');

	mail($to, $subject, $content, $headers);
} ?>
				<p><span class="drop_cap">U</span>nfortunately, the content you are looking for could not be found. There are a variety of reasons why this could have occurred, but what is important is getting you back on track and hopefully to content that you will find to be useful.</p>
				<div class="video">
					<object width="425" height="349">
						<param name="movie" value="http://www.youtube.com/v/yGZdqLgKrLE&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"></param>
						<param name="allowFullScreen" value="true"></param>
						<param name="allowscriptaccess" value="always"></param>
						<embed src="http://www.youtube.com/v/yGZdqLgKrLE&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="349"></embed>
					</object>
				</div>
				<p>In order to help you find what you need, you might consider using the search bar or browsing my categories in the sidebar. If you'd prefer to browse popular content or topics, they are listed below.</p>
				<h3>Popular content:</h3>
				<ul>
				<?php akpc_most_popular(); ?>
				</ul>
				<h3>Popular topics:</h3>
				<p><?php wp_tag_cloud(); ?></p>
				<script type="text/javascript">
				<!--//--><![CDATA[//><!--
					var GOOG_FIXURL_LANG = 'en';
					var GOOG_FIXURL_SITE = 'http://rickbeckman.com/';
				//--><!]]>
				</script>
				<script type="text/javascript" src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
				<p>I hope you find what you are looking for!</p>
				<p><?php if ($_SERVER['HTTP_REFERER']) { ?>I was automatically notified of the address of this page as well as the referrer address which contained the errant link, if there was one, so that I can see about fixing broken links. However, y<?php } else echo 'Y'; ?>ou are more than welcome to e-mail me regarding this error; I would love to hear from you, especially if you still need help finding something! My e-mail address is <a href="http://mailhide.recaptcha.net/d?k=01b-IllrVLyH5ns4ZAetQxxw==&amp;c=8-jNc3fhiknDjwtt2Xmz3g8AQdbKMET295VYd1WAoa0=" onclick="window.open('http://mailhide.recaptcha.net/d?k=01b-IllrVLyH5ns4ZAetQxxw==&amp;c=8-jNc3fhiknDjwtt2Xmz3g8AQdbKMET295VYd1WAoa0=', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" title="Reveal this e-mail address">rick...</a>@gmail.com.</p>

			</div>

		</div>

	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Phew!

Thanks for read­ing, and I hope you’ll take the time to put together a truly use­ful con­tent not found error page for your users. It truly does help to think of such a page not as an error page but as a land­ing page which far too often isn’t taken advan­tage of. Your vis­i­tors are already on your site. They’re look­ing for some­thing; what are you doing to help them find it?

I would love to see what you come up with for your error pages, so you’re more than wel­come to post a link to your site (or directly to an error page) with some expla­na­tion of what you’ve done to pimp it out.

If you just post a link with­out any sort of expla­na­tion or con­text, it may not make it by my spam fil­ters (and if it does, I can’t guar­an­tee I won’t mark it as spam myself; a link isn’t conversation).

Now go out there and make the Web more usable! (And share this with at least one other web­mas­ter whose error pages could use a lit­tle TLC. ;-)