Thursday, October 22, 2009

Smarter 404 with embeded Google Search Widget

When I posted on the Yahoo! Web Analytics forum to announce the availability of the free Web Analytics Maturity Model paper, the post included this text: "the paper at http://immeria.net/wamm." (notice the dot). The link was broken because of the way Yahoo! parses text to automatically build links.


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}")
The rest of the code simply handles and render the Google Search widget. In most cases, the automated search will offer some meaningful links destinations. In the worse case, the visitor has a neat search box and the site navigation to find their way around.

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
Comments, additional ideas and any feedback is welcomed!
Post a Comment