Angularで自動でcanonicalタグを挿入する

2021/04/20

Angular

canonicalとは

canonicalとは、正式なURLを検索エンジン側に伝えるURLの正規化を目的としたものです。link要素の中で使われる属性値で、head要素の中で使います。 anonicalを設定すると、複数の重複ページが存在している場合に、検索エンジンに優先させるべきページを伝えることでそれ以外のページは重複ページであることを伝える事ができます。

https://ferret-plus.com/1809 から引用
つまり重複してないコンテンツ（ページ）に対して設定する項目。

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

@Injectable({
  providedIn: 'root'
})
export class CanonicalService {
  constructor(
    @Inject(DOCUMENT) private dom:any,
  ) { }

  setCanonicalURL() {
    this.deleteCanonicalURL();

    const link: HTMLLinkElement = this.dom.createElement('link');
    link.setAttribute('rel', 'canonical');
    link.setAttribute('href', this.dom.URL);

    this.dom.head.appendChild(link);
  }

  private deleteCanonicalURL() {
    let doms = Array.from(this.dom.head.querySelectorAll("[rel='canonical']"));
    doms.forEach((elm:any)=>{
      this.dom.head.removeChild(elm);
    })
  }
}

使用例

@Component({
  ...
})
export class HogeComponent implements OnInit {
  constructor(
    private router:Router,
    private canonicalService:CanonicalService
  ) {
    this.router.events.pipe( filter(event => event instanceof NavigationEnd) ).subscribe(
      (params: any) => {
        this.canonicalService.setCanonicalURL();
      }
    );
  }

  ...
}

Angularで自動でcanonicalタグを挿入する

canonicalとは

タグを生成してHeaderに突っ込むservice

使用例