JavaScriptでrel="canonical"を挿入する方法と注意点

JavaScriptでrel="canonical"を挿入

先日JavaScriptでrel=canonicalをGoogleは処理できるという記事があった。

JavaScript挿入したrel=canonicalをGoogleは処理できる

記事にはやり方の詳細は書かれていないが以下のようにJavaScriptを書けば実装できる。

JavaScriptだけで挿入といっても、ページ内にすでにrel="canonical"が存在している可能性もあるため、document.querySelector('link[rel="canonical"]')で存在の有無を確認するよう注意が必要。

const canonicalUrl = location.href.split('?')[0]
const isCanonical = !!document.querySelector('link[rel="canonical"]')
const link = isCanonical ?
  document.querySelector('link[rel="canonical"]') :
  document.createElement('link')
link.setAttribute('rel', 'canonical')
link.setAttribute('href', canonicalUrl)
if (!isCanonical) {
  document.head.appendChild(link)
}

実際に上記のコードを実行したサンプルページを作成したので確認してみてください。

canonicalをJavaScriptで入れるサンプル

URLのパラメーターは除去するようにしてありますのでパラメーター付きは以下のように正規化されます。

https://iwb.jp/s/javascript-rel-canonical-google-seo/?foo
↓
https://iwb.jp/s/javascript-rel-canonical-google-seo/

https://iwb.jp/s/javascript-rel-canonical-google-seo/?foo