WordPressで制作したサイトが「モバイルフレンドリーではありません」と表示されたら

先日、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” は「許可しない、禁止する」という意味です。

Webコーディングスクール 体験レッスン受付中

なぜこのような記述にしたのか

試しに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のシェアボタンなど、ほかのサーバにあるファイルの場合はどうしようもありません。

それ以外の原因でアクセスできないと表示されている場合、レンタルサーバーの設定で海外からのアクセスが禁止されていないかなど確認してみましょう。

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index