Last Updated:

The Perfect 404 Page

 

The Perfect 404

Oops... Something's wrong. Are you at a loss – is it your fault or is the website to blame? So what do you do?

Welcome to the world of 404 error. You requested a page by typing a URL in the address bar or by clicking on a "dead" link - and voila! - You're in the heart of the virtual "nowhere". A user-conscious website will lend you a helping hand, while other sites won't do anything by relying on the error reporting mechanisms built into browsers. But we can do better, can we?

I won't go into detail about how you need to configure your server to properly render a 404 error page. Look for details in these articles:

  • Creating a Custom 404 Error Page (4 Guys From Rolla)
  • Creating Custom Error Messages in Apache (4WebHelp)

I will offer you options for creating a 404 page, which will most effectively help to cope with an unpleasant situation.

First, we need to check the most common reasons why people end up on a 404 page.

  • incorrectly typed URL (or outdated bookmark)
  • the link on the search server is out of date
  • the internal link on your site is broken by a webmaster's oversight

All these are different manifestations of the same thing, but for each of these cases you need your own special "medicine" - the message on the page "404" should be different for each error. There are a few tricks you can use in all cases, but my very first tip is extremely simple...

Don't look for someone to blame!

By all means, tell the user that something is wrong, but in no case do not reprimand him, even if you know for sure that it is his mistake! Turns of phrase like "probably", "most likely", etc. will be very useful here. Do not spoil the impression of your site from your visitor, because everything can still be corrected.

The 404th page should have...

You need to make sure that along with a phrase like "something went wrong", your page has the following elements listed:

  • A link to the sitemap (if you have a map) and a link to the main page of the site. This is the easiest way to help users. It does not require writing clever scripts.
  • Search block. If your site has a search function, add a search box to your 404th page. If there is no search, and your 404 page appears too often on your site, try to get this function somehow.
  • Purely minimalistic appearance. Avoid putting all the standard navigation of your site on the "404th". Avoid the abundance of distracting details. In addition, a complete navigation kit on the 404th page requires additional costs to maintain its relevance. If there is no navigation on the 404th page, you can not worry about updating it, which means that your visitors will not encounter a situation where navigation links on the 404th page themselves lead to the 404th page. I'm so ironic!

Do not use professional jargon. I mean, we're talking about 404 pages here, right? After all, we are among our own. But sixty-year-old Doris, who got to the "dead link" as a result of a search on a knitting site, will not realize what kind of 404 error this is. If you really want to use the phrase "Error 404" - do it discreetly, put it in the footer of the page as a note for those who understand this bizarre language of the Web.

Now let's see how you can make the 404th page work for you instead of against you.

Let's do everything smart

Here I should note that you will need knowledge of JavaScript (perhaps you do not have the rights to execute server scripts - it depends on the settings of your server). Therefore, do not forget about the <noscript tag>, inside of which there should be a message for users who have disabled JavaScript support in their browser. If you can use server scripts (which in this case is preferable - problems with compatibility and browser settings disappear by themselves), then adapt the proposed code to your needs.

First, you'll need to set a few variables:

var strReferrer=document.referrer.toLowerCase();
var blnSearchReferral = false;
var blnInsiteReferral = false;
var str="";
var strSite = "";

So, what are we going to do with them?

Incorrectly typed URL

An incorrectly typed URL (or an outdated bookmark) will not have a referrer, so your code for this case should be something like this:

ATTENTION! The character """ in this case only means a line break so that it can be shown on this page - you do not need to use this character in your code.

if (strReferrer.length==0)
{
str+='We think you will find one of the following »
links useful:<\/p>';
str+='<a href="\/home.php"><img src="/images/ »
home.gif" alt="Home Page" width="100" height="30" »
\/> <\/a>';
str+='<a href="\/site-map.php"><img src="/images/ »
site-map.gif" alt="Site Map" width="100" height= »
"30" \/><\/a>';
str+='<hr \/>';
str+='<p><strong>You may not be able to find the »
page you were after because of:<\/strong><\/p>';
str+='<ol type="a">';
str+=' <li>An <strong>out-of-date bookmark\/favorite »
<\/strong><\/li>';
str+=' <li>A search engine that has an <strong>out- »
of-date listing for us</strong><\/li>';
str+=' <li>A <strong>mis-typed address</strong><\/li>';
str+='<\/ol>';
document.write(str);
}

Outdated link on the search engine

If the referrer value is present, we can search it for the URL of the search engine (of course, here you can give room for your imagination). After that, we can disassemble the search parameters, find a list of keywords that the visitor entered on the search server and offer him a page that we think is suitable for his query.

if (strReferrer.length!=0)
{
if ((strReferrer.indexOf(".looksmart.co")>0)||
(strReferrer.indexOf(".ifind.freeserve")>0)||
(strReferrer.indexOf(".ask.co")>0)||
(strReferrer.indexOf("google.co")>0)||
(strReferrer.indexOf("altavista.co")>0)||
(strReferrer.indexOf("msn.co")>0)||
(strReferrer.indexOf("yahoo.co")>0))
{
blnSearchReferral=true;
//get site domain — split at the first forward-slash
var arrSite=strReferrer.split("/");
// now find search parameters
var arrParams=strReferrer.split("?");
var strSearchTerms = arrParams[1];
arrParams=strSearchTerms.split("&");

strSite=arrSite[2];
var sQryStr="";

//define what search terms are in use by the »
different engines
var arrQueryStrings = new Array();
arrQueryStrings[0]="q="; //google, altavista, msn
arrQueryStrings[1]="p="; //yahoo
arrQueryStrings[2]="ask="; //ask jeeves
arrQueryStrings[3]="key="; //looksmart

for (i=0;i<arrParams.length;i++)
//loop through all the parameters in the referring »
page’s URL
{
for (q=0;q<arrQueryStrings.length;q++)
{
sQryStr = arrQueryStrings[q];
if (arrParams[i].indexOf(sQryStr)==0)
{//we’ve found a search term!
strSearchTerms = arrParams[i];
strSearchTerms = strSearchTerms.split(sQryStr);
strSearchTerms = strSearchTerms[1];
strSearchTerms = strSearchTerms.replace("+", " ");
}
}
}
//Tell the visitor what site is at fault, what the
//search terms were
document.write ("<p>You did a search on <strong> »
<a href='" + strReferrer + "' target='_blank'>" + »
strSite + "<\/a> <\/strong> for \"<strong>"»
+ strSearchTerms + "<\/strong>\". However, »
their index appears to be out of date.<\/p> »
<h2>All is not lost!<\/h2><p>We think that the »
following page(s)on our site will be able to help »
you:<\/p>");

You can add a few lines to the code to intercept some special keywords for which you definitely have some materials on the site. For example, you have good materials for the keywords "electronics" or "accessories", but you recently moved the pages to another site directory – would it be a shame to lose everyone who will come to your site from Google for these keywords?

if (
(strSearchTerms.indexOf("widgets")>=0)||
(strSearchTerms.indexOf("electronics")>=0)
)
{
document.write("<a href='\/cool-widgets.htm'>Our »
excellent widgets page<\/a><br \/>");
}
}
}

Of course, if your site has its own search engine, you could use keywords from the referrer and do the search automatically. However, manual search is still preferable, since automatic search can give completely wrong pages.

Broken link on the site

We took care of visitors who came through broken links from search servers. Now let's take care of links not from search servers (or from those search servers that you don't know about). A few more conditions need to be added to the code:

if (!blnSearchReferral)
{
strSite = strReferrer;
strSite = strSite.split("/");
strSite = strSite[2];
document.write("<p>You were incorrectly referred to »
this page by: <strong><a href='" + strReferrer + " »
'target='_blank'>" + strSite + "</a></strong> »
<br />We suggest you try one of the links below: »
</p>");
}

... and those links would be a link to the sitemap and a link to the homepage of the site, which we talked about at the beginning.

What if the problem is in your site?

You can't take and write on your 404th page "On the site you came from, wrong link" when the wrong referrer is your own site. In such a case, it would be useful to change the wording and admit your guilt.

blnInsiteReferral =((strReferrer.indexOf("http:// »
www.mysite.co.uk")>=0)||
(strReferrer.indexOf("http://www.myothersite.com") »
>=0))
if (blnInsiteReferral)
{
document.write("<p>This one’s down to us! Please »
accept our apologies for this — we’ll see to it »
that the developer responsible for this broken »
link is given 20 lashes (but only after he or »
she has fixed this problem).<\/p>");
}

Solution to the problem

So, we managed to find a way out of the gloomy bowels of the 404th error. But have we corrected the mistakes ourselves? No. However, you have several options, as we already know which page was requested and which page made the erroneous link (if of course there was one). We can enter this information into the database, either automatically or using the "report broken link to the administrator" button, which can be placed on the 404th page. The second way will reduce the level of "noise", since visitors usually click such buttons only in case of a very important broken link. Then you decide for yourself how you will dispose of the accumulated information.

What else to read

See how these tips work in real life. Here are examples from accessify and A List Apart sites:

  • Copy this link into the address bar of the browser to simulate the case of an outdated bookmark: http://www.accessify.com/err.asp
  • And here's the option with the broken link.
  • Simulate a link from Google search results [staging page involved here]

Download the sample 404 page with the code described in this article and modify it as you see fit.