How to Create Custom Error Pages
First things first, what are custom error pages?
Simply put, custom error pages are the pages we see whenever we encounter an error while browsing a site. The five most common errors we encounter are:
- Error 404 - File Not Found
- Error 400 - Bad Request
- Error 403 - Forbidden
- Error 401 - Authorization Required (Unauthorized)
- Error 500 - Internal Server Error
Why do we need to customize error pages? We need to create custom error pages because it's unprofessional to see the default web server error pages. We also need to provide site users with options whenever they encounter an error other than clicking on the back button of the browser.
Think about it. Isn't it disappointing, to say the least, to encounter a 'File Not Found' error and not know where to go next rather than go back to the page that brought you to the error in the first place?
So how can we create custom error pages? Though most commercial web hosts provide the facility for you to create custom error pages, it's still best to check first before creating your very own error pages. It would be very frustrating if we'd spend the time and effort to create the custom error pages only to find out that your web host does not support it. A quick look at your web host's documentation may give you the answer. But if you're unsure, an email to your web host's technical support asking if you could put up your own custom error pages would be better.
Let's create custom error pages! There generally two ways to create custom error pages – first it to create them thru your web host's control panel. Second is to create them thru the .htaccess file.
Creating custom error pages thru your web host's control panel is easy. All you need to do is log in to your web host's control panel, find the custom error pages option and then paste the template or html code of your error page. The control panel usually lists the five common errors mentioned above and you'd be able to paste or modify the template for each.
Creating custom error pages thru the .htaccess file is a bit tricky. The steps mentioned here are for Apache web servers only. Again check with your web host what type of server you are running and whether or not you can create custom error pages thru making or modifying the .htaccess file.
Roll up your sleeves because we're about to make or modify the .htaccess file to create custom error pages.
First, check if your web server already has an .htaccess file. Simply FTP into your site and look for the .htaccess file. Remember ".htaccess" only! It does not have a filename.
If it does exist, download it and open it in Notepad. If it doesn't, open Notepad and enter ".htaccess" (including the opening and closing quotation marks) into the "Save As" dialog box.
When you have downloaded or created the .htaccess file, type or copy the following:
ErrorDocument 404 /notfound.html
This means that you will have to upload the custom error page for Error 404 (notfound.html) to www.yourwebsite.com/notfound.html.
Alternatively, you can put all the custom error pages in a directory. For example you can type or caopy the following into your .htaccess file:
ErrorDocument 404 /errorDocs/notfound.html
This means that the custom error page for Error 404 will be uploaded to www.yourwebsite.com/errorDocs/notfound.html.
The "ErrorDocument 404" directive essentially tells the Apache web server that whenever it cannot find the file it needs in that directory and its subdirectories, it is to use the document specified in the URL that follows.
To create the other custom error pages, just follow the error document number mentioned above.
One .htaccess file in your main web directory will do the trick for that directory and its subdirectories. However, if you want a certain subdirectory to show a different 404 File Not Found message, you can always place a different .htaccess file into that directory. This will override any .htaccess files you have in the parent directories.
It is not good enough to simply let your visitors know that the file could not be found. In order not to lose them, you will need to provide them some way to locate the document they want, or they will leave.
Your page should have one or more of the following things:
-
A link to your main page, with a suggestion that the visitor can find what he/she wants there. If you have a search engine for your website, you should definitely put a search box on that page. Many people prefer to simply type a query than to scan through your site map. A link to your site map, which lists all the pages on your website.
-
If you know of frequently mistyped URLs on your site, you can even put links to the correct location directly on the page, so that visitors who arrive there from outside can quickly get to the correct page. Remember, you don't want to lose that visitor, so do all you can to help him/her.
-
Any other navigational aids that you may have — for example, if you have a drop down navigation menu on your normal pages, you should probably put one here as well.
-
If you like, you can even put a simple form on the page to allow your visitors to inform you of the broken link. However, the primary aim of this page is not to help you track bad links, but to make sure your visitor does not leave your site if what he/she wants can be found there.
Incidentally, you should make your 404 page larger than 512 bytes, even when you are testing. Otherwise Internet Explorer (IE) will load what it calls its built-in "friendly HTTP error message" instead of your 404 page. The Chrome browser behaves no better.
When you're satisfied with your page, upload it together with your .htaccess file to your website. Then test it by typing a URL that you know does not exist.
Your error page should load up. From this error page, test to see that the links here lead to the pages you intended it to lead.
Common Errors with Custom Error Pages
The most common error people have with their custom error page is making a mistake in the URL they put in their .htaccess file. This leads the web server into a loop when a visitor tries to access a missing file. When a file cannot be found the server tries to load the file specified in your ErrorDocument directive. But that file does not exist too, so it tries to load the file specified in that directive. You get the idea.
Make sure you test your error file by typing in a non-existent URL. Do not test it by typing its real URL — that will of course work but it will prove nothing.
Another common error is to forget that your 404 Error Page may be loaded either from the main directory or from a subdirectory or even your CGI-BIN directory. When you put links on your 404 Document Not Found page, such as hyperlinks leading to other pages on your site or links to images (such as your logo), be sure that you use the full URL and not a relative link. That is, use things like:
<a href="http://www.yoursite.com/sitemap.html">Site Map</a>
instead of
<a href="sitemap.html">Site Map</a>
The first will work even if the 404 page appears for a missing file in a subdirectory, but the second will not.