先日、Google検索結果でこのブログが表示されたときに「モバイルフレンドリーではありません」という表示が出ていることに気づきました。
気になって以下のページにURLを入力して調べたところ、WordPressのプラグインから出力されているCSSがGoogleにインデックスされないようブロックされており、それによってレイアウトが崩れてしまったようです。
モバイル フレンドリー テスト – Google Search Console
この記事では、そのような場合の対処法について書いています。
対処法
最初に結論を書くと、昔から使用しているWordPressの場合、WordPressインストールしたフォルダー(ディレクトリ)にある robots.txt というファイル内に以下のように書かれている場合があります。
(最近新しくインストールしたWordPressではこの行はないはずです)
Disallow: /wp-content/
この状態では、プラグインに含まれるCSSやJavaScriptをGoogleが読めないため、レイアウトが崩れてしまうことがあります。
私のブログの場合、プラグインに含まれるCSSをGoogleが読み込めないためレイアウトが崩れて認識されていました。
従って、この行を削除するか、または以下のように変更します。
Disallow: /wp-content/plugins/*.php$
その後、以下のページでご自分のWordPressサイトのURLを入力し「このページはモバイルフレンドリーです」と表示されれば完了です。
モバイル フレンドリー テスト – Google Search Console
robots.txt とは何か
たとえばWordPressの管理画面など、Webサーバー上で公開されているものの、Googleの検索結果に掲載されて欲しくないページがあると思いますが、robots.txt に掲載されて欲しくないページを指定することでクローリングさせない(掲載しない)ようにすることができます。
たとえばWordPressの管理画面は /wp-admin/ というフォルダー(ディレクトリ)内にありますが、以下のように記載しておけばWordPressの管理画面がGoogle検索結果に掲載されてしまうことを防ぐことができます。
Disallow: /wp-admin/
“Disallow” は「許可しない、禁止する」という意味です。
なぜこのような記述にしたのか
試しにWordPressを新規インストールしたところ、”Disallow: /wp-content/” の行はなくなっていました。
現在のWordPressでは robots.txt の記述内容は状況によって変わるようですが、この行は削除しても問題ないのかもしれません。
単純に “Disallow: /wp-content/” の行を削除しようかとも思ったのですが、以下のようにすると「プラグインフォルダー(ディレクトリ)内のPHPファイルのみ検索結果に掲載しない」という指定ができます。
Disallow: /wp-content/plugins/*.php$
プラグイン内のPHPファイルに直接アクセスされたり検索結果に掲載されるのは少し嫌だなと思っていたのと、Twitterでこの話をしていたときに別の方からも同じ指摘を頂いたため、上記のようにしました。
「モバイルフレンドリーではありません」の表示を無視するのは危険
多くのWebサイトでは、Googleはスマートフォン版しかクローリングしていません。
そのため、 「モバイルフレンドリーではありません」の表示が出ているのに放置していると、Webサイトの検索順位が下がっていったりする場合があります。
Googleのモバイルフレンドリーテストで原因を調べるには
状況によっては、私との場合とは違う理由で「モバイルフレンドリーではありません」と表示されて困っている方もいると思います。
Googleのモバイルフレンドリーテストにご自分のサイトのURLを入れた結果ページで[ページの読み込みに関する問題]の部分をクリックすると、ファイルごとに原因が表示されますので、そこで詳しい原因を調べてみましょう。
ご自分のサーバにあるファイルが[Googlebot が robots.txt によってブロックされています]の場合、robots.txt の内容を見直してみましょう。
SNSのシェアボタンなど、ほかのサーバにあるファイルの場合はどうしようもありません。
それ以外の原因でアクセスできないと表示されている場合、レンタルサーバーの設定で海外からのアクセスが禁止されていないかなど確認してみましょう。