SEO and Human-friendly URLs for your ASP.NET MVC Site

The Problem

Lets take a look at the problem we are trying to solve:

Is it easy to understand what this link points to? Well because I have named my controllers and actions approportaley you can easily derive that it is a blog post, but what is the number 1? For developers we all know that is the id for the particular post that the route is going to. But what if you share this link with someone or a search engine tries to index it? It may not be, and often it isnt, obvious what the article is about prior to navigating to it. This reduces the chances that a user will navigate there and will lower your SEO rankings futher limiting the potential reach of your article(s)!

Now lets look at a SEO and Human friendly link:

Any idea where this link takes you just by looking at it? Well it appears that it will be taking you to a blog post with a topic of hello world im blogging. It is easier to understand what the post is about without even going to the link. This will greatly improve your SEO rankings and increase the chances that a user clicks on the link if it's a topic that they are looking for.

Let's take a look at how to implement this in your ASP.NET MVC (.net framework) Application!

The Solution

I will show you how I implemented it in my blog application. To get some setup out of the way, I am using ASP.NET MVC (.NET Framework) - C# with Entitiy Framework. The solution can be applied to many different setups with some slight modifications. If you need assistance with your specific setup I can help, just contact me below :)

Create custom URL

In the current iteration of my blog (MVP), I have created a BlogPost Metadata class with a partial class that links to the entities class built by Entity Framework. Inside the Metadata partial class, I have created a custom property to generate the URL. I found this code on https://stackoverflow.com/questions/2920744/url-slugify-algorithm-in-c
**As a side note, if you are not a "Google Pro" or "Stackoverflow Pro" searcher I will have an upcoming article on how to best search for solutions.

As you can see I have added the GenerateSlug() and RemoveAccent() methods found in the stackoverflow question. These custom properties added to the BlogPost class will take in the id and title properties and return a properly formatted string.

Now that we have the custom properties built into our BlogPost class we can use that method inside of our blog index view.

Now that we have access to the GenerateSlug() method we can pass that to the id paramater in the URL. The new URL will look like:

Great! Now our application is taking in the title of each post and applying a SEO friendly link paramater. The only problem now is that our routes are not configured to receive this and will error out because it cannot figure out the id paramater as a string. This is because the route expects an integer id and when it sees a string it will return null which doesnt exist in the database.

Let's solve this with one last thing: Parameter Binding.

Parameter Binding

In order to fix or routes to handle this new string version of the URL we need to do a few things. First we need to create a utility that will inherit from route and override the GetRouteData() method. In the case that the route is not null we will use a regularexpression to pull out the id value from the string and return the newly created RouteData object.

Once that is complete we will now need to add a new route to the RouteConfig class. It is very important that the new route be placed above, or before, the Default routes. This is because when the code is executed the first route to match will be ran. If you do not have the custom route first it will never be matched an only the default route with just a id will be matched and fail because the default route does not handle the slug.

The RouteConfig class can be modified as follows:

Once the routes are built your new SEO friendly URLs should work! Also keep in mind because we did not change the default route you can still use the non SEO friendly link to get to the same content!

I hope this helps someone out there make their site more SEO and User friendly!