We recently implemented custom canonical tags for our customers.  Many of our customers have several domain names that point to a single site.  They wanted to be able to set a canonical domain name for the site and sometimes override the canonical url per page.

Our Solution 

This is a pretty easy problem to solve.  Here's what we decided on.

1. Setup a site setting to allow a user to set the site canonical domain name
2. Create a page setting to allow a user to override the canonical url per page.  We decided to allow relative or absolute url canonical overrides per page to allow for the most flexibility.
3. Here's how it works.
   1. If the user sets the canonical domain name but no page override, use the canonical domain name appended with the Umbraco page url.
   2. If the page override is set and is an absolute url, use the absolute url as the canonical tag
   3. If the page override is set and is a relative url, use the canonical domain name appended with the relative url

 Umbraco Document Type Changes

1. Create a textstring field named Canonical Domain Name (alias canonicalDomainName) in your Site Settings.  We usually have a Site Settings tab on the homepage of every site.
   We use the validation regular expression below to ensure the user enters a valid domain name prefixed with http:// or https://
   
   ^(http|https):\/\/([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$
   
   
2. Add a textstring field named Canonical Link Override (alias canonicalLinkOverride) to your master document type.  This setting should be available to all pages.

Code Changes

We created a simple extension method to allow for the Canonical Url to be an extension of IPublishedContent available for Umbraco models.  You can just add this to a class file in your App_Code folder for a simple site or as part of a dll for a more complex project.

public static string GetCanonicalUrl(this IPublishedContent node)
{
	IPublishedContent root = node.Root();
	string canonicalDomainName = root.Value<string>("canonicalDomainName");
	string canonicalUrl = "";
	if (node.HasValue("canonicalLinkOverride"))
	{
		string canonicalLinkOverride = node.Value<string>("canonicalLinkOverride");
		if (canonicalLinkOverride.StartsWith("http")) // absolute url
		{
			canonicalUrl = canonicalLinkOverride;
		}
		else // not an absolute url
		{
			if (canonicalLinkOverride[0] != '/') // correct user entries that don't include a leading slash
			{
				canonicalLinkOverride = "/" + canonicalLinkOverride;
			}
			canonicalUrl = canonicalDomainName + canonicalLinkOverride;
		}
	}
	else if (canonicalDomainName != "")
	{
		canonicalUrl = canonicalDomainName + node.Url();
	}
	return canonicalUrl;
}

View Updates

In your master template, simply add this code.  (Note: We actually add this in a header partial view surrounded by an if not empty string statement.)

<link rel="canonical" href="@Model.GetCanonicalUrl()" />

That's it.  With these simple additions, we added canonical links.