Travel,  Nature,  Naturalization,  Philosophy,  Poetry, Photography, Website Development
 

Website Development
How to Create Error Pages on your website

 
Most webhosts will allow the use of customised error pages. These are pages that will provide your visitors with a more friendly error message than the standard error provided by their browser. With an error page you can encourage visitors to stay on your site, redirect them to new locations of pages, direct them to a search page to help find what they are looking for, and so on.

What I describe here is what works with my webhost, IISnet Networks, and should work on most webhosts who use Apache.


404 - File Not Found

I will use this as an example, as it is the most common reason to have a custom error page. The others are 400, 401, and 403. 404 is the error that happens when a visitor tries to access a non-existant page on your site. It usually happens when you move content around on your site, or someone places an incorrect link on their site to yours.

The 404 File Not Found page for this site is here. This is my default one, not one of the special ones (see below).

Simplest approach:

Create the 404 - File Not Found page. Essentially this page should have the same look-and-feel as the rest of your site. It should provide a list of pages that have recently moved, along with their new location. There should also be links to your sitemap, your Home page, and a search page (so visitors can search for what they're looking for).
Save this page as 404.shtml, in the root of your site.

This next step may not be necessary; it depends on your webhost. At my webhost (IISnet Networks) this step is optional.
You may need to edit your site's .HTACCESS file to redirect visitors to a specific error page. If so, you need to add the following line to .HTACCESS:
  ErrorDocument 404 http://mysite.com/404.shtml
.HTACCESS is located in the root of your site. CPanel provides tools to edit this file.

That's all you need to do!


A bit fancier:

Here's another approach that allows more flexibility. This is the approach that I use for all my sites. It is most useful when you want to set up custom redirections, depending on the missing page being requested.

First I create a 404.shtml page and save it in the root of my site. However, the 404.shtml page in this case is not a pretty, formatted page. It only contains some Javascript code to retrieve and pass the URL of the page request that is causing the File Not Found error.
PLEASE NOTE: This is only possible if you do NOT edit your .HTACCESS file to include that special line mentioned above. And, your webhost must have enabled your error pages to load without needing to add any lines specific to Error 404 to your .HTACCESS file. If you use the .HTACESS method, the URL of the missing page will not be available to you. You will only be able to retrieve the URL of the current page (which is your 404.shtml page, which isn't much use to you!).

Why do I want to do this? Well, I have moved a lot of the material off my wmuma.com site to several other websites. I want to bring up a different File Not Found page depending on which of the old content they have requested, so I can display a message specific to what they came to find. The page they will see will display only the new link for the topic they are looking for. For example, on my wmuma.com site, I used to have the Wildwood Survival site located at wmuma.com/tracker. I moved all that content to wildwoodsurvival.com. When someone accesses any page that starts with wmuma.com/tracker, I want to display a custom "File Not Found" page that tells them all that content has moved to wildwoodsurvival.com. In fact, I take it a step further and display the complete new URL of whatever content they were trying to reach. All this is possible with Javascript.

So ... here's an abbreviated version of my 404.shtml file:

<html>
<head>
<title>wmuma.com - 404 File not found</title>

<script type="text/javascript">
var URL1;
URL1 = document.URL;
if (URL1.indexOf("tracker") != (-1)) {window.location.replace('http://wmuma.com/z/redirects/TTfilenotfound.html?URL='+URL1)}
else
...
<<other similar redirects go here >>
...
else
window.location.replace('http://wmuma.com/z/LTfilenotfound.html?URL='+URL1);
</script>

</head>
</html>

What this Javascript does is retrieve the URL of the missing page that caused the 404 error. It then checks if it contains certain words. In this example, it checks if it has the word "tracker" in it. In other words, was the visitor looking for the Wildwood Survival website at its old location? If so, it redirects the visitor automatically to a specific error page, in this case, TTfilenotfound.html. It also appends the URL of the missing page so this can be further processed in TTfilenotfound.html.

It falls out at the end with a default error page, which gets processed if the visitor wasn't looking for any of the content on any of the new sites that I created. In this case, the visitor is automatically redirected to LTfilenotfound.html if none of the conditions are met, where a list of moved content is presented.

In summary, when a 404 error is generated, a general switching page (404.shtml) is processed first, which sends the visitor off to a specific error page tailored to the content they were looking for.

THERE'S A CATCH, though! (You just knew it, right?)

If you don't do all kinds of fancy Javascript things in 404.shtml, making it a larger, longer file (like above), you will run into problems. Here's why, explained by an example.

In most of my sites, I don't have very complicated error page redirect needs. However, in order to maintain consistency throughout my sites, I always use a 404.shtml page in the root of my site, along with a site-specific XXfilenotfound.html page (where XX is replaced with a site-specific code) located elsewhere.

Ok, fine. Now you'd expect my 404.shtml page from one of these simpler sites to look like this, for example:

<html>
<head>

<script type="text/javascript">
var URL1;
URL1 = document.URL;
window.location.replace('http://ontariotrees.com/z/OTfilenotfound.html?URL='+URL1);
</script>

</head>
<body>
</body>
</html>

But this doesn't work in Internet Explorer (IE), if the visitor has the "Friendly Error Pages" option turned on in the options of Internet Explorer!! Yes, this took me awhile to figure out! :)  Seems there's a problem with IE processing a 404.shtml error page if the page file size is too small!

So... you have to pad it with dummy comment lines, thus:

<html>
<head>

<script type="text/javascript">
var URL1;
URL1 = document.URL;
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
//XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
window.location.replace('http://ontariotrees.com/z/OTfilenotfound.html?URL='+URL1);
</script>

</head>
<body>
</body>
</html>

Note the useless Javascript comment lines that achieve this "padding".

Now it will work.

The destination "File Not Found" page can display the URL of the missing page for the visitor's benefit. This is done in Javascript thus:

<script type="text/javascript">
var urlquery=location.href.split("?");
var urlterms=urlquery[1].split(",");
var URLnew=urlterms[0].substring(4)
document.write('<p align="center"><font color="#008000">('+URLnew+')</font>');
</script></td></tr>

This code retrieves the URL of the missing page (after the "?" in the address bar, passed from 404.shtml), and displays it.

In summary ... create a 404.shtml page and save it in the root of your site. It contains Javascript code to retrieve the URL of the missing page and pass it on to one of possibly several specific "File Not Found" pages. This will not work if you make the entry in .HTACCESS, or if your 404.shtml file is too short.

To see how my 404 File not found pages behave (here on this site), click on the following links:

Ok, I'm sure you get the idea by now.

Oh... by the way, I'm not a Javascript expert, nor do I pretend to be. If you are, however, you will undoubtedly find that my Javascript code is not optimal. But it does work. :)


Google can help:

You can also add code to invoke the Google 404 Widget, which can provide extra help to a visitor upon trying to access a non-existent page. For more information go to http://googlewebmastercentral.blogspot.ca/2008/08/make-your-404-pages-more-useful.html

The material on this page is copyright © by the original author/artist/photographer. This website is created, maintained & copyright © by Walter Muma
Please respect this copyright and ask permission before using or saving any of the content of this page for any purpose

Thank you for visiting!