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

ブログや、サイトを更新した際、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エンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

オンライン学習の比較はこちらから

おすすめオンライン教材
Udemy
自宅で学習ができるオンラインスクール
【テックアカデミー】無料キャリアカウンセリング詳細へ