how to add canonical link in angular 5

Question

How to add canonical link in angular 5 dynamically

<link rel="canonical" href="http://foobar.com/gotcah"/>

Answer 1

Facing the same issue I searched around and found a guide on how to do this:

https://www.concretepage.com/angular/angular-title-service-and-canonical-url

It is using Angular 6 though, but I think it is backwards compatible to 5.

It basically suggests creating a Service (SEOService) for facilitating creating the canonical link whereever it is injected. It injects the Angular DOCUMENT object into the service, and creates the canonical link element as a HTMLLinkElement.

It takes care that the solution is prerendering/serverside rendering friendly - so if you are looking to better control your SEO for the pages in your application, I believe that this is what you want.

Here's a minimal rewrite of the service from the article:

seo.service.ts

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class SeoService { 
   
  constructor(@Inject(DOCUMENT) private doc) {}
  
  createLinkForCanonicalURL() {
     let link: HTMLLinkElement = this.doc.createElement('link');
     link.setAttribute('rel', 'canonical');
     this.doc.head.appendChild(link);
     link.setAttribute('href', this.doc.URL);
   }
} 

And here's a rewrite of the component consuming the service:

data.component.ts

import { Component, OnInit } from '@angular/core';
import { SeoService } from './seo.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html'
})
export class DataComponent implements OnInit {
  
  constructor(private seoService: SeoService) { }
  
  ngOnInit() {
    this.createLinkForCanonicalURL();
  }
  
  createLinkForCanonicalURL() {
    this.seoService.createLinkForCanonicalURL();
  } 
}

You could simply have the createLinkForCanonicalURL() method take a optional parameter of the URL that you would want as a canonical reference for the page, for full control.

Answer 2

To destroy existing link call this just before creating new one:

destroyLinkForCanonicalURL() {
    const els = this.document.querySelectorAll('link[rel=\'canonical\']');
    for (let i = 0, l = els.length; i < l; i++) {
      const el = els[i];
      el.remove();
    }
  }

Works perfect with this solution.

It also prevents duplicating links in SSR mode.