Custom 404 Error
Everyone’s encountered the frustrating 404 error page. You follow a link, looking forward to the joy waiting for you on the other side, when BAM! you get an error because the page you were looking for doesn’t exist. Maybe it was moved, maybe it was never there in the first place, but the fact is you’re left sitting there with an unhelpful error message and nowhere to go.
The best sites have found a way to lessen the aggravation by customising their error code with a page that apologises for the mess up and offers some solutions to rectify the problem. If you want to show your readers that you care, read on…
This page was last updated on 2012-08-21
Check it out
First off before you do anything else you should make sure that customising error codes in this way is allowed or even possible. Some webhosts (including most of the popular free ones I would imagine) will not permit this sort of tampering because it might mess something else important up. This is generally thought of as an “advanced” modification. Find an FAQ or email the people in charge of your server and ask if you can set it up. If you have your own domain, you shouldn’t have any restrictions of this kind.
The .htaccess file
Your .htaccess text file is the special file that sets up the deal for you. It can contain all sorts of directives for the Apache server. If you’re not using an Apache-based server, you’ll have to read your server’s manual on how to do it.
Look in your root directory, the place where your homepage is, for this file (.htaccess). If it’s not there don’t fret, you can just create it afresh and it won’t make any difference. When doing so, just make an empty text file in Notepad or whatever, and make sure you start the filename with a dot — it’s vital. Starting a filename with a dot makes it a hidden file in Unix.
sourcetip: You may have problems creating a filename that starts with a dot. If your operating system won’t let you create a file like this, name the file something else temporarily and rename it through your FTP program once you’ve uploaded it.
For now, just save a basic HTML page with the words “404 error” in it so that we can test that it works. I’ll show you how to make a useful custom 404 error page a little later in this tutorial.
Edit it
Now you need to point .htaccess to your custom page. Add this line to the file (edit it with a text editor like Notepad):
ErrorDocument 404 /404page.html
Make sure it’s all on one line. Start the file path with a slash, which tells the server to start looking in your root directory (where your homepage is), and follow the path you specify. For example,
ErrorDocument 404 /misc/404page.html
This will load the file 404page.html in your misc directory.
sourcetip: Make sure you don’t specify a full URL to your 404 page, as in something like “http://www.example.com/404page.html”. This will cause your server to return the wrong response code, and will actually make it seem like the page was found correctly.
If you specify the path to your file as I have in the tutorial (relative to the root, like “/404page.html”), you won’t have these problems.
It’s also a good idea to add the code <meta name="robots" content="noindex"> to the <head> section of your 404 page, so that search engine robots don’t add it to their indexes.
Now upload your .htaccess file to your root directory, and your 404 page to the location you specified, and you’re ready.
Then let’s turn it on!
This step may not be necessary, but if you’re unlucky you’ll have to tell your server to activate this feature. On a Unix server, this may already be on, but if not you’ll have to connect to your server and type chmod 644 .htaccess at the prompt. This sets the file permissions. You can change .htaccess’ permissions through the interface in most FTP programs too. If you have no idea what that meant, contact your server guys again and ask them to sort it out for you.
What should I use it for?
A good 404 error page must have a number of things to be truly useful — it’s not much good simply putting up a message saying “we apologise for messing up so very horribly.”
- Your 404 page should look similar to the rest of your website, so that visitors know that they’re still on part of your site.
- Explain the error that has occurred, and perhaps describe common reasons for the error (mistyped URLs, outdated content etc.). Use clear language and don’t ramble. Since it’s such a well-known error code, including the number “404” in this summary will get the message across quickly.
- If your site has a search function, include a search box.
- If you have an index, add a link to it, and definitely link back to your homepage.
- Include an email link so that visitors can report the problem. Don’t expect a lot of them to take the time to do it, but some will, and it again enforces the point that you care that they’ve had a problem.
Overall, just make sure you motivate your reader not to lose all faith in your site, and give them options as to where to go next.
sourcetip: Since your 404 page might be served up from any subdirectory of your site, make sure all links and image sources are defined absolutely. For instance, use href="/index.html" to link to your homepage instead of href="../../index.html".
Even if you don’t allow many links to go broken throughout your own site, mistakes will occur. Visitors will mistype an address, or follow a mistyped link from another site.
Studies have shown that if you recover well from an error by serving a useful error page, visitors are actually happier with their experience with a website than they would’ve been if nothing went wrong. Don’t ask me how exactly that works, but I saw it in a book, so there you go.
sourcetip: Internet Explorer has a lightly-documented “feature” that stops it from serving any custom 404 error page that is less than 512 bytes long. Your visitors will instead be sent to IE’s own 404 page (screenshot), which is generic and suggests they use an MSN search to “look for information on the Internet.” That’s one way to lose visitors! Make sure your custom 404 error page is over this limit — about 10 full lines of text and HTML should be enough.
To test your work, try getting to a page you know doesn’t exist and seeing if your error page comes up. Good luck.
If you want, you can also see our newly-made page.
