How to create a custom 404 page

Introduction - What is a 404 page?

When someone enters a URL or follows a link to a page that does not exist they will get an error like:

HTTP 404 Not Found

The requested URL was not found on this server.

The exact wording of this error may vary, but it is normally fairly unintuitive, unfriendly and unlikely to result in the person exploring your site further.

Whilst it is impossible to prevent these errors (whilst you can check for broken links you have no control over what URL the visitor manually enters), you can replace the error page with a more friendly custom one of your own. If you also track where your visitors come from then a custom 404 error page also allows you to find the source of broken links.

It is important to recognise that there are two distinct steps to creating your own custom 404 page:

Create the page that you want displayed.
Configure the server to display your page.

Creating your own 404 page

Your custom 404 page is a normal html document. It can have any name but the notes on this page assume that you are calling it 'custom404page.htm'. Since it is a normal html document you are free to put anything you like on it, but consider the following:

Start with a simple friendly statement that the requested page could not be found and invite them to browse (or search) your site. Don't use the term 'Error' since this is likely to put visitors off.
Use the same look and feel for the page as you have used for the rest of your site. Include common navigation elements if this is consistent with the rest of your site. It should include the URL of your site.
Consider including a search box so the visitor can search your site for what they are looking for.
Some web servers allow 404 pages to be defined for different folders/directories. If your web server supports this and your site is logically portioned into separate sections (within different folders) then consider whether it is worth having different custom 404 pages for each section.
You probably won't want web-bots to spider your custom 404 page (they will only get there by following a broken link) otherwise for example your custom 404 page might be included in search engine results! To request any web bots to ignore the page include the following meta tag within the tags at the top of your page:
Internet Explorer 5 has a problem displaying custom 404 pages if they are too small. To avoid this problem ensure that your custom 404 page is at least 512 bytes. For more information see the Microsoft knowledge base article Q218155.

Configure the server to use your custom 404 page

Unfortunately how you configure the server to use your custom 404 page varies according to the type of web server. There is no single standard mechanism. Notes are included here for the following types of web server:

Apache (including Zeus)
Microsoft Internet Information Server

Using your own 404 page with Apache (or Zeus)

These notes apply to the Apache web server and also to the Zeus web server.

Using a text editor create the file '.htaccess' (without the quotes). It should contain either the line:

ErrorDocument 404 http://www.yourdomain.com/custom404page.htm

or:

ErrorDocument 404 /custom404page.htm

This assumes that your custom 404 page is called 'custom404page.htm'. (If you create the '.htaccess' file on a Windows machine then check that Windows has not added a file extension.)

So, what is the difference between these two versions? Both will give you a custom error page, but there are subtle differences:

ErrorDocument 404 http://www.yourdomain.com/custom404page.htm

This will cause the web server to issue a redirect, redirecting the user to the page. This allows you to redirect the visitor to a page on another site (should you want). Another key difference is that any web robots will receive the status 200 back from the server (page okay) rather than 404 which is page not found. In some situations this can undesirable.

Whereas:

ErrorDocument 404 /custom404page.htm

Will cause the web server to use the page it finds at the root (i.e. the top or main) folder for your website. The slash at the start '/' tells the server to get the file from the root (or top most) folder. This method has the advantage that any web robots will receive the 404 status back from the server (i.e. page not found). It has the disadvantage that any relative links can easily be broken - because if the user were trying to view a page in a sub-folder then any relative links will be relative to that sub-folder, not the folder that the custom 404 page is in. So either use absolute URLs or use the BASE element to specify an absolute base for (relative) links.

Once you have written your '.htaccess' and 'custom404page.htm' files you should upload them to the server. That should be it.

Other notes:

In order to create custom 404 pages for separate sub-directories include a new '.htaccess' file in each sub-directory. The contents of a '.htaccess' file apply to the directory in which it is located and all of its sub-directories (and so on) but is overridden by any applicable commands in subsequent '.htaccess' files.
Be aware that the '.htaccess' file can contain directives other than for specifying custom 404 pages. Refer to the Apache documentation for further details.