Serving up a Custom 404 October 17, 2007

Posted by headwinds in Accessibility.
trackback

In order to clean up the experience when a user encounters a bad link, the site could be quite smart, and respond with a custom 404 page that parses out the requested page from the url, and then run a search on that missing page topic.

For instance, if the missing url is http://www.myrobotcollection.com/astroboy.html

Besides sending a nasty email to the owner flaming him for losing such a vital page, we can serve up an alternative page.

As the page is hosted on a Microsoft IIS web server, I can configure a custom 404 using IIS and C# to parse out the “astroboy” search term and state that the page no longer exists. I can then provide a few links to other pages from the search on “astroboy”, and hopefully find the missing page if it happened to get renamed to “astroboyRocks.html” or completely changed to “Tezuka_Pinocchio.html”

If we cannot go with server-side scripting, another option is handle the error in the client. In his article, The Perfect 404, Ian Lloyd provides an elegant javascript example of how to react to a missing link ( Full Article ).

In my case, I did not something so pretty, and decided to dumb down Ian’s solution by rewriting it to just capture the last term in the url and chop off the extension:

// let’s see what they were searching for …
var myURL=document.URL.toLowerCase();
var myMissingPageName = “”;
// find search term
var urlArray = new Array();
urlArray = myURL.split(“/”);
var myMissingPageNum = urlArray.length – 1;
var myMissingPageHTML = urlArray[myMissingPageNum];
var myMissingPageArray = new Array();
myMissingPageArray = myMissingPageHTML.split(“.”);
var myMissingPageName = myMissingPageArray[0];
// ok found the last term and took off the extension…
// now I need to post it the ASPX which will respond with the custom 404 page
// document.write ‘http://www.clientsdomain.com/SearchResults.aspx?txtSearch=’ + myMissingPageName;

tip: while writing this code, I found inserting alert(myVariableName); after each line useful for tracing in the browser.