ASP.NET MVC and Clean SEO Friendly URLs

18 March 2009 - 1:30 AM / by Dominic Pettifer. 15 Comments for ASP.NET MVC and Clean SEO Friendly URLs.

Technical Article - I show you how to generate SEO friendly URLs in ASP.NET MVC using the actual title/name of the record or item (product/blog name etc.) instead of the ID. That way we can have nice looking URLs that look like /products/123/apple-ipod-nano-4gb instead of /products/detail/123. The trouble is by default, ASP.NET MVC Html helpers don’t always encode the URL properly. Also how do we deal with updating the title, and old broken links?

SEO Friendly URLs

Believe it or not, search engines such as Google will pay attention to keywords contained in the URL, so that a URL like gadgetshop.com/products/123/apple-ipod-nano-4gb will rank higher in the search engines than a URL that looks like gadgetshop.com/showProduct.aspx?id=123. Also if people post links to your site in message boards/blogs/MyFace pages etc. they tend to paste the URL in directly. Other people will see a hyperlink with the text http://www.gadgetshop.com/products/123/apple-ipod-nano-4gb and can easily imagine where the page might lead to (a page to buy a 4GB iPod Nano), whereas the URL http://www.gadgetshop.com/showProduct.aspx?id=123 doesn't give any hint as to where it might lead to. So, nice clean URLs are clearly beneficial.

One of the major benefits of ASP.NET MVC is that it allows us truly dynamic URLs via its Routing system. We could declare a new Route like this:

routes.MapRoute(
    "ViewProduct",
    "products/{id}/{productName}",
    new { controller = "Product", action = "Detail", id = "", productName = "" }
);

...and in your ProductController class...

public ActionResult Detail(int? id, string productName)
{
    Product product = IProductRepository.Fetch(id);
    return View(product);
}

Plenty of tutorials on ASP.NET MVC declare routes for detail pages as /Product/View/{id} which doesn't include any useful SEO indexable content in the URL. So I thought for this blog, I would declare the View Blog Route as /Blogs/{id}/{blogTitle} (Note: I'm currently rewriting this blog software in MVC).

URL Encoding Problems

Things were fine until I hit a snag with some of the titles for my blogs that contained funny characters. For instance, "JavaScript/CSS and Custom Controls" (the slash causes MVC routing system to think it's a folder), and "Get a<HEAD> with ASP.NET 2.0" (HTML brackets) were causing problems.

I was doing things properly and using Html.ActionLink helper method:

<%= Html.ActionLink(item.Title, "View", "Blog",
    new { id = item.BlogId, blogTitle = item.Title }, null)%>

...but it just wasn't encoding the special characters properly. Limitation with ASP.NET MVC? I'm not sure, someone please enlighten me!

Solution

I wrote a simple method that encodes the URLs into a nice, safe, SEO friendly URL format:

public static class UrlEncoder
{
    public static string ToFriendlyUrl (this UrlHelper helper,
        string urlToEncode)
    {
        urlToEncode = (urlToEncode ?? "").Trim().ToLower();

        StringBuilder url = new StringBuilder();

        foreach (char ch in urlToEncode)
        {
            switch (ch)
            {
                case ' ':
                    url.Append('-');
                    break;
                case '&':
                    url.Append("and");
                    break;
                case '\'':
                    break;
                default:
                    if ((ch >= '0' && ch <= '9') ||
                        (ch >= 'a' && ch <= 'z'))
                    {
                        url.Append(ch);
                    }
                    else
                    {
                        url.Append('-');
                    }
                    break;
            }
        }

        return url.ToString();
    }
}

Notice the "(this UrlHelper helper," part? This is an extension method so we can access it in our view using:

<%= Url.ToFriendlyUrl(item.Title) %>

It works on a white-list principle, allowing all 0-9 and a-z characters through, dealing with a few special cases, and converting everything else to -hyphens-. You'll notice that spaces are being converted to hyphens as well, and you might be tempted to use _underscores_ instead. Don't! There are sound SEO benefits for using hyphens in that search engines bots treat them as spaces. "Get a<HEAD> with ASP.NET 2.0" although it gets converted to "get-a-head--with-asp-net-2-0", search bots will treat it as "get a head with asp net 2 0", providing some nice indexable keyword content.

Now we can change our HTML ActionLink helper method to:

<a href="<%= Url.Action("View", "Blog",
   new { id = item.BlogId, blogTitle = Url.ToFriendlyUrl(item.Title) }) %>">
   <%= Html.Encode(item.Title) %>
</a>

Why keep the ID in the URL?

You might be wondering why we carry the id in the URL, why not just have the URL as /Blogs/get-a-head--with-asp-net-2-0. Well first, when we encode the blog title in the URL, we lose a bit of information. It would be difficult to match "get-a-head--with-asp-net-2-0" to the actual title "Get a<HEAD> with ASP.NET 2.0" stored in the database. We could easily overcome this by storing the fully encoded URL in the database as a separate field and search on that. That would certainly work, except if the URLEncode function was later updated and database values weren't synced up properly to the new way the function was encoding URLs.

But one of the biggest reasons is performance. Lookups performed on Primary Key IDs in databases are a lot faster than searching on a VARCHAR field.

Updating the URL Title

We also have the benefit that we can tell search engines if the blog (or indeed product) title changes. If we have the URL /Products/123/ipod-nano, Google Bot goes about indexing the site and puts the page /Products/123/ipod-nano into its index, and users add the link to forums, theirs blogs and so on. Later the administrator updates the product title to something a little more descriptive so the URL is now /Products/123/apple-ipod-nano-4gb-black-3rd-generation.

But wait, we now have a bunch of old URLs all over the place, in blogs/forums etc. and on Google's index that point to the old page /Products/123/ipod-nano. Broken links!? Not at all, because the ID '123' is still the same, Primary Key IDs never change, and this is what the database lookup is performed on, so it can still display the correct product, no need for any 404. We can programmatically detect if the product title URL is different from the one stored in the database, and issue a 301 response if it is.

A 301 response code is a 'Permanent Redirect' response (another response code similar to 200 OK, or 404 Page Not Found), it basically tells Google that the page has 'permanently' moved to /Products/123/apple-ipod-nano-4gb-black-3rd-generation if it tries to re-index /Products/123/ipod-nano again, and Google will update its index accordingly. Note that calling Response.Redirect(); in code, issues a 302 response code, which is a 'temporary' redirect (page has been temporarily moved), these are no good as google won't follow them.

Finally, users clicking on a /Products/123/ipod-nano link in a blog or bulletin board will be harmlessly redirected to the correct URL, so when they try to bookmark, or copy/paste the URL from the address bar themselves, it'll be the correct one. Here is some code on how you how could do this from your Controller Action:

public ActionResult Details(int? id, string productTitle)
{
    Product product = ProductRepository.Fetch(id);

    string realTitle = UrlEncoder.ToFriendlyUrl(product.Title);
    string urlTitle = (productTitle ?? "").Trim().ToLower();

    if (realTitle != urlTitle)
    {
        Response.Status = "301 Moved Permanently";
        Response.StatusCode = 301;
        Response.AddHeader("Location", "/Products/" + product.Id + "/" + realTitle);
        Response.End();
    }

    return View(product);
}

ASP.NET MVC and Clean SEO Friendly URLs

SEO Friendly URLs

URL Encoding Problems

Solution

Why keep the ID in the URL?

Updating the URL Title

15 Comments on "ASP.NET MVC, SEO & URLs"

Re:

RE: ASP.NET MVC, SEO & URLs

RE: RE: ASP.NET MVC, SEO & URLs

RE: ASP.NET MVC, SEO & URLs

RE: ASP.NET MVC, SEO & URLs

RE: ASP.NET MVC, SEO & URLs

RE: ASP.NET MVC, SEO & URLs

RE: RE: ASP.NET MVC, SEO & URLs

RE: ASP.NET MVC, SEO & URLs

RE: ASP.NET MVC, SEO & URLs

Old URL Would Redirect to New one

RE: ASP.NET MVC, SEO & URLs

RE: ASP.NET MVC, SEO & URLs

Try a 404

RE: ASP.NET MVC, SEO & URLs

Leave a Comment

Random Image

Quick Poll

Latest Tweets