24 Apr 2012

Give Searchers a Second Chance with a Custom 404 Page

A wise man once told me, “Hard times do not build character. They reveal it.” Apparently that’s a twist on the original quote from John Wooden, a Hall of Fame basketball player and coach, who was referencing sports rather than hard times. Nevertheless, I love the quote, and it does apply to many more things in life beyond sports. In fact, I think it even applies to websites as well.

One of the situational hard times websites face is when they earn a coveted organic link (especially from an authoritative source!), but then the linking webmaster makes an error in the URL. If the error is in the domain name, well, tough noogies. But if the webmaster gets the domain name right but blows it on the folder or file name, what users of the linking site see when they click that link to your site can make or break their first experience with you.

Does your site reveal the wise character of forethought to users who click broken links or mistype URLs, or has that opportunity been squandered? Put another way, do you have a custom 404 error message page in place?

A custom 404 error message page prevents web browsers from otherwise showing a stark, empty, generic white page rudely stating “404 – File Not Found”. As user experiences go, this is pretty much rock bottom. This is the mother of all bounce-inducing events.


Create a custom 404 page

Creating, posting and configuring your web server to use a basic 404 error message page is easy, and I’m going to show you how. But first I do have a couple of caveats that I have to address before I go on:

  1. Typically most custom 404 error pages are static pages that are used for site-wide 404 errors, and that is what I’m going to cover in this post. However, there are technology options available that enable webmasters to implement dynamic 404 error pages. However, that’s more of a developer-based topic, and frankly, this is not a developer column.
  2. Since the vast majority of websites run on Apache, and that system is super-easy to configure for custom 404 error message pages, I’m focusing on that platform for this discussion. For users interested in creating the same effect on a Microsoft Internet Information Services (IIS) web server, I’m going to point you to a post published by Bing Webmaster Center and authored by a noted SEO expert (:-) that contains explicit UI instructions for configuring custom 404 pages on multiple versions of IIS, and even includes a code snippet for the IIS 7 web.config file. I personally endorse it!

Content to include in a custom 404 page

The first step to consider with regard to setting up a custom 404 page is to build the page file itself. This is a very important step because when this page appears, it is your one chance to keep an otherwise unsatisfied customer on your site. Your good work here can stop a bounce in its tracks! What users find in your custom 404 page will make or break their desire to continue working with your site when the content they expected to see fails to appear.

Custom 404 pages are meant to replace the jarring, generic 404 error message pages shown in the browsers. As such, make your custom 404 page clearly identifiable as a page from your site. Make it a welcoming place, a useful resource, and help users find the content they originally sought. Here are some wise considerations for building your custom 404 page file:

  • Use your site’s standard page template. Make the page appear to be thematically part of your site content by using the same page template used elsewhere on your site. Use the same color scheme, background, theme, etc. If you later update your site design, remember to update your custom 404 page as well. This page is often a user’s first experience with your site, and you want to make it inviting to explore.
  • Include the site navigation scheme. As part of making the custom 404 page appear to be a regular page on your site, be sure to add the standard navigation menu bar/column with links to the home page and other key pages of the site. If you have a site logo at the top of the page, make sure that links to the home page as well.
  • Add a site search box. This is an easy element to add and one that is extremely useful to users who land on the custom 404 page. They came to this page because they are lost within your site; help them find their way to the destination content. Adding a custom site search box is easy to do with Google.
  • Link to your HTML sitemap. Assuming you have an HTML sitemap built (and note I’m not talking about your XML Sitemap!), offer a clear link to that file so users can find the page they want as quickly as possible. The faster they get off of the custom 404 page, as long as it’s not a bounce, the better it is as a user experience.
  • Add a friendly message. Be concise but clear. A friendly message apologizing for the error and inviting the user to search for their desired content is all you need to say. Write something like, “Oops! The page you wanted is not here. We’re really sorry for the trouble, so let us help you find what you were looking for.” Helpful empathy can go a long way.
  • Be creative! Show everyone what makes your site special. Many site owners invest a lot of creative energy into making their custom 404 page into a “made you smile” experience. That’s a fine strategy, as it mitigates the otherwise bitter taste of disappointment in hitting a broken link. But be sure to include the other elements listed above as well. A humorous image or clever message that doesn’t help the user find the content they wanted is still a failure (perhaps even more so, as it shows the webmaster was clearly thinking about addressing the issue with a custom 404 page but chose to be hip rather than useful). Check out some of the interesting approaches used by sites for their custom 404 pages:
  • Name your file. I prefer short names on non-content files, so something unique and telling to the webmaster, such as 404.html, should do the trick.

Set up the page to work

Once you’ve built your custom 404 page, you need to upload it to your web server (typically through a cPanel tool or an FTP utility), then configure Apache to use it when a missing file is requested. I suggest uploading the file to the root, but technically it makes no difference where it lives. You just need to note where it lives in the site’s directory structure for the implementation.

Apache servers use a configuration file called .htaccess (yes, the file name starts with the dot!), located in the root directory of the site, to manage configuration settings for the site. Implementing a custom 404 error page requires that you edit your existing (or if one doesn’t exist, create a new) .htaccess file. Use the following line of sample code as an example of what to add to the text file (be sure you use the exact relative path and file name, including file name extension, of the file you uploaded to your server):

ErrorDocument 404 /404.html

Notes:

  • Before you create a new .htaccess configuration file, be absolutely sure that one does not already exist (in some cases, it may be hidden from view). You don’t want to overwrite your existing .htaccess web server configuration file with a new one and lose your existing web server settings!
  • You can alternatively add the above ErrorDocument line to the httpd.conf file, which controls the entire Apache web server (and all sites running within it). However, because of the wide scope this file controls, many users on external web hosts won’t have access to this file, but instead will only have access to the .htaccess file.
  • When editing either the .htaccess or the httpd.conf files, only use an ASCII-based text editor, such as Windows Notepad, or a dedicated site management tool, such as a WordPress plugin or a cPanel utility.

Test your implementation

Once the .htaccess file has been edited and saved, go to your browser and type your site’s domain name followed by a non-existent file or folder name (“qwerty123” is my gibberish of choice). You should see your new custom 404 page appear. If not, go back and confirm that the new custom 404 file does exist on the web server, verify its file name, and then confirm the relative path and file name used in .htaccess is correct.


Final thoughts

I have a few final recommendations to offer:

  • Don’t simply redirect 404 errors to the home page. That’s wonky to me. If I had wanted to go to the home page, I would have used that URL. In my opinion, this configuration can be a disconcerting experience and instill in the user a sense that the site is functionally broken rather than merely managing a missing page.
  • Ensure the custom 404 file is not too small. Apparently it’s important to ensure that your custom 404 page is larger than 512 bytes (if you build it as specified above, that shouldn’t be a problem). Reportedly Microsoft Internet Explorer and Google Chrome web browsers may not handle such small custom 404 page correctly and may still show their generic 404 error page tabs. You can test this on the server by running the custom 404 file’s actual URL through the Internet Marketing Ninjas free Load Time Speed Test Tool, which reports the size of the page and all of its content elements.
  • Test the HTTP status code returned for your custom 404 page. Of course, it should be 404. But you’d be surprised at how many sites are misconfigured and use some sort of misconfigured redirect to the custom 404 page that then generates a 200. Search engines note the 404s they get when crawling and will start deindexing broken links. If your custom 404 page returns a 200, your site’s indexed content will include a lot of broken links in the search index, and that’s not helpful to anyone. To run your test, use the Internet Marketing Ninjas free HTTP Response Code Checker tool, type your site’s domain name followed by a non-existent file or folder name, and then click Ninja Check. The tool will show you the HTTP status code returned for your custom 404 page.
  • Get the path and file name right. Lastly, ensure you get the relative path and file name of the custom 404 page file correct in the .htaccess code. Otherwise, if the web server can’t find your custom 404 file, it’ll generate a 404 error for that and then, as configured, attempt to load the custom 404 file again, which it cannot find, and end up in a processing loop. Not good.
  • Capture common 404s. One more bonus thought: if there are a lot of external broken links pointing to your site using the same bad URL (dig into your analytics to see which URLs brought visitors to your site), set up a 301 redirect for that URL to the page that best matches the intention of the intended page (as best as you can determine, anyway). That way, customers never even have to see a custom 404 broken link page, no matter how creative it may be.

Reveal the good character of your site by anticipating the occasional needs of users who mistype URLs or click broken links with a custom 404 page for your site. It’s your best chance to keep them on your site and earn that conversion.