An error 404 occurs when someone requests a page from your site that doesn’t exist. This most commonly happens when someone mistypes a web page address, eg: comtact.html instead of contact.html, or when a page is moved or renamed, but a link to that page isn’t updated.
By default in this situation a simple message is shown that states the web page could not be found. The vast majority of websites are happy with this, after all, it does what’s required, but if you stick with the standard 404 page, you’re missing out on a great opportunity.
Custom error 404 pages are easy to make, and can be used in an infinite number of creative ways. At the most basic level, a custom error 404 page should explain the error in simple terms, and then present some possible solutions, such as a search bar to help users find the page they were looking for, or a site map.
Our (ClearVector’s) error 404 page uses the levenshtein formula to try and guess what page the viewer was looking for, and suggest that to them. So if you typed www.ClearVector.net/abuot in your browsers address bar, our 404 page will suggest the about page. The way in which we achieved this is a little complex for this tutorial, although we will cover it in detail at a later date, it’s another good example of a good use of a 404 page.
Error 404 pages don’t even have to be limited to helping the user find the page they were after, although they should at least do that. Many error 404 pages will have things like mailing list sign up forms, comic strips or even games.
If you are a ClearVector hosting customer, custom error 404 pages are incredibly easy to set up. The following method for creating custom error pages will also work with many other hosting companies.
The first thing you need is a page to be displayed when an error 404 occurs, you can call this what ever you’d like, and put what ever you want in it, although if you follow the points in this post your viewers will get the most use out of it. For the sake of this tutorial we’ll assume you’ve called your custom error page 404.html.
Next you need a .htaccess file, the .htaccess file gives special commands to the web server, in this case we’re going to use it to tell the server what to do when an error 404 occurs. (If you are already using a .htaccess file on your website, you can skip this stage.) To create a .htaccess file, simply use your favourite text editor to create a new file, and save it as .htaccess – in windows you might see a warning about changing the file’s extension, you should continue anyway, as the extension needs to be changed for this to work.
Please note, the file name must be ‘.htaccess’ exactly (without the quotes) anything else (such as file.htaccess) will not work.
Now you have your .htaccess file ready, it’s time to tell it to redirect to your custom error 404 page. To do this simply copy and paste the following code onto the first line of the .htaccess file (replace 404.html with whatever your error page is called):
ErrorDocument 404 /404.html
Now simply upload both the custom error page and the .htaccess file to the root directory of your website (public_html on ClearVector hosting). Once thats done try misspelling one of your pages and see what happens.
