canonicalタグの意味と使い方

現在のWordPressではヘッダー内にrel=”canonical”タグが投稿・固定ページには自動で出力されます。
どのバージョンから自動でつくようになったか詳細が不明で申し訳ありませんが、ver2.8以上と聞いたような気もします。
この際に自動で出力されるのはそのページのパーマリンク(URL)となりますが、はたしてこれで用をなすものなのでしょうか。

canonical属性タグとは

オリジナルページの明示

まずはcanonical属性の意味というか、役割りについておさらいしてみます。
以下はウェブマスターツールヘルプからの引用です。

canonical ページとは複数の類似した内容のページの中で優先されるページです。
多くのサイトでは同じ商品を紹介するページなど、内容が重複するページが複数存在します。たとえば、あるページでは商品一覧がアルファベット順で表記されているのに対し、別のページでは同じ商品を値段または評価の順番で記載している場合などです。

ウェブサイトではユーザビリティなどの関係から、ページタイトルや内容そのものが似たページが存在することがあります。このような場合に「こちらが主たるページです」ということを明示します。

1.http://example.com/product.php?item=&sort=alpha
2.http://example.com/product.php?item=&sort=price

分かりやすく説明するために、元の例からURLを短くしていますが、この2つのページはURLの末尾が示すとおり、ソートする順番が異なるだけで、ほぼ同じ内容のコンテンツです。これは現在のgoogleでは重複コンテンツと認識される恐れがあります。
このような場合に2のページのcanonical属性に1のURLを指定します。(逆でもOKです)

これがどういう意味をもたらすかというと、まず、1がオリジナルであるということを明示します。その上で「検索結果にはこちらを表示してください」とGoogleに伝えることができます。

基本的には重複コンテンツをうまくコントロールするためのメタタグと考えればよいです。
まさにパンダアップデート対策のための属性ともいえます。

サイト構造の正規化

インターネットを見る環境はPCからモバイル端末に完全に移りました。
多くのサイトではモバイル対応は済んでいると思いますが、モバイルでの表示に関しては2つの方法があります。

ひとつはレスポンシブで1ソースをCSSで制御してデバイスサイズに合わせて表示します。この場合は上記のようなオリジナルページのコントロールを行わないのであれば、基本的にはcanonical属性は必要ないです。
もうひとつがPCとモバイルで別のページを表示するという方法です。
この場合はアクセスしてきた端末情報(エージェント)によりPHPやhtaccessなどでページを振り分けます。

1.http://example.com/
2.http://example.com/sp/

検索エンジンという観点で見ると、PCとモバイルで非常によく似たソースのページがサイト内に2つ存在することになります。
この際にcanonicalでオリジナルページを示します。
SPからPCに向けて正規化としてcanonical属性をつけます。

忘れてはならないのはPCからはSPに向けてalternate属性でモバイルサイトを明示することです。

現在のモバイル評価はPCサイトを元に行われていますが、正規化タグが抜けるとモバイル版として認識できず著しく評価を落とす原因となります。

自動で付与されるcanonical属性

WordPressで付与されるcanonical属性は投稿・固定ページだけです。また、ページのURLそのものがcanonicalとして出力されます。
そもそも、オリジナルのページであれば、canonical属性は必要ないわけで、あまり意味をなさないように思います。

分割ページはどのように指定すべき?

nextpageなどでページ分割している場合は1ページ目のURLがcanonical属性として出力されるですが、これはよろしくありません。

1ページ目に評価を集めるということで、一見正しいように見えますが、このようなケースでは各ページは重複コンテンツではないはずです。また、1ページ目のURLをcanonicalとしてしまうと、2ページ目以降の内容は検索結果に表示されないこともありえます。

この場合は続き物であることを表す「rel=”next” rel=”prev”」を使うべきです。

ページごとに任意のcanonical urlをつけたい

特にパンダアップデート以降顕著ですが、重複コンテンツ防止という意味でWordPressサイトの場合、アーカイブやカテゴリーページをインデックスさせないという方は多いようです。しかし、サイトの構成によっては個別記事ではなく、カテゴリー自体をcanonicalページ(実際にユーザーに見てもらうページ)にしてしまうという方法もあるのではないかと考えます。

例えば、ひとつの質問について回答をつけるというスタイルのECサイトなどでのFAQなどでは、1件ごとにある程度ボリュームのある回答が書ければ、それだけでコンテンツとして立派に成り立つのですが、通常はそう長いものではないと思います。こういった場合にはカテゴリーページに全文を表示させて、1つのコンテンツとして見せるという構成も考えられます。

ただし、この場合は個別記事をインデックスさせるとボリュームを伴わない低品質なコンテンツとみなされる可能性があります。

最初からFAQ自体を1つのページにしてもよいのですが、WordPressのCMSとしての側面を考えると、1つの質疑応答を1つの投稿とする方が利便性が高いように思います。

このような場合に「カテゴリーページをcanonicalページに個別記事にはカテゴリーページに対してcanonical属性をつけるのはどうだろう?」と考えたのですが、これは正しい使い方ではありません。
canonical属性ではなく「個別記事をnoindexとする」が理にかなっていると思います。

言葉の上では低品質コンテンツに重複コンテンツも含まれそうなニュアンスですが、このふたつは「似て非なるもの」うまくコントロールする必要がありそうです。

若干、話が逸れてしまいましたが、当然アーカイブなど現在のページとは違うURLをcanonical属性として明示したいケースもあります。そもそもページURLと同じであれば、canonical属性自体を明示する必要がないともいえます。

その意味で常にページのURLを自動で出力するというのはどうなんだろうと思ってしまいます。

※canonical属性と同じく、低品質コンテンツのインデックス回避に重要なnoindexをWordPressでコントロールするには下記をご覧ください。

noindexを任意のページに出力する

プラグインでcanonicalをコントロール

これまでの理由から、各ページに適切なcanonical属性を記述したいわけですが、WordPressではヘッダーに含まれる情報を個別に制御するというのは少々面倒です。

ひとまず簡単に導入できるプラグインを使う方法を紹介します。
よくAll in One SEO Packを使っていれば、canonical urlもつけられます。確かにこのプラグインではアーカイブやカテゴリーページにもcanonical属性が出力されますが、WordPress自体で出力されるのと同じくそのページのURLとなりますので、任意のURLとすることはできません。

記事投稿時に任意のcanonical属性を入力

記事投稿時に任意のcanonical属性を入力

そこで使えそうなのが、Canonical URL’sというプラグインです。このプラグインを有効にすると、投稿・固定ページの編集画面にCanonical link for this pageという項目が表示されます。ページとは異なるURLを任意で入力できます。もちろん、この項目で入力した場合はWordPressからは出力されませんので、ダブる心配ははありません。
ちなみに、入力がない場合はそのページのURLが自動で出力されます。

SEO by Yoastでも同様の設定が可能ですが、Canonical URL’sはこれと比較して、とてもシンプルなプラグインです。適切なcanonical属性をつけるというだけの目的なら、通常はこれで十分かと思います。しかし、このプラグインではアーカイブやカテゴリーページにはcanonical属性を出力できません。

さらに自由にコントロールするにはテーマをカスタマイズする必要があります。この方法については別の機会に紹介したいと思います。

フォローする

WordPressとはなにかもう一度おさらいしてみよう!

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


三 + 6 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">