Power Automateを動画で学ぼう!Udemyキャンペーン中

SWELL「このページはモバイルフレンドリーではありません。」の対処方法

目次

この記事について

WordPressテーマSWELLにて、サーチコンソールで「このページはモバイルフレンドリーではありません。」という警告メッセージが表示されときの対象方法について解説します。

「このページはモバイルフレンドリーではありません。 」は、下記のようなメッセージと併せて表示されることが多いです。

  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます

この警告メッセージの原因

この警告メッセージが表示される原因として次が考えられます。

  1. テキストが小さすぎる。
  2. リンクとリンクの間が近すぎる。
  3. ページの読み込み速度が低下している。

SWELLはレスポンシブデザイン(モバイルフレンドリーデザイン)に対応しているため、普通にサイトを作成していれば特に意識していなくてもモバイルフレンドリーになります。しかし、「3.ページの読み込み速度低下」に関しては注意が必要です。画像が大きすぎたり、広告コードのJavascriptを入れすぎたりすると、ページ速度が低下し、CSSの読み込みが遅くなることにより「モバイルフレンドリーではない」と判定されてしまうことがあるのです。

まず、本当にモバイルフレンドリーではないのか?確認しましょう。

まず、本当にモバイルフレンドリーではないのか否かの切り分けを行いましょう。

Webページがモバイルフレンドリーか否かを確認するには、『モバイルフレンドリーテストツール』というGoogleが提供する無料テストツールを使用するのがおすすめです。こちらはサーチコンソールの提供元と同じGoogle公式のテストツールですから、こちらのテストをクリアできていれば、サーチコンソールで表示された注意メッセージには別の原因があると言えるでしょう。

モバイルフレンドリーテストツールの使用手順について解説します。

STEP
モバイルフレンドリーテストツールにアクセスします。
モバイルフレンドリーテストツール

▲「モバイル フレンドリー テストツール」にアクセスし、計測するページURLをテキストボックスに入力し、URLをテストをクリックします。

STEP
分析がはじまります。
モバイルフレンドリーテストツール

▲分析が始まります。1~3分かかる場合がありますので待ちましょう。

STEP
結果を確認します。
モバイルフレンドリーテストツール

▲結果が表示されます。問題がなければ「このページはモバイルフレンドリーです」と表示されます。このメッセージが表示される場合、モバイルフレンドリーテストは合格です。

モバイルフレンドリーテストに合格したら

ページ読み込み速度に原因がある可能性があります。こちらのケースは次のセクション以降で対策を解説します。

モバイルフレンドリーテストに不合格だったら

修正点を提案してくれますので、指示に従いフォントサイズなどのWebページデザインを調整しましょう。フォントサイズ16px、行間1.2emがGoogleが推奨する最小サイズです。16pxより小さいフォントサイズを使用している箇所があれば設定し直しましょう。

「モバイルフレンドリーではありません」は、一時的な警告メッセージの可能性もある。

下記のような情報もあります。

John Mueller(ジョン・ミューラー)氏は、CSS のダウンロードが遅いためにこうした現象がときどき起こりうると説明しています。
Googlebot が CSS を取得できず、モバイルフレンドリーな状態になるようにページをレンダリングできないのです。

通常、ウェブサイトは同じ仕組みで配信されているので、モバイルフレンドリーでなければサイトのほぼ全ページがモバイルフレンドリーではなくなるはずです。
しかし、CSS の遅いダウンロードによって問題が発生する場合は、一部のページだけがモバイルフレンドリーでないと判定されたり、警告が出たり消えたり、入れ替わったりすることがあります。ミューラー氏によれば、時間とともに解決するだろうとのことです。

海外SEO情報ブログ

モバイルフレンドリーテストに合格できていれば、問題はないようです。

とはいえ、CSSの読み込み遅延はWebページの ページ表示速度が遅いことが原因で起きます。 ページ表示速度が遅いとGoogleのサイト評価も悪くなってしまいます。読み込み速度遅延は改善する必要があります。次項では表示速度の測定方法と速度改善の方法について紹介していきます。

スピードチェックしよう。ページスピードインサイトの使用方法。

サイトの表示速度をチェックしましょう。サイトの表示速度を確認するには、ページスピードインサイトを使うのが一般的です。こちらもGoogleの無料ツールになります。表示速度が遅い場合には具体的な改善点の提案をしてくれるので便利です。

STEP
ページスピードインサイトにアクセスします。

ページスピードインサイト」にアクセスします。

STEP
ページURLを入力します。
ページスピードインサイト

▲計測するページのURLを入力し、分析をクリックします。

STEP
結果を確認します。
ページスピードインサイト

▲結果スコアを確認します。表示に1~3分かかる場合がありますので待ちましょう。

ページスピードインサイト

▲スピード改善ができる要素を教えてくれます。上の例ですと、画像サイズを改善すれば推定値0.9sのスピードアップが見込めるようです。

ページスピードインサイト

▲「改善できる項目」の各要素をクリックすると、詳細をみることができます。

じょじお

わたしは、計測値スコア8のページを、スコア30にしたところ、「モバイルフレンドリーではありません」の警告メッセージが表示されなくなりました。

じょじお

このテストツールによると、30でも遅いページに分類されるようです。(50-89が合格ライン)しかし、警告メッセージを解消するだけでしたら合格ライン圏内にこだわる必要はないかもしれません。

じょじお

次の項では、Webページ表示速度向上の1つのステップとして、画像を圧縮する方法を解説します。

スピードアップしよう(画像を圧縮する方法)

Webページに使用する画像の目安を知ろう。

スピードアップの時にまず確認するのが画像サイズです。Webサイト表示遅延の一番の原因となりがちです。画像は圧縮すれば必ず50~70%程度小さくすることができます。Webサイトに使用する画像は必ず圧縮するようにしましょう

Webページに使用する画像サイズのルールは特にありませんが、ブロガーさんたちの画像サイズをみてみると1枚あたりの画像サイズを50~80KB以下のサイズにしている印象です。100㎅を超えるようでしたら、大きすぎるのでサイズ調整と圧縮をした方が良いでしょう

じょじお

とくに共通サイドバーに使用しているプロフィール画像、ヘッダーに使用するサイトのロゴ画像などは、どのページにも影響を及ぼします。無駄に大きなサイズの画像を使っていないか確認してみましょう!

画像サイズの圧縮方法

画像を圧縮する方法は主に2通りあります。

圧縮する方法おすすめのソフトウェア
Webツールで圧縮する。TinyPNG
クライアントソフトウェアで圧縮する。Screenpresso

Webツールで圧縮する(TinyPNG)

TinyPNG』は、ブラウザ上で動作するWebツールとしては有名な無料ソフトウェアです。1度に20枚までの画像をまとめてドラッグ&ドロップで張り付けることにより、圧縮が開始されます。圧縮後の画像はZipでまとめてダウンロードするか、ひとつひとつダウンロードします。難点として、アップロードとダウンロードの作業が必要なので、個人的には次で紹介するScreenpressoを絶対におすすめします。セキュリティポリシーなどの理由でクライアントソフトウェアであるScreenpressoをインストールできない場合には、使いやすいのでおススメです。

クライアントソフトウェアで圧縮する(Screenpresso)

Screenpresso』は、無料のソフトウェアです。わたしは10年以上使用している大好きなソフトです。おすすめは有料版ですが圧縮機能は無料版でも使用することができます。スクリーンショットの取得から吹き出しメモやモザイクの追加、サイズ調整もできるので、ブログに使用する画像がこれ一つで取得から加工までできるのでめちゃくちゃ便利です。全面表示や固定表示ができるのもお気に入りポイントですね。愛用ソフトをまだ探し中のブロガーさんは、絶対使ってみてほしいです。

Screenpressoで画像を圧縮する方法

STEP
タスクトレイに常駐したScreenpressoをダブルクリックします。
Screenpresso

▲タスクトレイに常駐したScreenpressoのアイコンをダブルクリックします。

STEP
圧縮したい画像を選択し再圧縮します。
Screenpresso

圧縮したい画像のところで右クリックして、再圧縮をクリックします。これで画像の圧縮は完了です。

まとめ

以上、「モバイルフレンドリーではありません」の警告メッセージの原因と改善方法についてご紹介しました。

警告メッセージの原因のひとつとして考えられるWebページ表示速度の遅延については、画像の圧縮以外にもいくつかポイントがあります。そちらは、また別の記事で書きたいと思います。

ノンプログラマーでも自動化スキルを身につける。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる