It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from www.sean.co.uk. © Sean McManus.
Home > Articles > Webmaster resources > Custom 404 tutorial

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

Screenshot of Netcraft server test

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. Be warned: If this file is under 512 bytes, IE5 will ignore it.

Step 3

Screenshot of editing the error file in Notepad

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

Screenshot of editing redirects in Notepad

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

screenshot showing FTP upload

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

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.