How to create custom 404 error pages for your site
There’s just no way a respectable company should even allow visitors to see this:
It just makes no sense. One puts all that work into creating a great website. A visitor makes a mistake like mistyping a page name, or they click a bad link on someone else’s website linking to you and you drive them away with such a display of “I don’t care” behaviour.
Why not send your visitors to a friendlier page when they reach something that is no longer available? Something like this:
It’s easy: if you can create and edit a plain, static HTML web page, you can create a 404 error page. You may have to get your web host to perform small setup work, but this is nothing complicated. You can follow the steps below, depending on what server your website is hosted on.
Step 1: Create Your Page
- Use your favourite HTML or web page editor. Pay attention to some of the WYSIWYG editors, they tend to add bits of code to the source code of the page and might disrupt normal behaviour or generate errors. (i.e. Dreamweaver)
- Get the HTML code for your site. If your site is a static HTML-based website, then simply chose the view source option in your browser to view the code. You can also login by FTP and get the original version from the server, if you use a CMS or other encoding for the source code.
- Edit the page so it follows the three principles of a valid and useful 404 error page (see below).
- Make sure to save the page under a suitable name, like 404.html.
Any 404 page should have three basic elements:
- A clear statement that the visitor is in the wrong place;
- Advice to help them get back on track;
- An option for getting in touch with the website owner.
With step 1 completed you can consider yourself way ahead of the trend, as many website owners still do not understand the importance of error pages to visitors.
Step 2: Upload the Page to Your Website
Connect to your website using the tool you normally use for this purpose. It might be an FTP client, or the ‘file manager’ that’s built into your web hosting control panel.
Upload the 404.html page to the server.
Navigate to http://www.yoursite.com/404.html to make sure the page loads and looks fine.
Step 3: Setting Up Your Server to Point at Your 404 Page
Most people feel this part is complicated. Wrong.
This procedure can depend a little on exactly how your server is configured, but typically all you have to do is edit a file called .htaccess. Check with your web hosting provider. If they use Apache they almost certainly have a help document explaining this. If they don’t, contact me and I’ll connect you with a real hosting provider.
- Connect to your site via FTP. Do you already have a file named .htaccess? If so, skip to step 3
- Create a new file. Name it .htaccess – use this exact name, no extension.
- Add the following line of text to the file:ErrorDocument 404 /404.html. It assumes you named your error page 404.html, and that the error page is in the root folder of your web site.
- Save the file and upload it to your web site, if you haven’t already.
Test your newly created page by pointing your browser to http://www.yoursite.com/whateverpagethatyouknowdoesnotexist
You should now see your custom 404 error page. This is what the visitors will also see when they reach a missing page on your website.
So make sure you never:
- Redirect 404 errors to your home page. It is confusing to your visitors. They clicked a link thinking they’d get to one page and you sent them to another one, while offering no explanation.
- Redirect 404 errors to another web site.
- Send 404 errors to a Flash page.
- Send 404 errors to a page with a registration form that has lots of fields. Yep, seen it myself.
So, creating a great custom 404 error page is easy. Having a great custom 404 error page means keeping more visitors on your site, looking more professional and offering them a less confusing experience.
What are some good and bad examples of 404 error pages that you know? Share them in the comments below.
Tags: How To