1. ホーム > 
  2. Webサイト集客 > 
  3. SEO(検索エンジン最適化) > 
  4. SEO内部対策 > 
  5. SEOを意識したcanonicalタグの使い方

SEOを意識したcanonicalタグの使い方

類似ページを正規化するcanonicalタグは、正しい使い方をしないとWebサイトに問題が起きてしまう事があります。SEOを意識してcanonicalタグを利用するなら、正しい使い方を覚えておきましょう。

  • 2015/9/13
  • 2015/6/7

在庫がある順の商品一覧と価格の安い商品一覧、同じ商品の赤バージョンの商品ページと青バージョンの商品ページ、こういったコンテンツがほぼ同じページは、重複ページ扱いになってしまうのか?それぞれのページが検索エンジンにインデックスされているんだけど、どうしたらいいの?などなど、特に通販サイトでは重複コンテンツ問題を避けては通れません。
では、こういった重複コンテンツにはSEOを意識したとき、どのような対策をしたらいいのでしょうか?

canonicalタグを使って最重要ページに統一しましょう!

seo-using-the-canonical

通販サイトなどで発生する重複コンテンツ問題。SEOの事だけを考えた場合、ページの削除やnoindexタグを使って検索できない状態にすればいいのですが、通販サイトでは色違いの商品ページや並べ替えた商品一覧ページなど、同じコンテンツであってもそれぞれ意味を持っているページなので、削除するわけにはいきません。

そこで活用したいのがcanonical(カノニカル)タグ。「標準的な」という意味の英単語そのままに、複数ページの中から検索結果に表示する最優先のページを指定するタグです。

canonicalタグを使って再優先のページを指定することを「ページを正規化する」と呼びます。

それではユーザーの利便性を損なわないようにしながら、SEOを意識しつつcanonicalタグを使うには、どんな点に注意したらいいのでしょうか。順に解説していきます。

canonicalタグの使い方と注意点

使い方はいたって簡単です。ページの<head>セクション内に、以下のような記述をするだけです。

<link rel="canonical" href="最優先にしたいURL" />

「canonicalを設置したページは指定したページと同じ内容なので、指定したページを検索結果に表示してください」という意味を持ちます。

注意点としては、必ず<head>セクション内に一つだけ設置するようにする事です。仮に<body>セクション内にcanonicalタグが設置されている場合、検索エンジンに無視されてしまいます。

また複数のcanonicalタグが設置してあり、別のURLに対して正規化を行う指示がなされている場合も検索エンジンに無視されてしまう可能性が高くなりますので、SEOの観点から見ると意味がなくなってしまいます。

canonicalタグは、必ず<head>セクション内に一つだけということを覚えておきましょう。

canonicalタグを使用するシーン

canonicalタグは類似ページをまとめて正規化する事が目的です。以下のようなシーンで設置をすると効果的でしょう。

  • 色違い・サイズ違いの商品ページをひとつのページに正規化する
  • 在庫順・価格順などの商品の並び方が違うだけのページをひとつのページに正規化する
  • リスティング広告などのLPとして使用する場合など、URLに異なるパラーメタが付与される可能性があるページをひとつのページに正規化する
  • A/Bテストなど同じコンテンツでデザインが違うだけのページをひとつのページに正規化する

canonicalタグは、検索エンジンへの指示ではなく強い提案ですが、高確率で正規化されますので非常に強力なタグです。
間違った使い方をしてしまうと、必要なページが検索エンジンのインデックスから消えてしまうなどの問題が発生する可能性があります。

使用する際には十分な配慮と注意が必要です。

色違い・サイズ違いのページを正規化する時の注意

色違いやサイズ違いの商品ページをcanonicalタグで正規化する場合、同じ商品の別の色へのページへのリンクを分かりやすい場所に設置しておきましょう。

例えば、白と黒の色違いのノートパソコンのページを、黒のページに正規化しているとしましょう。
検索結果からは黒のノートパソコンのページにアクセスすることができますが、白のノートパソコンのページヘはWebサイト内のリンクを辿って移動する必要があります。

もしこの時、別の色の商品ページへのリンクが分かりにくい場所にあったら、ユーザーは色違いの商品は扱っていないと勘違いして帰ってしまうかもしれません。

SEOの観点から見た時には、色違いやサイズ違いのページは正規化した方がいいのですが、ユーザビリティの観点から見るとこういった配慮も必要なのです。

間違ったcanonicalタグの設置

非常に長文のコンテンツをWebサイトで公開するとき、複数のページにコンテンツを分割することがあります。
こういった場合、2ページ目以降のコンテンツを1ページ目に正規化するのはSEOの観点から考えると間違いです。

複数のページにコンテンツを分割した場合には、すべてのページのコンテンツが掲載されている「まとめページ」を作成し、そのまとめページに向けて正規化する方法が正しい設置方法です。

ブログなどのカテゴリーページでも同じことが言えますが、同じカテゴリーの記事が1ページにまとまっているページは、更新を続けるとどんどんと長くなってしまいます。
そのため、ブログのカテゴリーページにはcanonicalタグを設置するのは適切ではないでしょう。

ケアレスミスにも注意

またnoindexメタタグの使い方と注意点でもご紹介した、リニューアル時のケアレスミスも起こりがちです。
ページをHTMLコーディングする際、トップページに正規化したcanonicalタグを設置した<head>セクションを、下層ページの<head>セクションにコピーすると、下層ページもすべてトップページに正規化されてしまいます。

通常こういった明らかにコンテンツ内容が異なるページではcanonicalタグは無視されるのですが、たまに検索エンジンが誤認識するのか正規化されてしまって、下層ページのインデックスが消えてしまうという現象が起こります。

ページのインデックスが消えてしまってはSEOも何もありません。
Webサイトのリニューアル時には、noindexタグの有無のほか間違ったcanonicalタグが設置されていないかどうかも確認しましょう。

canonicalタグはスマホページとPCページの統合にも利用

スマホページとPCページを別のURLで用意している場合、SEOの観点から見るとスマホページは対応するPCページに正規化しておく必要があります。

きちんと「対応するPCページに対して正規化する」というところがポイントです。面倒だという理由で、すべてのページをトップページに正規化してしまっているWebサイトもありますが、これは間違った使い方です。

きちんとコンテンツの内容が対応するページに対してcanonicalタグで正規化する事で、検索エンジンはスマホページの存在を正しく認識できるようになります。
モバイルフレンドリーかどうかという部分は、スマホ検索のランキングにも組み込まれていますので、SEOを意識したWebサイトであれば正しい設置を行いましょう。

canonicalタグは別ドメインでも利用できる?

仕様上では別のドメインに対しても正規化を行うことができますが、301リダイレクトを使ってURLの統合を行ったほうが無難です。

無料サーバーや無料ブログなどで、301リダイレクトが使えないといった場合を除いては、canonicalタグは同じドメイン内での使用にとどめた方が無難です。

少し古い実験データですが、以前livedoorブログで更新していたコンテンツを新しいドメインに正規化した時の実験結果をご紹介します。

実験当時、livedoorブログのWebサイトは「mac ホームページ」や「mac ホームページ作成」といったキーワードで自然検索1位に表示されていましたが、canonicalタグを設置してから数日後、正規化したドメインが検索結果に表示されるようになりました。

seo-using-the-canonical_1

検索結果に表示されているタイトルは旧サイトのものですが、URLは新しいドメインになっています。
新サイトのドメインは取得したばかりでしたので、旧サイトの方がドメインパワーは強いはずですし、検索クエリからしてもこのタイトルの書き換えは納得のできるレベルです。

しかしこの時点で、新しいサイトのトップページにはMacでのホームページ制作に関するコンテンツはあまり露出させていませんでしたので、canonicalタグの設置前は20%前後だった直帰率が一気に60%前後まで増加してしまいました。

検索結果から「Macでのホームページ制作に関するコンテンツ」を期待したユーザーを裏切るようなページだったわけですから仕方がありません。

と思ったのも束の間、それから30分ほど経過すると「mac ホームページ」での検索結果に表示されなくなってしまいました。

そう思ったら翌日には旧サイトが検索結果に表示されました。
なかなか安定せずに大荒れの状態です。
seo-using-the-canonical_2

以降2ヶ月ほど実験を継続していましたが、旧サイトが検索結果に表示されていたり、新サイトが表示されていたりと安定する兆しもなかったので、canonicalタグで正規化する事は諦めました。

この実験結果からも、canonicalタグで別のドメインに正規化する方法は、仕様上は問題ないもののかなりコントロールが難しいようです。
301リダイレクトでWebサイトの移転を行った時には大きなトラブルもなく移転ができましたので、別のドメインのURLにURLを統合(正規化)する場合は、301リダイレクトを利用することをおすすめします。

いかがでしたでしょうか。
SEOを意識しなければcanonicalタグは不要だと言えなくもないのですが、ユーザーを探しているコンテンツのあるページに誘導するという意味もありますので、正しい使い方をマスターすることは避けて通れません。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします