Angular Canonical URL

This guide explains how to set Canonical URL links in Angular. Unlike the Meta Service & Title Service, the Angular does not have a Link Service. But we can manipulate the DOM using the dom object, which we can get by injecting the DOCUMENT DI Token. This token returns the dom object when the app runs on the browser. We can make use of it to add or update the Canonical URL in our app.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Canonical URL

A canonical URL is a way to inform search engines about duplicate content on our site. There could be various reasons, where we may end up with duplicate content.

For Example, the mobile Samsung Galaxy A51 is available in three colors black, white & blue. We usually use the query strings in Angular to achieve this.

The search engines see all of them as three different pages and index them. It will also mark them as a duplicate content. Although Google does not penalize you for this, your page may lose ranking.

The best way to handle this is to let Google know that you have duplicate content. Also, let it know which one of the above three is to be considered as original content.

We create a canonical tag by inserting the following tag in the head section of the HTML

To insert a link tag, we need to access the DOM element. The Angular provides a helper object Document for this

Document DI Token

A DOCUMENT is DI Token representing the main rendering context. In a browser, this is the DOM Document.

When you inject the DOCUMENT, the Angular injects the instance of the DOM Document when you are running on the browser. If you are using the Server-Side Rendering, then you can use the libraries like the domino, which will provide DOM in the Node Server.

We learned how to manage the title & meta tags using the Meta Service & Title Service. Both these services use the Document to manipulate the title & meta tags.

To make use of the DOCUMENT, you need to import it from the @angular/common library

And then inject it into the component using the DOCUMENT DI token as shown below.

How to Set canonical URL in Angular

The following code shows how you can add the rel="canonical" tag using the DOM Document.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

First, we get the reference to the head section of the HTML

Next, we look for the canonical tag under the link tag.

If the tag does not exist, we add the tag under the head section

Finally, we update the canonical tag, with the url

Dynamically Updating Canonical URL

We can make use of the Route to dynamically update the canonical URL. We showed how to set the Title dynamically using the Title Service. You can also refer to Dynamic Meta Tags in Angular, which employs a similar technique. We use the same technique to update the canonical URL.

First, update the routes and add the canonical tag in the Route Data for each route.

In the app.component subscribe to the NavigationEnd router event. Find the current activated route by recursively navigating through route tree (getChild method). Read the canonical URL Route data from the ActivatedRoute.

The hostName is hardcoded in the example. You can also create a config file in angular and add the hostname property and read it using the APP_INITIALIZER

Canonical as Service

The other option is to create the SEOService and invoke it from the ngOnInit of each component.

And call it any component, where you wish to set the canonical URL

Reference

  1. DOCUMENT
  2. Consolidate Duplicate URL’s
  3. What is a canonical URL

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top