目次
【SEO】「canonical」は適切に設定しておく必要がある
canonicalタグについての解説です。
グーグルはrel="canonical"を生HTMLから取得する（レンダリング後ではなく）
グーグル公式SEO情報リソース9種まとめ【SEO記事10本まとめ】[Web担当者Forum]
グーグルは、rel="canonical"の情報を最初に取得したHTMLバージョン（生HTML）をもとに処理する（現状では）。JavaScriptやCSSとともにレンダリングした後のページ（DOM）から取得するわけではない。
グーグルのジョン・ミューラー氏はこのようにコメントした。グーグルのイベント「Google I/O」での発表を受けた一連のツイートで明確にしたものだ。
少しわかりづらいかもしれないが、たとえば、
Webサーバーから送り出す初期のHTMLはテンプレートをもとにしたシンプルなもの
ブラウザ側でJavaScriptを使って動的にサーバーから追加の情報を取得してHTML内のやの要素を埋めていく
といった処理をしているサイトで重要になる話だ。JavaScriptを使ってDOMを操作し、レンダリングの結果としてrel="canonical"を挿入することは、技術的に可能だ。Googlebotは適切にレンダリングし、そのrel="canonical"を認識することもできるだろう。
しかしながら、現状ではインデックス処理として使われているのはレンダリング前（サーバーから取得した生のHTML）に記述されているrel="canonical"とのことだ（前出のフローでいう1.の部分）。
そのため、ページの情報をJavaScriptでブラウザに処理させている場合でも、rel="canonical"だけはサーバーから返すHTML内で適切に設定しておく必要がある。
もしHTMLテンプレート自体に手を入れられない場合は、HTTPヘッダーでrel="canonical"を指定する形でも問題ないようだ。
現状でこの挙動が明確にされているのは、rel="canonical"に関してのみだ（hreflangやrel="prev/next"に関する質問も出ているが、回答はない）。
たとえばタグマネージャを使って構造化データをページに追加できる。そうした情報をグーグルはきちんと認識し、リッチリザルトにも有効な構造化データとして利用される。
ところが、rel="canonical"に関して言えば、タグマネージャでの挿入に成功したとしても、グーグルのインデックスには利用されないようだ。
もしかしたら将来にはこの仕様が変わる可能性もある。とは言うものの、レンダリング後の内容をインデックスする仕組みが成熟していない現状では、シンプルな形の実装のほうが無難である例だといえる。
（Web担当者Forum より）
クライアントサイドでレンダリングしたrel=”canonical”をGoogleは完全無視[海外SEO情報ブログ]
Googlebot は多くのケースで JavaScript を解釈し実行できます。
DOM 操作によって、Googlebotに rel="canonical" をレンダリングさせることが技術的に可能です。ところが、レンダリングしたあとに挿入した rel="canonical" を Google は無視するのです。
そこにあっても Googlebot は見て見ぬふりをするわけですね。
(海外SEO情報ブログ より)
We (currently) only process the rel=canonical on the initially fetched, non-rendered version.
— John ☆.o(≧▽≦)o.☆ (@JohnMu) 2018年5月10日
SEOコンサルタントの感想
私も「canonical」についての質問を受ける事があります。
「canonical」を適切に記述する事は重要な事ですね。
SEOまんが
「まんがでわかるSEO」SEOコンサルタント勝子/第3話『内部リンクとユーザビリティ』
【SEO動画】「まんがでわかるSEO」SEOコンサルタント勝子/プロローグ『SEOコンサルタント登場』【SEO動画】「まんがでわかるSEO」SEOコンサルタント勝子/第1話『SEO・内部対策をしよう！』
SEO情報アンテナ
