カテゴリー
WordPress

サイトの CSS および JS ファイルに Googlebot がアクセスできるようにいたしました♪

Google から送られてきたメール

ポイント

  • Google は HTML だけでなく、JavaScript や CSS の内容も加味して検索結果を作っている。
  • JavaScript や CSS でコンテンツの表示順番などを変更できることから、人間が見る状態のページから検索順位を決めるためと思われる。
  • bot によるクロールについて、WordPress のサイトで、コアとなるプログラムが入った /wp-includes/ ディレクトリは外していたが、/wp-includes/js/ だけは許可するようにした。

Google から送られてきたメール本文引用

Search Console
https://oki2a24.com/ の CSS および JS ファイルに Googlebot がアクセスできません

https://oki2a24.com/ のウェブマスター様

Google のアルゴリズムによるコンテンツのレンダリングとインデックス登録に影響を及ぼす問題が貴サイトで発生していることが Google のシステムにより判明しました。具体的には、robots.txt ファイルでの制限のために Googlebot が JavaScript や CSS ファイルにアクセスできません。Google では、これらのファイルによりウェブサイトが正常に機能していることを認識するため、これらのアセットへのアクセスをブロックすると検索結果における掲載順位が本来よりも低くなる可能性があります。

修正方法

1
ブロックされているリソースを特定する
「Fetch as Google」機能を使用して、robots.txt のディレクティブがブロックしているリソースを特定します。
Fetch as Google
2
robots.txt ファイルを更新する
サイトの CSS や JavaScript ファイルの制限を robots.txt のディレクティブから削除し、robots.txt テスターで変更をテストします。次に、変更した robots.txt ファイルをサイトで更新し、そのファイルを Search Console に送信します。
robots.txt をテスト
3
「Fetch as Google」を使用して修正を検証する
[モバイル: スマートフォン] オプションを選択して、ページを取得してレンダリングし、スマートフォン用の Googlebot が正常にコンテンツをレンダリングすることを再度チェックします。
Fetch as Google
この修正方法についてご不明な点がある場合は、以下をご確認ください。

• ヘルプセンターの robots.txt ファイルをテストする方法についての記事
• モバイル フレンドリー サイトの作成に関する Google ガイド
• どのクローラがどのファイルにアクセスできるかを管理する方法については、robots.txt の仕様をご覧ください。
• robots メタタグまたは X-robots-tag HTTP ヘッダーを使用すると、ページが Google のインデックス登録されないようにできます。
• サポートが必要な場合は、プロダクト フォーラムに質問を投稿してください。その際はメッセージ タイプ [WNC-658001] の件である旨をお知らせください。

メールの手順に従った内容となりますが、修正した手順を記録しておきます。

Fetch as Google で Googlebot がアクセスできない CSS や js ファイルを調べる手順

メールのリンクから Googleウェブマスターツール の左メニューにある クロール > Fetch as Google へ行き、次の手順で確かめました。

  1. ページは特に指定しない
  2. 「PC」のまま
  3. 「取得してレンダリング」
  4. 取得した行をクリック
    ページは特に指定しない > 「PC」のまま > 「取得してレンダリング」 > 取得した行をクリック
  5. 「Googlebot はこのページの一部のリソースを取得できませんでした。取得できなかったリソースは次のとおりです:」で「robots.txt テスター」のページ
    「Googlebot はこのページの一部のリソースを取得できませんでした。取得できなかったリソースは次のとおりです:」の結果

この結果、Googlebot によるアクセスができていないファイルは次の 7 ファイルということがわかりました♪

  1. https://oki2a24.com/wp-includes/js/wp-emoji-release.min.js?ver=4.2.3
  2. https://oki2a24.com/wp-includes/js/mediaelement/mediaelementplayer.min.css?ver=2.16.2
  3. https://oki2a24.com/wp-includes/js/mediaelement/wp-mediaelement.css?ver=4.2.3
  4. https://oki2a24.com/wp-includes/js/jquery/jquery.js?ver=1.11.2
  5. https://oki2a24.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1
  6. https://oki2a24.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=2.16.2
  7. https://oki2a24.com/wp-includes/js/mediaelement/wp-mediaelement.js?ver=4.2.3

これらのファイルをよく見ますと、次のような特徴があることがわかります。

  • wp-includes/js/ ディレクトリにある JavaScript ファイルまたは CSS ファイルに Googlebot はアクセスできていない。

robots.txt ファイルを更新する

Googlebot がアクセスできないファイルは wp-includes/js/ ディレクトリの JavaScript、CSS ファイルとわかりました。

ですので robots.txt を編集して、これらファイルにアクセスできるようにしてまいります。

その際、次の点に注意します。

では、修正してまいります。修正前の状態がこちらですの。

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/

Sitemap: https://oki2a24.com/sitemap.xml.gz

これを次のように修正しました。

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/
Allow: /wp-includes/js/

Sitemap: https://oki2a24.com/sitemap.xml.gz

修正を検証するため、再び Fetch as Google で確認する

修正してから 2 〜 3 分後に再び Googleウェブマスターツール のFetch as Google から「取得してレンダリング」を試し、結果を見てみましたの。

その結果、「Googlebot はこのページの一部のリソースを取得できませんでした。取得できなかったリソースは次のとおりです: 」は先ほどと異なりました。

狙った JavaScript ファイル、CSS ファイルが取得できなかった一覧から除かれており、Googlebot によるアクセスができたことがわかりましたの♪

おわりに

こちらのページが参考になりました。ありがとう存じます！

以上です。

コメントを残す