Did you ever notice on big sites like www.microsoft.com, if you reach a page that doesn't exist, they don't just say "Sorry, 404.", they give you a list of pages that are similar to the one you requested. This is obviously very nice for your users to have, and it's easy enough to integrate into your site. This article provides source code and explains the algorithm to accomplish this feature. Note: the real benefit of the approach outlined here is the semi-intelligent string comparisons.
The need for this grew out of a client of mine who was changing a content management system, and every URL in the site changed, so all the search engine results came up with 404 pages. This was obviously a big inconvenience, so I put this together to help users find their way through the new site when arriving from a search engine.
See it in action
Go to this page (which doesn't exist), and the 404 page should give you a list of pages that have quite similar names.
- Your web site must be set up so that 404 pages get redirected to a .NET aspx page.
- When the 404 page is accessed, you need to know which page was requested. Using web.config, you can set up 404 error codes to go to /404.aspx, where it will tag on the requested page to the querystring. The source code here assumes you have this approach, but you can obviously change it to your own needs; simply change the
Why Regular Expressions are not enough
To compare strings, you can use
System.String.IndexOf or you can use regular expressions to match similarities, but all these methods are very unforgiving for slight discrepancies in the string. In the example URL above, the page name is December15-ISERCWorkshoponTesting.html but under the new content management system, the URL is December 15 - ISERC Workshop - Software Testing.html, which is different enough to make traditional string comparison techniques fall down.
So, I looked around for a fuzzy string comparison routine, and came across an algorithm written by a guy called Levenshtein. His algorithm figures out how different two strings are, based on how many character additions, deletions and modifications are necessary to change one string into the other. This is called the 'edit distance', i.e., how far you have to go to make two strings match. This is very useful because it takes into account slight differences in spacing, punctuation and spelling. I found this algorithm here where Lasse Johansen kindly ported it to C#. The algorithm is explained at that site, and it is well worth a read to see how it is done.
Normalizing the Scores
I originally had a problem with the algorithm because it gave surprising results for certain situations. If the 404 page request was for 'hello' and there is a valid page called 'hello_new_version' and another valid page called 'abcde', then the 'abcde' page gets a better score, because fewer changes are needed to make it the same as hello (just change the five characters in 'abcde' into 'hello'). This is five changes, even though the 'hello_new_version' is semantically a better match. Fortunately, a kind newsgroup participant named Patrice suggested that I divide the score by the length of the comparison string, to normalize the results. This worked perfectly, and I found that a score between 0 (perfect match) and 0.6 (a good match) is worth including as a suggested page. You can change this value in the
ComputeResults() method if you want to make it more or less flexible.
private void Page_Load(object sender, System.EventArgs e)
The above code shows the four key tasks that make up this solution. Each method is explained below:
Using the code
GetRequestedUrl() simply figures out which page was requested. In this example, it is assumed that your web.config contains the following:
<error statusCode="404" redirect="/404.aspx" />
In this example, the querystring on the 404.aspx page contains the requested URL.
private void GetRequestedUrl()
if(this.requestedUrl == "") return;
SetUpSiteUrls() is where you load in all the pages in your site. In my content management system, I have an XML file with all the names, so I do an XPath query and add in the names one by one to the
private void SetUpSiteUrls()
this.validUrls = new ArrayList();
ComputeResults() iterates through the URLs you set up in
SetUpSiteUrlsreturns and attaches a score of how close each one is to the requested URL. It also sorts the results and discards any that are not a close match.
private void ComputeResults()
ArrayList results = new ArrayList(); foreach(string s in validUrls)
if(s == "") continue;
double distance = Levenshtein.CalcEditDistance(s,
this.requestedUrl); double meanDistancePerLetter = (distance / s.Length);
if(meanDistancePerLetter <= 0.60D)
"<a href='" + s + ".html'>" + s + "</a>"));
Important note: One thing to definitely look out for is the inner-most line of the above code:
results.add(new DictionaryEntry(...). I am adding in a HTML hyperlink, with the name of the page + ".html". This may not be a correct link in your web site, because you may have removed the folder part of the URL while populating the
ArrayList. You may need to expand the data structures used in this code to include full URL for each page.
BindList() simply binds the
ArrayList of results to the
DataGrid, which is configured to display them in a bulleted list.
private void BindList()
if(results.Count > 0)
"The following pages have similar names to <i>" +
this.requestedUrl + "</i>";
this.DataList1.DataSource = results;
this.lblHeader.Text = "Unable to find any pages in this site that" +
" have similar names to <i>" + this.requestedUrl + "</i>";
The 'magic' in the code is all done with the
Levenshtein.CalcEditDistance method which returns the distance between two strings. It is included in the source.
WinForms Test Application
If you're interested to test out the Levenshtein algorithm, I've written a Windows Forms application that lets you enter a string (e.g., a page URL) and also a list of strings to compare it against (e.g., all the page URLs in your site), and it gives you the 'edit distance' scores. Download here - 7.04 Kb.
I think this is a great feature because it adds significant value to the user experience for a web site. Please feel free to comment below if you have any questions, find any bugs, improvements, or if you can't get it working, or if you use it in a novel way.