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

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

   
 
   

スマホページ作ったら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=”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まで本当に・・・残業続きですし・・・ほら、、、ねえ?

 

関連記事

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

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

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

記事を読む

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

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

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

記事を読む

bとstrongの違い

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

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

記事を読む

 
 
no image
2022年サーチエンジンマーケティングと周辺の話

明けましておめでとうございます。2022年です。前回から2年経過です

2020年トレンド
2020年のSEOトレンド

明けましておめでとうございます。(いまさら!)毎年書いていた年始め

2019年のSEO
2019年のSEO。私が頑張りたい4要素。

昨年(2018年)は書くのを忘れました。今年は書いておこうと

Googleの個人名「ナレッジパネルの認証を受ける」の申請方法・編集

Googleで個人名検索をした際に表示される「ナレッジパネル

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

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

→もっと見る

PAGE TOP ↑