Creating a Custom 404 Error Page - Tutorial

This tutorial will teach you how to create your own 404 error pages for your web site. Why would you want to do this? The answer is that it is a great way to retain visitors to your site. If a visitor arrives at your site from an outdated link on an external web site, they will receive a 404 error page. If you do not have a custom one configured, they will receive the browser's default error page. Internet Explorer's is shown below:




When visitors see this page, most will assume that they site no longer exists and go elsewhere. If they can see that the site is still there, but the particular page does not exist, they are likely use your navigation menus or search box to try to find what they are looking for. As an example, take a look at our 404 error page.

Creating custom 404 error pages is pretty easy. If your site is hosted on a Linux, Unix, or BSD server, you need to edit your .htaccess file and add the following line:

Code :

ErrorDocument 404 /yourerrorpage.shtml

The italicized part needs to be the name and extension of your error page. Next, create your error page. Error pages are standard HTML pages and can also utilize SSI like the rest of your site. When creating this page, make sure that it is over 512 bytes in size or Internet Explorer will continue to display its own 404 pages. Note that images and graphics do not count toward the total size in this circumstance. Once this is completed upload your .htaccess file and your error page, and you should be all set.

If you are using a Windows web server, you will need to open the IIS managment console. Expand the list of web sites in the left-hand pane and right-click on the web site you want add a custom error page to and select "Properties". Click the "Custom Errors" tab in the window. Highlight HTTP Error 404 in the list of errors and click the "Edit Properties" button. This will open the "Error Mapping Properties" window. In the "Message Type" dropdown, specify that you'll be using a URL. Enter the path to your 404 error page in the URL field as in /yourerrorpage.shtml.

You can perform this exact same process for other HTTP errors such as 401 and 403.