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の専門的な記事を中心にしたいと思っていますが、どうも全体的にこのブロ

記事を読む

bとstrongの違い

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

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

記事を読む

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

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

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

記事を読む

スポンサーリンク
スポンサーリンク
2017年のSEOトレンド
2017年のSEOトレンド予測と重点対策ポイント

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

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

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

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

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

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

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

WordPressの一覧ページSEO
WordPressサイトの一覧ページ(アーカイブページ)のSEOについて(noindexの扱いなど)

今回はWordPressのお話です。 オウンドメディア、コンテン

→もっと見る

PAGE TOP ↑