About Us

SEO Friendly Routes with ASP.net MVC 3

by Travis Ellis 14. March 2011 16:35

One of the most important things for a modern day website is for it to be easily found. If nobody can find your website, then it isn't very useful. One thing you can do to help is by creating URLs that contain useful information. Google will usually rank a site higher with a URL like http://www.northwind.com/products/3/aniseed-syrup compared to http://www.northwind.com/products/3. In addition to being ranked higher by search engines, it is a lot easier for humans to remember as well. I am going to show you an easy way to create these SEO-style routes for your ASP.net MVC 3 applications.

The first thing we need to do in order to get this to work is create a route that will match this pattern:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.MapRoute(
        "ProductDetails",
        "products/{productId}/{productName}", // URL
        new { controller = "Products", action = "Details", productName = UrlParameter.Optional }, // URL Defaults
        new { id = @"\d+" } // URL Constraints
    );
}

What this does is register a route in our application that matches the pattern /products/id/ and optionally /products/id/name. The product name is optional but the id is required and must be an integer.

Now that we have our route in place we need to create the controller that will handle requests that match the route:

public class ProductsController : Controller
{
    public ActionResult Index(int id, string productName)
    {
        // retrieve the product from the database
        Product product = db.Products.Single(p => p.ProductID == id);

        return View(product);
    }
}

This controller action will take in an id and a product name, retrieve a product based on the id and then return the view, passing in the Product data. You might have noticed that the controller isn't using the productName at the moment. Currently, if we have a product that contains spaces, the URL will encode the string like so:

http://www.northwind.com/products/3/aniseed%20syrup

This is far from ideal. Let's go ahead and fix that problem.

public static class StringHelpers
{
    public static string ToSeoUrl(this string url)
    {
        // make the url lowercase
        string encodedUrl = (url ?? "").ToLower();

        // replace & with and
        encodedUrl = Regex.Replace(encodedUrl, @"\&+", "and");

        // remove characters
        encodedUrl = encodedUrl.Replace("'", "");

        // remove invalid characters
        encodedUrl = Regex.Replace(encodedUrl, @"[^a-z0-9]", "-");

        // remove duplicates
        encodedUrl = Regex.Replace(encodedUrl, @"-+", "-");

        // trim leading & trailing characters
        encodedUrl = encodedUrl.Trim('-');

        return encodedUrl;
    }
}

The above code creates an extension method for the string type and returns an "SEO-encoded" URL using the following steps:

  1. Convert the string to lowercase.
  2. Replace the & symbol with the word and
  3. Remove unwanted characters by replacing with a space (currently only ')
  4. Replace all other characters other than letters/numbers with a -
  5. Remove duplicate -'s from the string (we don't want aniseed--syrup, etc.)
  6. Remove leading/trailing -'s from the string

Now, a string like "AnIseeD Syrup" will be converted to "aniseed-syrup". Now we can modify our controller to make use of this functionality.

public class ProductsController : Controller
{
    public ActionResult Index(int id, string productName)
    {
        // retrieve the product from the database
        Product product = db.Products.Single(p => p.ProductID == id);

        // make sure the productName for the route matches the encoded product name
        string expectedName = product.ProductName.ToSeoUrl();
        string actualName = (productName ?? "").ToLower();

        // permanently redirect to the correct URL
        if( expectedName != actualName )
        {
            return RedirectToActionPermanent("Index", "Products", new { id = product.ProductID, productName = expectedName });
        }
        
        return View(product);
    }
}

This updated controller will do an HTTP 301 redirect if the product name in the URL does not match what it should be, or if it wasn't provided at all. A 301 redirect will tell a search engine to permanently re-index the content. If the user types http://www.northwind.com/products/3 or http://www.northwind.com/products/3/aniseed or any other URL other than http://www.northwind.com/products/3/aniseed-syrup then it will automatically redirect them to the correct one.

The final piece to wire this all up is to make sure your views are creating the proper links. We don't want the requests to redirect by default, otherwise every request will make two calls to the database. Here I am going to use the new MVC 3 View Engine Razor, but it could be done just as easily using the Web Forms View Engine.

@model IEnumerable<Models.Product>
@using Mvc.Helpers

<table>
   <tr>
      <th>Edit</th>
      <th>Product Name</th>
   </tr>
   
   @foreach( var product in Model )
   {
      <tr>
         <td>@Html.ActionLink("Edit", "Details", new { id = product.ProductID, productName = product.ProductName.ToSeoUrl() })</td>
         <td>@product.ProductName</td>
      </tr>
   }
</table>

That's all you need to do. Create an ActionLink and make sure you pass the productName value by calling our ToSeoUrl() helper. Hopefully you found this technique as helpful as I did.