How to create a custom 404 error page

Sean McManus explains how to keep visitors who enter your site using broken links and bring visitors back into your site if they stumble across a missing page

What happens when people follow a broken link coming into your site? Persistent visitors might tamper with the link address to see if they can find your homepage, but most people will hit the back button and go somewhere else instead when faced with the unhelpful default error message.

You can't be sure that other sites will link to you correctly or that you won't need to move pages around after they've linked, so the best defence is to customise the error page on your site. You can intercept 404s and serve a friendly apology with links to help visitors get what they need. You might even persuade some to email you the details of the webpage with the broken link.

Step 1

This tutorial only applies to sites using Apache server so confirm yours is compatible by using the online test at http://toolbar.netcraft.com/site_report.

Step 2

Create your error page. Reassure visitors with your familiar page layout and navigation and include links to help them find what they need. Provide a search box and sitemap if you have one. Make sure any links on this page are absolute links (eg http://www.wildmoodswings.co.uk/index.html and not just index.html): you don't know which directory your error page will be called from.

Step 3

Create a text file called .htaccess (dot htaccess, with nothing before the dot). If you're using Windows, it's easier to create a text file in Notepad called htaccess.txt and rename it on the server later. You just need one line of text in this file: 'ErrorDocument 404 /404message.htm' where 404message.htm is the name of your error page.

Step 4

Check your server logs to see if you're getting a lot of requests for any particular missing page. You can make your .htaccess file redirect any requests for missing pages to their new location. Add a line for each one in your .htaccess file that says 'Redirect /oldfilename.htm /newfilename.htm'. Use the full path name (eg /stories/oldfilename.htm) if the old or new files are in directories.

Step 5

Upload both your .htaccess file and your error message page to the top level of your server. If you called your file htaccess.txt as suggested above upload it and then rename it.

Step 6

In your browser, try to visit a page on your site you know doesn't exist to check that you are shown your custom error page and that your links on it work. Check too that any redirects for obsolete filenames you have set up transfer you smoothly to the new page location.

Related links

• Webmaster tools - including various link-checkers. Avoiding broken links is better than creating custom error pages for when they occur!
• W3 error codes - You can use the same walkthrough to serve custom error messages for internal server failures (error 500 instead of 404) and others. See the full list of status codes and error numbers at the W3C site.
• Jakob Nielsen's guidelines for writing usable error messages