SEOの基礎！canonical(カノニカルタグ)を正しく使おう

4/21に向けてスマホ対応に忙しいサイトオーナーの皆さん。
もしもレスポンシブデザインでの再構築とせず、スマホ専用ページを追加で制作しているならばこの記事で取り上げるcanonicalを4/20までに再チェックしましょう。

canonicalタグってなんだっけ？

説明の前に、実際のソース例を見てください。

<link rel="canonical" href="https://j-sem.net/">

この1行をhead内に追加します。

canonicalタグは、悪意のないコンテンツ重複を回避するためのタグです。
スマホ専用ページを作ったサイトでは、次のようなURLになっているのではないでしょうか？

PCサイト：example.com/
スマホサイト：example.com/sp/

スマホ端末からPCトップにアクセスがあったら/spにリダイレクトさせて、パソコンから/spにアクセスがあったら、/へリダイレクトさせて、、、よし！スマホ対応カンペキ！

いや、まだですよ！
このままでは、example.com/　と　example.com/sp/　のページ間でコンテンツが重複しています。
これではどちらかがコピーコンテンツ扱いとなり、マイナス評価となってしまいます。

これを避けるためには、＼ジャジャジャジャーン／
(‘∀`)＜ かーのーにーかるたぐぅーー

実際のソース例ですぐに対策できます

PCサイト（http://example.com/）のトップページ（index.html）には次の1行を書きましょう。

<link rel="alternate" media="handheld" href="http://example.com/sp/" />

スマホサイト（http://example.com/sp/）のトップページ（index.html）には次の1行を書きましょう。

<link rel="canonical" href="http://example.com/"ﾂꀀ/>

これでOKです！（exampleをあなたのURLに変えてくださいね）

当然ながら、下層ページもそれぞれ対応するページで指定しましょう。
PCサイトの次のような各ページが
http://example.com/company.html
http://example.com/contact.html
http://example.com/user/page1.html

スマホ用では、
http://example.com/sp/company.html
http://example.com/sp/contact.html
http://example.com/sp/user/page1.html
このようなURL構造となっていたとします。

PCサイト　http://example.com/company.html　には

<link rel="alternate" media="handheld" href="http://example.com/sp/company.html" />

PCサイト　http://example.com/contact.html　には

<link rel="alternate" media="handheld" href="http://example.com/sp/contact.html" />

PCサイト　http://example.com/user/page1.html　には

<link rel="alternate" media="handheld" href="http://example.com/sp/user/page1.html" />

スマホサイト　http://example.com/sp/company.html　には

<link rel="canonical" href="http://example.com/company.html" />

スマホサイト　http://example.com/sp/contact.html　には

<link rel="canonical" href="http://example.com/contact.html" />

スマホサイト　http://example.com/sp/user/page1.html　には

<link rel="canonical" href="http://example.com/user/page1.html" />

ここまでのテストケースを参考に設定しましょう。

さらっと登場していたalternateタグ

alternateは、「◯◯版はこっちだよ！」というタグです。
次の一文であれば、
link rel=”alternate” media=”handheld” href=”ＵＲＬサンプル”
handheld版はＵＲＬサンプルだよ！
という意味になります。
※handheldとは、ハンドヘルドコンピューターつまり携帯電話の意です。

他にも次のような使い方が出来ます。
■link rel=”alternate” href=”example.pdf” media=”print”
この場合、印刷版のURLを示す時に利用します。

■link rel=”alternate” href=”example.html” hreflang=”en”
この場合、英語版のURLを示す時に利用します。

本当は、スマホページではページ分割してるとか誤ったcanonicalの利用とか・・・

このタグは誤った利用を非常によく見かけます。
ですから具体例を挙げて事細かく説明できると良いのですが、ほら、4/21まで本当に・・・残業続きですし・・・ほら、、、ねえ？