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

公開日: : 最終更新日:2015/06/08 マークアップ

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

canonicalタグってなんだっけ?

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

この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行を書きましょう。

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

これで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 には

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

PCサイト 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 には

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

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

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

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

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

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

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

スポンサーリンク

関連記事

リンクのアンダーラインを消すCSS

リンクのアンダーラインを消す、色(リンクカラー)CSS指定

出来るだけSEOやSEMの専門的な記事を中心にしたいと思っていますが、どうも全体的にこのブロ

記事を読む

ワードプレスのファビコン設定方法を知りたい

WordPressのファビコン設定は3分で出来ます!

このブログもそうですが、WordPressで作成されたサイトのファビコン設定。 なんか難し

記事を読む

bとstrongの違い

bタグとstrongタグの違いをSEO観点とhtml(html5)観点で分かりやすく

今回はbタグとstrongタグ、その関連タグについて扱います。今回登場するタグは これ

記事を読む

スポンサーリンク
スポンサーリンク
検索意図ドリル
コンテンツマーケティング関連本「検索意図ドリル」書きました。

ドリルを書きました。 「は?ドリル?あの漢字とかの?」 こ

2017年のSEOトレンド
2017年のSEOトレンド予測と重点対策ポイント

2017年に注力すべきSEO領域、新たにキャッチアップすべきSEO

SEOとキーワード数
SEOとキーワード数(メタタグ・タイトル・1ページ内)の正しい設計

この記事は、ご自身でサイト上位表示に取り組む方向けの内容です。

SEMって何?
SEMとは?SEOとの違い

ネット界隈はカタカナや3文字略称が頻繁に出てきます。 ここでは、

キーワードプランナーに仕様変更?
キーワードプランナーの不具合?稼働キャンペーンのないアカウントで検索数が正常に取得できない

今月の上旬に、キーワードプランナーに少し変更があったようです。

→もっと見る

PAGE TOP ↑