ウェブマスターツールの取得してレンダリングの表示画像を綺麗にする!

ブログや、サイトを更新した際、Googleウェブマスターツールでよく、「Fetch as Google」を使われる方は多いのではないでしょうか。

この「Fetch as Google」はGoogleに更新記事を連絡してくれるとても便利なツールですが、最近こんな奴、でましたね。

スクリーンショット 2014-11-11 23.41.33

「取得してレンダリンング」ってやつ。
これ、Googlebot によるページ取得結果なんですが、トップ画像のように崩れて表示されていませんか?

じぶん、ガンガンなってました。
ということで、これ治しましょう。

robots.txtを使ってGoogleに綺麗にサイトを見せよう

スクリーンショット 2014-11-12 0.00.36

結果的に言うと上記のような表記になります。
先ほどの崩れた表記からしてみると美しいものです。

では、なぜサイトの表示が崩れるのかというと原因は、「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エンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

おすすめオンライン教材
自宅で学習ができるオンラインスクール

ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ(VPS)を利用しましょう!
実務経験はVPSで学べます。



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
げんき☆ひろき
インターネット関連のSEをやっています。 ネットワーク、サーバー、ストレージ、仮想基盤まで幅広く手を出しており、MVNOの構築経験もあります。 現在は、Pythonを使ったプログラミングの開発をしネットワークの自動化ツールを作成しています! Pythonの入門書も作成しているので、ぜひ参考にしてください!