カテゴリー
【Angular】head要素内に配置したlink要素でCanonical Urlを書き換えるサービスクラスの実装方法
※ 当ページには【広告/PR】を含む場合があります。
2020/04/21
2022/08/10
...
<head>
<link rel="canonical" href="http://example.com/">
</head>
...
canonical url
DOMにアクセスさせる
CanonicalLinkServiceDOCUMENTDIDOCUMENT@angular/commonInject
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class CanonicalLinkService {
constructor(
@Inject(DOCUMENT) private dom
) { }
...
head<link>canonicalcanonical値を追加する関数を実装
<link>createCanonicalUrlCanonicalLinkService
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class CanonicalLinkService {
//...中略
private createCanonicalUrl(url?: string) {
const canURL = url === undefined ? this.dom.URL : url;
const link: HTMLLinkElement = this.dom.createElement('link');
link.setAttribute('rel', 'canonical');
this.dom.head.appendChild(link);
link.setAttribute('href', canURL);
}
//...以下略
rel="canonical"href="urlの値"canonical<link>canonicalcanonicallinkcanonical古いcanonical値を消す方法
createCanonicalUrlrefreshCanonicalUrl
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class CanonicalLinkService {
//...中略
private refreshCanonicalUrl() {
const links = this.dom.head.getElementsByTagName('link');
for (const link of links) {
if (link.getAttribute('rel') === 'canonical') {
this.dom.head.removeChild(link);
}
}
}
private createCanonicalUrl(url?: string) {
this.refreshCanonicalUrl() // Refresh links from the head element
const canURL = url === undefined ? this.dom.URL : url;
const link: HTMLLinkElement = this.dom.createElement('link');
link.setAttribute('rel', 'canonical');
this.dom.head.appendChild(link);
link.setAttribute('href', canURL);
}
//...以下略
refreshCanonicalUrl参考1
【おまけ】HTMLCollection(getElementsByTagNameの返り値)をIterableにする
typescriptcore-js
//...
const links = this.dom.head.getElementsByTagName('link');
for (const link of links) { //👈ここのイテレーションでエラー
if (link.getAttribute('rel') === 'canonical') {
this.dom.head.removeChild(link);
}
}
not iteralbeHTMLCollectionHTMLCollectionArray.prototype.slice.call
//...
const links = Array.prototype.slice.call(this.dom.head.getElementsByTagName('link')); //Array化
for (const link of links) {
if (link.getAttribute('rel') === 'canonical') {
this.dom.head.removeChild(link);
}
}
tslintfor
//...
const links = this.dom.head.getElementsByTagName('link');
for (let i = 0; i < links.length ; i++) {
if (links[i].getAttribute('rel') === 'canonical') {
this.dom.head.removeChild(links[i]);
}
}
HTMLCollection参考2
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー