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.
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.
https://example.com/samsung-galaxy-a51?color="black"
https://example.com/samsung-galaxy-a51?color="white"
https://example.com/samsung-galaxy-a51?color="blue"
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
<link href="https://example.com/samsung-galaxy-a51" rel="canonical">
To insert a link tag, we need to access the DOM element. The Angular provides a helper object Document for this
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
import { DOCUMENT } from '@angular/common';
And then inject it into the component using the DOCUMENT DI token as shown below.
constructor(@Inject(DOCUMENT) private dom) {
}
The following code shows how you can add the rel="canonical" tag using the DOM Document.
updateCanonicalUrl(url:string){
const head = this.dom.getElementsByTagName('head')[0];
var element: HTMLLinkElement= this.dom.querySelector(`link[rel='canonical']`) || null
if (element==null) {
element= this.dom.createElement('link') as HTMLLinkElement;
head.appendChild(element);
}
element.setAttribute('rel','canonical')
element.setAttribute('href',url)
}
First, we get the reference to the head section of the HTML
const head = this.dom.getElementsByTagName('head')[0];
Next, we look for the canonical tag under the link tag.
var element: HTMLLinkElement= this.dom.querySelector(`link[rel='canonical']`) || null
If the tag does not exist, we add the tag under the head section
if (element==null) {
element= this.dom.createElement('link') as HTMLLinkElement;
head.appendChild(element);
}
Finally, we update the canonical tag, with the url
element.setAttribute('rel','canonical')
element.setAttribute('href',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.
const routes: Routes = [
{
path: '', component: FirstComponent, pathMatch: 'full',
data: {
title: 'Title for First Component',
descrption: 'Description of First Component',
ogTitle: 'Description of First Component for social media',
canonical:'/first'
}
},
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.
import { Component, OnInit, Inject } from '@angular/core';
import { Title, Meta, ɵDomAdapter } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter, map } from 'rxjs/operators';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(@Inject(DOCUMENT) private dom,
private router: Router,
private activatedRoute: ActivatedRoute) {
}
ngOnInit() {
const hostName="https://www.example.com"
this.router.events.pipe(
filter(event => event instanceof NavigationEnd),
)
.subscribe(() => {
var rt = this.getChild(this.activatedRoute)
rt.data.subscribe(data => {
//Set Canonical URL
if (data.canonical) {
this.updateCanonicalUrl(hostName+data.canonical);
} else {
this.updateCanonicalUrl(hostName+this.router.url);
}
//You can set the Meta & Title here
})
})
}
}
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
The other option is to create the SEOService and invoke it from the ngOnInit of each component.
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class SEOService {
constructor(@Inject(DOCUMENT) private dom) {
}
updateCanonicalUrl(url:string){
const head = this.dom.getElementsByTagName('head')[0];
var element: HTMLLinkElement= this.dom.querySelector(`link[rel='canonical']`) || null
if (element==null) {
element= this.dom.createElement('link') as HTMLLinkElement;
head.appendChild(element);
}
element.setAttribute('rel','canonical')
element.setAttribute('href',url)
}
}
And call it any component, where you wish to set the canonical URL
import { Component } from '@angular/core';
import { SEOService } from './seo.service';
@Component({
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
})
export class FirstComponent{
const hostName="https://www.example.com"
constructor(private seoService: SEOService) { }
ngOnInit() {
this.seoService.updateCanonicalUrl(hostName+'/first');
}
}
