In angular 2 how can I make the canonical tag dynamic per page

Question

In angular 2 how can I make the canonical tag dynamic per page.

This is my index page tag for it:

  <link rel="canonical" href="https://mywebsite.co.uk" />

How can I make it dynamic e.g. if on blog page it should look like this at run time:

  <link rel="canonical" href="https://mywebsite.co.uk/blog" />

I'm using angular version 4, webpack and typescript with ng2-metadata to change the title, description and keywords of all my urls.

I just need the canonical tag to change for the seo google bot.

@DavidL for the canonical tag I tried removing it and adding it. And webmaster tools still isn't happy. Not sure how to make it dynamic to be honest in angular version 4 — AngularM, Apr 20 '17 at 17:19

score 0 · Answer 1 · answered Jun 06 '18 at 16:02

I implemented a service that is called in the ngOnInit functions of my page components:

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

@Injectable()
export class LinkService {

  private link: HTMLLinkElement;

  constructor(@Inject(DOCUMENT) private doc) { }

  createLinkForCanonicalURL() {
    if (this.link === undefined) {
      this.link = this.doc.createElement('link');
      this.link.setAttribute('rel', 'canonical');
      this.doc.head.appendChild(this.link);
    }
    this.link.setAttribute('href', this.doc.URL.split('?')[0]);
  }
}

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

In angular 2 how can I make the canonical tag dynamic per page

1 Answers1