GUIDE: How to create a custom 404 (page not found) page

A vast majority of people will just click on the "back button" when they encounter a 404 error page. This means that you are loosing valuable traffic, and why? -- Because you do not have a custom 404 page, and visitors are getting lost.

Some website hosting companies (normally, the "free" ones), do not support custom 404 error pages.

Commercial website hosts, on the other hand, usually provide this facility.

If your hosting company mentions somewhere that you can customize a file named ".htaccess", it probably means that you can also customize your 404 File Not Found error page.

The .htaccess file is what Apache website servers use to allow you to fine-tune your website server configurations at a directory level.

Other types of website servers handle the customization of 404 error pages differently. (A website server, in this context, is the software that runs on your website host's computer. It is the program that "serves" your website pages to your visitors.

Step One: Creating/Modifying the .htaccess File

This step may not be necessary in all situations. Some website hosts already configure their website server so that it will look for a specific file in your website directory when a certain document cannot be found. If so, simply skip this step.

Otherwise, the first thing you need to do is to add the following line to a file named .htaccess (note the preceding period). In most instances, no such file will exist, and you can simply create one with a text editor (such as Notepad on Windows).

Incidentally, if you are using Notepad on Windows, you will need to enter ".htaccess" (including the opening and closing quotation marks) into the "Save As" dialog box when you create the file, otherwise Notepad will append a ".txt" extension behind your back when it creates the file. And unless you configured Windows to show you the full filename, you won't even realise that it has done so.

You will of course need to put a notfound.html file in the main website directory for the above directive to work.

The "ErrorDocument 404" directive essentially tells the Apache website 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.

One .htaccess file in your main website 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.

Step Two: Creating Your Error Document File

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.

Step Three: Testing the Error Document

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 a 404 Custom Error Page

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 website 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:

instead of:

The first will work even if the 404 page appears for a missing file in a subdirectory, but the second will not.

Conclusion

When a visitor encounters a 404 File Not Found error on your site, you're on the verge of losing the visitor that you've worked so hard to obtain through the search engines and third party links. Creating your custom 404 error page allows you to minimize the number of visitors lost that way.

NOTE:
This method only applies to websites that are hosted on Apache website servers.

If your website server is not an Apache website server, you will have to find out from your hosting company what you need to do to enable the server to serve your customized file when a file cannot be found.

 

really this awesome tips

 

This is really informative. The tips are great and well- explained. I appreciate this, Thanks.