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)
}
実際に上記のコードを実行したサンプルページを作成したので確認してみてください。
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
