今回も引き続きタグのお勉強です。
こちらのページでも紹介をしているcanonicalタグですが、実施にはどのような時にどうやって使うものなんでしょうか?私達が良く目にする例を参考に、色々注意点をまとめてみました。
それでは、コラムスタートです☆
canonicalタグの設置事例
今回のコラムではcanonicalタグについて取り上げます。canonicalタグとは「同じ内容が書いてあるページ同士をGoogleに知らせるタグ」です。
重複しているページにcanonicalタグを設置することにより、GoogleにどのURLが正しいURLなのかを伝えることが出来ます。
詳しいcanonicalタグの設置方法や説明はこちらのページを参考にしてもらうとして、今回はそんなcanonicalタグはどんな場面で使われるのか、また、こんな場合はどうやって設置したら良いの?など、実践的に見ていきます。
今回私達が経験上ミスをしがちな場面を4つほど上げてみたので、実際に見ていきましょう!
まずこちらの例です。
- サイト内全てに同じcanonicalを設置している。
評価をしてもらいたいページに向けてURLを設置するというcanonicalタグの性質上、「上位表示させたいページに向けてURLを設置する」という認識を持っている方が居るかもしれません。
ゆえに、サイト内全てのページに同じURLを入れたcanonicalを設置しているサイトさんを見かけます。
しかし、これは間違いです。
あくまでも「同じコンテンツが入っている重複ページのURLを正規化する」ためのタグなので、違うコンテンツが入ったページのURLを設置しても意味がありません。
それぞれ設置をする際のURLはページによって都度変えていかなければいけません。
上記の様な形が正しいcanonicalの設置方法となります。
ECサイトなどでよく見かけるのがこのパターンです。販売している商品ページにcanonicalタグを使うとき、どのように設置したらいいのでしょうか?
商品が下記のように並んでいる場合、canonicalタグはどこにどのように設置するべきでしょうか?
このような場合、それぞれのページにはどこか1つのURLに揃えたcanonicalタグを設置します。
- http://exmple.com/bag-1.html
- http://exmple.com/bag-2.html
- http://exmple.com/bag-3.html
- http://exmple.com/bag-4.html
- http://exmple.com/bag-5.html
上記全てのページの中に
<link rel=”canonical” href=”http://exmple.com/bag-1.html” />と何処か1つのページに向けたcanonicalを設置します。どのページでも構いませんが、canonicalに指定されたページがインデックスされることを考えると、一番人気の色のページがいいかもしれませんね。
ただし、これは商品の詳細部分が全く同じ商品ページに限ります。もし、
赤色の鞄では「女子が大好きな赤色の鞄はワンポイントアイテムとして使いやすい!」
緑色の鞄では「春にピッタリの可愛いパステルカラーがおしゃれの上級者に見せてくれます!」
といったように、別のコンテンツを使用している場合には使うことが出来ません。
次は商品が下記のように並んでいる場合のcanonicalタグです。
1つ1つの商品などを1つの階層にまとめて表示をさせている場合です。数が減ったり増えたりするため、「http://exmple.com/item/」に向けてcanonicalを設置してしまいたくなりますが、コンテンツが全く違うためそれは出来ません。
このような場合はあくまでも「それぞれのページにそれぞれのcanonicalタグを設置する」必要があります。
例
- index.html有り・無し どちらも同じコンテンツが表示される重複ページが存在する。
- リンク先URLはすべてindex.html有りのURLとなっている。
- サイト内の各ページに設置しているcanonicalタグはすべてindex.html無しのURLで記述されている。
サイト内のリンク先URLはすべてindex.htmlが付いているのに、canonicalタグにはindex.htmlが記述されていないという状況は適切ではありません。
なぜならcanonicalタグで重複ページと統一されていたとしても各ページへのリンクがcanonicalとは違うURLに設置されていることでリンクの評価がそれぞれのURLに分散してしまうからです。
また、ユーザーが実際にアクセスするのは重複ページなのでユーザーの混乱を招く可能性もあります。
早速修正しよう!と思うのですが、サイトを最適化する前にまずは各URLのキャッシュを確認しましょう。
今回はcanonicalタグをindex.html無しのURLで記述しているので、index.htmlなしのURLでキャッシュが取られているという前提で解説しますね。
このようなサイトの対策として一番良いと考えられるのは、サイト内の全てのリンクをcanonicalタグの記述に合わせることです。
そこで、「canonicalタグをindex.html付きのURLに変更するのはダメなの?」となるかもしれませんが、決してダメというわけではありません。
ダメではないのですが、実際検索エンジンは何度かの工程を踏んでからcanonicalタグのURLを処理する為、タグを変更してもすぐに適応されません。
この為、すぐにサイトを最適化したいならサイト内のリンクをcanonicalタグに合わせて変更するほうが早いということになります。
次に、canonicalタグに記述しているURLにアクセスすると別のURLへ301リダイレクトしている…という状態です。
例
- canonicalタグに記述しているURLへアクセスするとリダイレクトされて新URLに飛ぶ。
- 検索エンジンにはリダイレクト先のURLを認識させたい。
多くの方は「結果的に正しいURLへリダイレクトしているから大丈夫では?」と思うかもしれませんが、実はそれも適切な記述方法とは言えないのです。
何故なのかを解説する前にリダイレクトとcanonicalタグの関係をすこし説明します。
まず301リダイレクトとはURLが変更された際に用いられる転送処理です。(詳しくはこちら。)301リダイレクトをすることで新URLに移転しても旧URLからの情報や評価を引き継ぐことができ、検索エンジンへ新URLへ移転したことを伝えます。
そして、canonicalタグは優先的に検索エンジンへ認識させたいURLを指定することが出来るタグです。
つまり、どちらも検索エンジンへURLを正規化する為の手法ということです。
この2つの状況が掛け合わされているということは、新URLのcanonicalタグでは「旧URL検索結果に表示させて!」と言われたけど旧URLにアクセスすると「新URLに移転したよ!これからは新URLを検索結果に表示させて!」と双方から主張してしまっている…ということになります。
このように互いが違うURLを正規化しようとしているのでは、検索エンジンもどちらを正規化させればいいのかわかりません…。
サイトの最適化についてですが、上記のようにリダイレクトされている場合は各ページのcanonicalタグをリダイレクトされた新URLの記述へ変更しましょう。
リダイレクト先の新URLを記述すれば検索エンジンが正しい新URLを正規化する事が出来、サイトを最適化する事が可能になります。
とても重要なタグですが、扱いが難しいかもしれませんね。今回はそんなcanonicalタグのいろんな設置方法をご紹介しました。ミスしやすい様な例を上げてみましたが、この他にもこんな時は?なんてのがあったら調べてみると良いかもしれませんね。
そんな便利なcanonicalタグ、上手く使ってあげて下さい!