JavaScriptを使ってrel=canonicalタグを適切に挿入する方法

by 

[レベル: 上級]

JavaScript を使って rel="canonical" タグを適切に挿入する方法が JavaScript SEO を解説する技術ドキュメントに追加されました。

📝すずき注: この記事を書いている時点では、日本語ページは未更新。

JavaScript で rel="canonical" を挿入

JavaScript によって rel="canonical" を挿入することができます。
正しい方法で実装すれば、Google はきちんと認識、処理します。

コードのサンプルがドキュメントでは挙げられています。

fetch('/api/cats/' + id)
  .then(function (response) { return response.json(); })
  .then(function (cat) {
    // creates a canonical link tag and dynamically builds the URL
    // e.g. https://example.com/cats/simba
    const linkTag = document.createElement('link');
    linkTag.setAttribute('rel', 'canonical');
    linkTag.href = 'https://example.com/cats/' + cat.urlFriendlyName;
    document.head.appendChild(linkTag);
  });

特に問題がなければ、サンプルを応用すれば安心です。

rel="canonical" を JS で挿入するときの注意点

rel="canonical" を JavaScript で挿入可能ですが、基本的には推奨されません。
適切に実装されていないと、想定していない結果になる場合があるからです。

特に、次のような間違いには注意が必要です。

  • 複数の rel="canonical": rel="canonical" はページに 1 つだけです。そのページに rel="canonical" がもともと存在し、JavaScript によってさらに追加してしまった場合は、複数の rel="canonical" が存在することになります。このとき、内容が不一致だとどちらが適用されるかを予期できません。
  • 既存の rel="canonical" を置き換える: rel="canonical" が 1 つだけであっても、既存の rel="canonical" を JavaScript が生成した rel="canonical" と置き換える場合も要注意です。純粋な HTML の処理と、JavaScript のレンダリング後の処理は別プロセスです。JavaScript による rel="canonical" が最終的に適用されるとしても、レンダリング処理が完了するまでは先に存在していた rel="canonical" が適用されてしまうかもしれません。

rel="canonical" は初めから HTML にハードコードしておくのが理想です。
それでも、適切に実装すれば JavaScript での挿入でも問題ありません。
JavaScript を利用する際はドキュメントをよく読んでおきましょう。