Custom routes in Umbraco for better SEO

We all want lots of visitors on our sites, that's why we have to keep Google (and other search engines) happy when we are creating our site. To make our content more searchable we want to have the URL's to our pages as descriptive as possible. In this post I'll show you how to create custom routes in Umbraco that have the creation date and the name of the node in de URL (but you can use anything you want).

The setup

For this example I have created multiple websites with different domains. For example the first site would have a domain site1.com and the second site's domain would be site2.com. On all these websites I want to be able to show my posts. I couldn't just create a posts page and add posts under that node because I would have to repeat this for my other site(s). That's why I have created a separate container under the root node which holds all my posts. This way the posts can be shared across all websites. For example Post 1 would be available on both site1.com/post/21-01-2017/Post-1 and on site2.com/post/21-01-2017/Post-1.

To achieve this we have to define a custom route in Umbraco, let's get started!

Defining the route

First of all, we need to tell our application which route will be used to display our page. Let's create a new static class "CustomRoutes".

Here I have defined one route which will be used to display our posts using the following pattern: post/{date}/{name}. Which means our actual URL might look something like this: post/21-01-2017/My-post. Great, that's exactly what we want!

In addition we have to supply a RouteHandler for the defined route. This class is responsible for associating the correct node to the route. Let's create one.

Adding a custom routehandler

To create the routehandler, we have to create a new class which derives from UmbracoVirtualRouteHandler, and implement the FindContent method.

In the "FindContent" method we have to look for the PostDetail page. But since we have more than one site, we have to find the correct site first. I have written a simple function which gets the correct homepage based on the URL. When we have the correct homepage we can simply find the Details page in its children.

Wiring up

Now we have defined our route, but the application doesn't know about it yet. We'll need to add the following code to the UmbracoStarup.cs file inside the OnApplicationInitialized method:

As you can see in the GetPost method, I have used some extension methods to make my life a bit easier. For those of you who are interested, you can find them below. Additionally, I created a PostViewModel which keeps track of our PostDetail page and has a property for the post. We can use this viewmodel to display the required data in our view.

Note: If you are updating your existing site, make sure you keep your original routes and redirect them to the new ones using a 301 redirect. You don't want to make Google or other search engines angry.