GoogleのボットはCSSやjsも見ている! 「Fetch as Google」でレンダリング診断
もう2年位前、あるいはもっと前からだったような気もしますが、GooglebotってウェブサイトのCSSやJavascriptをクローリングすることで、そのページでどんなことが起きているのかをチェックできるようになっていました。
そもそも今のGooglebotは賢くなりまくりで、以前のようにHTMLだけを見ているわけではなく、CSSやJSも解析して総合的に判断するようになっています。ページレイアウトアルゴリズムとかあるんだからそりゃそうですよね。
で、そんなCSSやJSを含めてレンダリングを確認できる機能が、ウェブマスターツールの「Fetch as Google」に実装されました。
「Fetch as Google」ではこれまで、Googleがどのようにコンテンツを見ているのかを、解析したHTMLを表示して示していましたが、今回の実装で、CSSとJSも含めたレンダリングした状態のものを示してくれるようになったわけです。
レンダリングしてチェックしてみる
「Fetch as Google」へアクセスすると、これまでは「取得」というボタンだけでしたが、そこに「取得してレンダリング」というボタンが加わりました。
ここでレンダリングするようリクエストを実行させると、Googlebotが実際にクロールするページが画像として表示されます。
CSSだったりJSがうまくクロールされていれば、あるいは特にアクセスエラーがなければ、ほぼブラウザで人の眼で見たまま表示されます。
というわけで実際に試してみました。
レンダリングに失敗した場合
うちのブログではもともとrobots.txtでCSSやJSを含むいくつかのファイルやディレクトリがクロールされないようDisallowを指定していました。
robots.txtについては、ずいぶん以前に出回ったWordPress向けのrobots.txtの書き方みたいなやつを、リプレイス当時にコピーして放置してあったんですよね。。
で、そんな状態でレンダリングさせてみると以下の様な状態に。
まぁ全然ブラウザで見た時とは違いますよね。
CSSとJSのクロールを拒否していたので、それらが適用されていない状態で表示されています。
これでは実際に人の眼で見た時に、Above the fold(ファーストビュー)で、どのようなコンテンツがどのくらいあるのかが、正しくGooglebotに伝わらないかもしれません。
レンダリングに成功した場合
拒否していた箇所をGooglebotのみ許可するように書き換えてから、再度レンダリングさせてみたところ、ほとんどというか広告以外は全て人の眼でブラウザから見たのと同じ状態になりました。
一部のリソースを取得できないままになっていますが、これらは外部のアドレスから引っ張ってきているもので、GoogleフォントとAdsesneくらいなものですね。一応ソーシャルプラグインは読み込まれているので、この辺りは問題ないみたいです。
取得できなかった外部リソースは、特に表示自体に影響を与えるシロモノではありませんから、レンダリングさえ正常にされていれば基本無視で大丈夫だと思います。
Googlebotは人と変わらない
極端な話、Googlebotは今や人と変わらない状態でウェブページを見ていると言っても良さそうですね。
今回のレンダリング診断はPCだけでなくモバイル(スマートフォン)でも可能なので、Googlebotの種類を変えて実行してみるといいかもしれません。
一度、Fetch as Googleでチェックして、robots.txtでクロールを拒否していないかどうかを確認してみることもオススメします。
