Fetch as Googleのレンダリング結果ではCSSやJavaScriptを取得できない原因まで調べる
公開日： 執筆：佐藤
Fetch as Googleでページを調べるときは、HTMLを取得できたことだけで終えてはいけません。「Fetch and render」でGooglebotが見たページを表示し、普段のブラウザ表示と比べます。違いがあれば、CSS、JavaScript、画像を取得できなかった原因を、robots.txt、HTTP応答、外部配信先に分けて調べます。
Googlebotの表示が崩れていても、すべての外部ファイルを無条件に許可する必要はありません。本文や操作、画面構成を成り立たせるファイルから直します。解析用のscriptなど、表示内容に影響しないものは別に判断します。
FetchとFetch and renderの結果を分けて見る
通常のFetchでは、GooglebotがURLへ接続した結果、server header、取得したHTMLを確認できます。HTTP statusや返された本文を調べるには、これらが必要です。
Fetch and renderでは、それに加えて、Googlebotが外部ファイルを取得し、ページを組み立てた結果を画像で確認できます。Fetch as Googleのレンダリング機能は、画像、CSS、JavaScriptと、CSSやJavaScriptから間接的に読み込むファイルも取得して表示に使います。
まず、同じURLについて次の三つをそろえます。
| 確認対象 | 分かること |
|---|---|
| Fetchの応答 | HTTP status、server header、取得したHTML |
| Fetch and renderの画像 | Googlebotが外部ファイルを使って組み立てた表示 |
| 普段使うブラウザの表示 | 利用者が見ている表示と操作 |
FetchでHTMLを取得できても、renderingまで同じとは限りません。本文をJavaScriptで追加するページでは、scriptの取得または実行に失敗すると、HTMLには枠だけがあり、renderingには必要な本文が現れない場合があります。
表示の違いを部品に分ける
renderingの画像とブラウザ表示が違うときは、「崩れている」とだけ記録せず、違う部品を特定します。
- 文字がなく、空白になっている
- navigationや本文の順番が違う
- 画像が表示されない
- CSSが適用されず、縦に並んでいる
- JavaScriptで開く内容や切り替える内容が現れない
一つの違いに対し、その部品を作るHTML、CSS、JavaScript、画像のURLを対応させます。たとえばnavigationが縦に並ぶなら、最初にlayout用CSSのURLを調べます。画像だけがないなら、画像URLと、そのURLを指定しているHTMLまたはCSSを確認します。
この切り分けをせずにrobots.txtを全面的に変更すると、問題と無関係なファイルまでcrawl対象に加えてしまいます。
robots.txtで必要な外部ファイルを止めていないか確認する
Googlebotは、ページ本体だけでなく、renderingに使う外部ファイルを取得するときもrobots.txtに従います。CSSやJavaScriptのdirectoryを一括でDisallowしていると、その中にある表示用ファイルを使えません。
User-agent: *
Disallow: /assets/
この仮例では、/assets/の下にCSS、JavaScript、画像があれば、すべて取得を止めます。管理用ファイルを隠す目的でdirectory全体を指定していても、公開ページが使うファイルまで同じ場所に置かれていれば、renderingへ影響します。
必要なファイルを別の公開directoryへ移すか、robots.txtの範囲を狭めます。robots.txtはアクセス権限を守る仕組みではありません。外部へ見せてはいけないファイルは、認証やserver設定で保護します。
HTTPエラーと外部配信先をrobots.txtから分ける
取得できない原因はrobots.txtだけではありません。serverが応答しない、404や500を返す、redirect先で失敗する場合も、Googlebotはそのファイルをrenderingへ使えません。
外部のserverから読み込むCSS、JavaScript、画像については、そのserver側のrobots.txtとHTTP応答も確認します。自社サイトのrobots.txtを直しても、外部配信先がGooglebotを拒んでいれば解決しません。
確認記録には、少なくとも次を残します。
| 項目 | 記録する内容 |
|---|---|
| ページ | Fetch and renderを行ったURL |
| 部品 | 表示されない本文、画像、navigationなど |
| resource | 関係するCSS、JavaScript、画像の完全なURL |
| 取得条件 | robots.txt、HTTP status、redirect、配信host |
| 修正 | 変更したファイルまたはserver設定 |
| 再確認 | 修正後にFetch and renderを行った日と結果 |
制作会社や外部の配信サービスへ修正を依頼する場合も、どのページのどの部品に必要なresourceかを伝えます。「Googlebotで崩れる」という連絡だけでは、修正対象も完了条件も決まりません。
見える内容を作るresourceから直す
GoogleによるWebページのrenderingの説明では、外部のCSSやJavaScriptを取得できないと、通常の利用者と同じようにページを理解できない場合があるとされています。また、JavaScriptが複雑で実行できない場合や、JavaScriptが内容を消す場合もあります。
したがって、robots.txtで許可しただけで確認を終えません。修正後に同じURLをFetch and renderし、次を見ます。
- 主な本文が画像へ現れるか
- navigationと本文の順番がブラウザ表示と合うか
- 意味を持つ画像と代替内容を確認できるか
- JavaScriptが失敗しても、必要な本文とlinkへ到達できるか
Googlebotのrenderingは、すべてのbrowserと同じ動作を保証する試験ではありません。反対に、画像が似ているだけで、HTTP status、title、canonical、本文まで正しいとは限りません。取得結果とrendering結果を分けて使います。
最初の一手は、検索から見つけてもらう必要がある代表URLを一つ選び、FetchとFetch and renderを続けて実行することです。違いが出たら、ページ全体ではなく、最初に欠けた部品とresource URLを一組だけ特定します。
関連記事
