First I should note that WordPress, and other content management systems, often have their own provisions for 404 pages. For this reason this post is for the HTML websites.
One thing that is often overlooked with HTML websites is the need of custom 404 pages. In case you are not familiar with the “404” terminology, this is what the browser delivers when a page fails to load do to a scripting error or a broken link. The reason for the custom page is so that any time your website visitor mistypes or misspells a URL on your site (or the link is broken), they will still be provided with navigation options for your site (instead of getting nothing but a “Page Not Found” error message, which is neither friendly or helpful). Of course you can also use this page to provide branding, a bit of humor, or whatever else you want.
The process of creating a custom 404 page is relatively easy, but it is important to note that your hosting server has to allow for custom pages, and some don’t, especially the ones which provide free hosting services such as Geocities and Tripod.
Step One: Creating/Modifying the .htaccess File
This step may not be necessary in all situations. Some web hosts already configure their web server so that it will look for a specific file in your web directory when a certain document cannot be found. If so, simply skip this step.
The first thing you need to do is to add the following line to a file named .htaccess.
ErrorDocument 404 /page_error.html
You will of course need to upload a page_error.html file in the main web directory (public_html, www, etc) for the linking to work.
Note that in CMS sites the file is common since it is used for security authentication, but in static sites you will likely need to create it. To do this simply create one with a text editor (such as Notepad on Windows), yet note that if you are using Notepad, be sure to select the option “save as … all files”, otherwise Notepad will default to the .txt extension which won’t work for a system file. Don’t use MS Word, and other document creators since the extension, and formatting inherent won’t be compatible.
One .htaccess file in your main web directory will do the job for that directory and its subdirectories, but 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
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 put a search box on that page.
- A link to your site-map, which provides the links to all the pages on your website.
- 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.
- Your logo, and other branding.
Incidentally, you should make your 404 page larger than 512 bytes, even when you are testing, otherwise Internet Explorer and the Chrome browser will load what it calls its built-in “friendly HTTP error message” instead of your 404 page.
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. Be sure to test to see that the links lead to the pages you intended. As an example, you can view my 404 error page by clicking on: https://www.ecurtisdesigns.com/somepage/ This page includes the site navigation as well as a custom 404 graphic.
If you need help or ideas, there are quite a few websites with tutorials, and sample pages. Just search “custom 404 pages”. My suggestion, always start out by getting ideas.
