ブログや、サイトを更新した際、Googleウェブマスターツールでよく、「Fetch as Google」を使われる方は多いのではないでしょうか。
この「Fetch as Google」はGoogleに更新記事を連絡してくれるとても便利なツールですが、最近こんな奴、でましたね。
「取得してレンダリンング」ってやつ。
これ、Googlebot によるページ取得結果なんですが、トップ画像のように崩れて表示されていませんか？
じぶん、ガンガンなってました。
ということで、これ治しましょう。
robots.txtを使ってGoogleに綺麗にサイトを見せよう
結果的に言うと上記のような表記になります。
先ほどの崩れた表記からしてみると美しいものです。
では、なぜサイトの表示が崩れるのかというと原因は、「robots.txt」にあります。
以下は、表示が崩れているときのrobots.txtの内容ですが、注目するところは、
- Disallow: /wp-content/plugins/
- Disallow: /wp-content/themes/
プラグインとテーマにはGoogleロボットが巡回しないように設定されているので、結局崩れた表示になっていたわけです。
- 表示が崩れているときのrobots.txt
User-agent: * Disallow: /wp-admin/ Disallow: /wp-includes/ Disallow: /wp-content/cache/ Disallow: /wp-content/languages/ Disallow: /wp-content/plugins/ Disallow: /wp-content/themes/ Disallow: /wp-content/upgrade/ Disallow: /*?* Disallow: /*? Disallow: /*.php$ Disallow: /*.js$ Disallow: /*.inc$ Disallow: /*.css$ Disallow: /*.gz$ Disallow: /*.wmv$ Disallow: /*.cgi$ Disallow: /*.xhtml$ # allow google image bot to search all images User-agent: Googlebot-Image Allow: /* # BEGIN XML-SITEMAP-PLUGIN Sitemap: https://xxx.net/sitemap.xml
これが原因でレンダリング取得後の表示は崩れた状態になります。
Googleに美しくサイトを見せてあげよう
ということで綺麗になるrobots.txtの書き方ですが、とりあえずプラグインとテーマはGoogleロボットに巡回してもらうようにしてもらい、あとはjavaとキャッシュも今回巡回できるように修正しました。
- 表示が綺麗になったときのrobots.txt
User-agent: * Disallow: /wp-admin/ Disallow: /wp-includes/ Allow: /wp-content/plugins Allow: /wp-content/themes Allow: /wp-content/cache Allow: /wp-includes/js/ Disallow: /*?* Disallow: /*? Disallow: /*.php$ Disallow: /*.js$ Disallow: /*.inc$ Disallow: /*.css$ Disallow: /*.gz$ Disallow: /*.wmv$ Disallow: /*.cgi$ Disallow: /*.xhtml$ # allow google image bot to search all images User-agent: Googlebot-Image Allow: /* # BEGIN XML-SITEMAP-PLUGIN Sitemap: https://xxx.net/sitemap.xml
こんな感じで設定すれば、綺麗に表示されるはずなのでお試しください。
ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ（VPS）を利用しましょう！
実務経験はVPSで学べます。
コメントを残す