調査が足りないのですが、調べきれる算段がつきませんでしたので浅い状態ながら記事にしようと思います。全く情報がないというわけでもなかったので。
テーマは「Googleのクローラーはレスポンシブをどう見ているのか？」。
デバイスの幅やウィンドウの幅で変化するのがレスポンシブデザインですが、クローラーはどう見ているのか？
人間はデバイスやブラウザなどの何らかの枠を通して「ソースを読み込んだ結果として反映されたもの」しか見れませんが、クローラーは枠などなくソースを見ているはずですから。
前から気になっていたのですが、調べた結果Googleのヘルプに手がかりがあり、不勉強を実感しました…。
[※イラストはNew old Stockのpublic domainの写真を参照して作成]
メディアクエリの分岐はどう見えているのか？
メディアクエリ設定のあるサイトをクローラーはどうみているのか？インデックスするための情報としてすべてのメディアクエリの分岐を実行しているのでしょうか？100px単位で10個の分岐があるのなら10個すべて見ている？
この答えは、一応GoogleのGoogle Developersの「スマートフォン向けウェブサイトの構築」にあります。以下の該当部分を引用します。
Google のアルゴリズムでは、すべての Googlebot ユーザー エージェントがページ アセット（CSS、JavaScript、画像）のクロールを許可されている場合に、この設定を自動的に検出します。
前提として、cssのクロールが許可されていればメディアクエリも理解されるようです。
続いて引用します。
Google のアルゴリズムはスマートフォンの画面解像度に最適と思われる最大幅値を探し出します。Google では、一般的な携帯端末用ウェブサイトでどのような手法が使用されているかを常に調査しています。そのため、Google のアルゴリズムは将来的に更新される可能性があります。
ここが結論ですね。つまり、
最大幅値とされた一点での状態を見る
ようです。引用部分にあるように残念ながら具体的数値は示されていませんし、おそらく今後もないでしょう。
なお、このページにはオススメとして「@media only screen and (max-width: 640px) {…}」とは書かれていますが、「参考例です」と念押しされています。
displayプロパティをnoneするとどうなるか？
Googleのウェブマスターツールにある「Fetch as Google」。ここでできるレンダリング機能を使って、displayプロパティをnoneするとどうなるかを見てみました。
結論から言えば、メディアクエリでdisplayプロパティをnoneにした要素もソースとして表示されています。この辺りはブラウザでソースを見るのと同じですね。
ただ、ここがどう影響しているのかは不明です。例えば以下の場合。
- displayプロパティで表示非表示を切り替え
- 切り替える内容自体は同じ
- 切り替えで場所だけが変わったように見せる
この場合、クローラーがnoneに影響されずにインデックスすると、表示非表示の切り替えなしにどちらも表示される状態になります。意図しない重複文章の発生です。
文章で考えると現実味がないと思いますが、ナビゲーションならどうでしょうか。スマートフォンのみに表示させるナビをdisplayプロパティで実装していたら？
ナビゲーションのラベルだけではなく、内部リンクの数も増すことになります。
気になる部分なのですが、こういった状況がどう影響するのかはわかりません。
ユーザーエージェントによる分岐
レスポンシブをユーザーエージェントによる分岐で実現した場合はどうなるのか？WordPressであれば、完璧ではないにしろwp_is_mobile関数で簡単に実現できますからそれなりにつかわれているかと思います。
この場合はブラウザにレンダリングされる前の変化ですから、分岐によってなくなった要素はクロールされません。動的なページ生成なので、生成後のページの状態でしかクロールされないのは当然ですね。
なお、前出のGoogleのヘルプに以下のような文言があります。
動的な配信の場合、ページをリクエストするユーザー エージェントに応じて、同じ URL で異なる HTML（および CSS）が配信されます。この設定では、サイトでモバイル ユーザー エージェント向けに HTML が変更されることがすぐにはわからないので（モバイル コンテンツは隠れている状態です）、サーバーからのヒントの送信により、スマートフォン用 Googlebot がページをクロールしてモバイル コンテンツを検出するようリクエストすることをおすすめします。
「すぐにはわからない」とか書かれているので、状況によっては判断がつかないこともあるのでしょう。この部分に関しては Vary HTTP ヘッダーが推奨されいます。詳細は前出のリンク先でご確認下さい。
結局のところは分からない
問題なのは、クローラーがレスポンシブの動作を把握できても、実際にはどのようにインデックスに反映するのか分からないという点です。
ウェブマスターツールはクローラーに関する情報があり便利ですが、そこで見えているものがすべてでもなく、見えている通りに裏側で動いているとは限りません。
処理に余裕があるなら分岐の全部のパターンを取得して保存し、検索した際の状況に応じて出し分けたいのかもしれませんが、現実的には難しいように思います。とはいえ今後はわかりませんし、今後の事を考えて取得だけはしているのかもしれず。
結局、素人ではどこまで行っても仮説の域をでません。仮に確証を得ても、内部の変更による変化は十分に考えられますからいつまでも正しい認識であり続けることもありません。
気にしすぎなければいけない業種の方は別ですが、それ以外の方は
とりあえずGoogleのアナウンスを受け入れる方向でよい
かと思います。
結び
一応記事を書く前にこの件について、Googleのヘルプより詳しい情報がないか探したのですが、見つかりませんでした。ある場合はお教えいただきたいと思います。喜んで「あちらが詳しいです」とリンクを張りますので。
とりあえず、レスポンシブによる要素の表示非表示は以下のようになるでしょうか。
- クロールをされたくない場合はレンダリング前に動的に出し分ける
- クロールして欲しい場合はcssやJavascritpによるクライアント側で動作する形にする
タブやスライダーでコンテンツなら今更問題にもならないと思いますが、スマホ専用のパーツに関しては一応留意した方がよいかもしれません。
補足
Googleが認識できるようなレスポンシブの仕組みなのかを確認する方法として、以下のように書かれていました。
一般に、Google Chrome や Apple Mobile Safari などの最新のブラウザでサイトが表示されれば、サイトは Google のアルゴリズムで検出されます。
上記以外でもまず問題ないとは思いますが、一応参考までに。
0人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
