Step 1: Use custom 404 page
The first step to improve broken links handling (404 errors) is to modify your web server configuration to point to a custom page handler instead of the default, very technical and dull error. For example, doing this on an Apache-based web server is as simple as adding the line "ErrorDocument 404 /http404.htm" to a file named .htaccess in the root folder of the site.The specifics of your server configuration isn't the goal of this post. Contact your IT department or search for "custom 404 page" and similar keywords for additional help.
Step 2: Make a smarter 404 page
The custom 404 page handler is just another HTML page, so it can include your site navigation, brand and useful content. Often, the 404 page will have a de-dramatizing tone and some people have gone to great extent to make funny 404 pages.Beyond trying to be fun, you want your visitors to get to your content. Two things are invaluable in this context: the referrer and the landing page URL. The next step is to make your visitors life easier by providing a path to the right page, or at least try... To do so, you can add a smart Google Search Widget:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {"nooldnames": true});
function OnLoad(){
var searchControl = new google.search.SearchControl();
var siteSearch = new google.search.WebSearch();
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("yoursite.com");
searchControl.addSearcher(siteSearch);
searchControl.draw(document.getElementById("searchcontrol"));
searchControl.execute(location.pathname.replace(/\//g, ' '));
}
google.setOnLoadCallback(OnLoad, true);
</script>
<div id="searchcontrol"/>
The important elements are:
- setSiteRestriction("yoursite.com"): forces the search to be contained within your site (change it to your own site domain)
- location.pathname.replace(/\//g,' '): replace the landing URL slashes with spaces so you can have a more meaningful search keyphrase
- You might want to add a stylesheet element to your page so the Google Search Widget is larger (something like ".gsc-control{width:480px !important}")
Feel free to visit http://immeria.net/custom/404page to get an example. Do a "view source" to see how I made mine.
Step 3: Analyze & Improve
Don't forget to put web analytics tags on that page so you can collect information about broken links. For Google Analytics, this is as simple as doing "_trackPageview('/404/'+location.pathname)" instead of the default "_trackPageView()" call. Create a custom segment to view all reports for broken links pages, look at the Content/Content Drilldown report, understand the source of traffic, what your visitors were looking for, and how you can further improve your site based this information:- If lots of traffic comes from a couple of sources, you might be able to ask them to fix their links
- If those errors are the result of a site redesign, you might want to use redirections to map the old page URLs to their corresponding locations