|
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. :) |
