Angular SSR Canonicalization

Question

Am trying to do Angular SSR with canonical URL. AM using the below code, Actually this is working fine with HTTP links. My issue is Canonical url is showing HTTP link and actual my Website is in HTTPS. How to fix this issue..???

let link: HTMLLinkElement = this.doc.createElement('link');
        link.setAttribute('rel', 'canonical');
        this.doc.head.appendChild(link);
        let url = this.doc.URL;
        link.setAttribute('href', url);

Thank you so much. This is the Exact solution for that. I solved the issue by this small code. I don't know why i did'nt think this replace function. — Abijith Ajayan, Oct 31 '19 at 05:06

score 2 · Answer 1 · answered Aug 02 '21 at 17:53

Works for me

constructor(@Inject(DOCUMENT) private document: any) {}

updateCanonical(url: string) {
    const canonicalUrl = this.siteUrl + '/' + url;
    const head = this.document.getElementsByTagName('head')[0];
    var element: HTMLLinkElement = this.document.querySelector(`link[rel='canonical']`) || null;
    if (element == null) {
      element = this.document.createElement('link') as HTMLLinkElement;
      head.appendChild(element);
    }
    element.setAttribute('rel', 'canonical');
    element.setAttribute('href', canonicalUrl);
  }

Angular SSR Canonicalization

1 Answers1