SEO Friendly Routes with ASP.net MVC 3

Share on facebook
Share on twitter
Share on linkedin

Version:1.0 StartHTML:000000226 EndHTML:000019314 StartFragment:000003344 EndFragment:000019252 StartSelection:000003344 EndSelection:000019246 SourceURL:https://www.deliveron.com/blog/seo-friendly-routes-aspnet-mvc-3/ Deliveron :: SEO Friendly Routes with ASP.net MVC 3

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. Having a high search engine ranking is very important for businesses to have. If you are an online shopping business, you want to try and reach high in the search engine rankings to gain better visibility for the sale of your products, shopify seo can help your business with this. 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. This is particularly true in newer markets, such as the e-cigarette industry for instance. To learn more about how SEO can be useful for vaping businesses, check out this guide to Vape Store SEO. Today, 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
@using Mvc.Helpers


   
   @foreach( var product in Model )
   {
      
   }
Edit Product Name
@Html.ActionLink("Edit", "Details", new { id = product.ProductID, productName = product.ProductName.ToSeoUrl() }) @product.ProductName

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.

More to explore