We’ve all been there before, you’re browsing around on the net clicking on links like a hummingbird and all of the sudden there’s an error… “Page cannot be displayed”, “Internal Server Error”, or “Page Not Found”. Just a big ugly white page with black text mocking you. Without even thinking about it you click the back button and move on to another site, just like every other person on the internet. As a web visitor, this isn’t a big deal since you’ll find the information you’re looking for on another site. However, as a website owner you just lost some of your web traffic. Even worse, if you’re not checking your server logs regularly or using a log analyzer, such as Awstats or Webalizer, for your website stats then you may not ever know about the lost traffic. Instead you should create custom error documents on your website and recover that lost traffic when possible.
Understanding The Error
Before we can recover any lost traffic we need to understand what each error means. Each of these errors is returned by the server using a numerical status code. These are more commonly referred to as the HTTP Response Codes. Here’s a list of the most common error codes and what causes the error to display:
- Unauthorized – Error Code: 401 - The information the visitor is looking for has been password protected on the server and the user failed to authenticate successfully.
- Forbidden – Error Code: 403 – The information that the visitor requested is specifically denied due to the server configuration. This most commonly happens when a visitor tries to view a directory listing of files on the server and the web server is configured not to send one out.
- Not Found – Error Code: 404 – The page or file that the visitor requested could not be found on the website. This is the error code for “Page not found” and “Page cannot be displayed” errors.
- Internal Error – Error Code: 500 – Most commonly seen as “Internal Server Error”. Officially this error means the server was unable to fulfill the request for an unknown reason. On most websites it’s typically caused by the scripting language such as PHP, Perl, or ASP having an error or taking too long to execute.
- Service Unavailable – Error Code: 503 – The 503 error is caused by a temporary overload on the server or unavailability of the server due to maintenance. The difference between the 503 and 500 errors is that the 503 error is supposed to be temporary and will be corrected after some time.
Now that the technical stuff is out of the way, let’s add some new pages to the site to use as error documents.
Making an Error Document
The first thing we need to do to make a successful error document is to decide what type of page is needed. Most web developers and site owners would like to use programming languages such as PHP, ASP, or ASP.net for their error documents; however, this may not be the best choice in the case of the 500 or 503 error codes. Static HTML files are typically your best bet to ensure maximum compatibility with all of the error codes. This is due to static HTML files which only rely on the web server software to function properly rather than 3rd party programs such as programming languages.
Once you have selected the document type you want to use, create a basic HTML layout for your error document pages. Ideally all of the error pages will have the same look and feel as the rest of your website. If this isn’t possible, make sure all of the error documents have the same look and feel. Now that the basic layout is done, you can save the file as “error-code-template.html”.
What you have now should be used as the basic template for making all of your error documents. Simply make a copy of that file and customize it for each error code you want to target. When making a copy of the file, change the file name to the error code you are trying to target such as “error-code-401.html” and then add content to the page specific to that error code. Here are some examples:
- 401 Errors – Inform the user that their authentication has failed. Perhaps offer a link to where the user can register or recover their lost passwords.
- 403 Forbidden – The server isn’t configured to perform the request that the browser made, try offering links to alternative content that the user might be looking for.
- 404 Not Found – This is likely the most common of the errors. Provide links to other sections of the site where the user might find what they are looking for.
- 500 or 503 Errors – These are caused by server problems. Explain to the user that the server is having an issue and to try again later. Offer a suggestion that they bookmark the page to try again later or try to direct them to a different page on the site. As an alternative, you could always try to blame the error on the user and state that they broke your web server. Try to have fun with it.
One thing you should always do is add your website stats or analytics data to the page so you can track how many times these pages load. For example with Google Analytics you can add the following code to your 404 error document:
var _gaq = _gaq || ;
_gaq.push(['_trackEvent', 'Error', '404', 'page: ' + document.location.pathname + document.location.search + ' ref: ' + document.referrer ]);
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’); s.parentNode.insertBefore(ga, s);
Just place the UA account number with your websites real Google Analytics information and you should be all set. For the other types of error codes you should change the text in bold to match the correct error code number.
Now save the file and upload it to the server for use. Once the files are created and uploaded we just have to configure the server to use the files when serving the error codes.
Error Document Server Configuration
Configuring your server to use the error documents depends on the hosting platform you use. Users using Linux web hosting can create a .htaccess file in their domain folder with the following contents:
ErrorDocument 404 /error-code-404.html
Just repeat that line and change the error code and file name for each error document you want to create. Under Windows hosting using IIS, users will need to have administrative access to the server to implement the error documents. This is done in the IIS Manager by right clicking on your website instance and choosing “Properties”. Once the properties page has loaded, click the “Custom Errors” tab and click edit after highlighting the error you want to change.
Of course for most users you will not have administrative access to your web server. This means you will have to implement the error codes using your web hosting provider’s control panel system. Since we use the H-Sphere control panel here at Weberz, users can perform the following instructions:
- Log in to your control panel at http://cp.weberz.com
- Click the “Web Options” icon under the “Main” section of the page after you log in
- If you have multiple domains, click the domain name to which you wish to add the Error Documents
- Scroll down the page until you find the “Error” section and click the “Add Error Document” icon
- Choose the Error code for the document in the drop down menu
- Enter the path to the error page in the URL box e.g. “/error-document-404.html”
- Finally, choose “Redirect” as the type and click save
There you have it. Everything you need to create custom error pages to potentially save your lost web traffic due to website errors. As an example, Weberz has implemented a custom 404 page on our site; you can get a 404 error by clicking here. If you have any helpful ideas for others to use on their error pages, please share them in the comments below. Also, if you have any fun or interesting error pages that you have seen around on the internet, share them below as well!