ブログ

【たった1行で解決!】「モバイルフレンドリーではありません」の対処法を徹底解説!【図解あり】

【たった1行で解決!】「モバイルフレンドリーではありません」の対処法を徹底解説!【図解あり】

こんにちは、さすを(@sasuwo0409)です。

Google Search Console(通称:サチコ)の「モバイルフレンドリーではありません」を解決できず困ってはいませんか?

今回の記事は、実際にブログを運営している筆者が、Google Search Consoleに出てくる「モバイルフレンドリーではありません」を解決した方法を解説していきます。

図もたくさん載せているので、つまずくことなく対処できると思います。

それでは本文をどうぞ。

困っている人
困っている人

Google Search Consoleで「モバイルフレンドリーではありません」って出てくるんだけどどうすればいいのかわからない、、

テキストサイズも標準にしてるし、リンクも近くないのになんでだろう、、?

さすを
さすを

この悩みを解決します!

この記事を読むとわかること:

  • 「モバイルフレンドリーではありません」 の対処法
  • 「モバイルフレンドリーではありません」 が起こる原因

筆者の情報:

  • 現役システムエンジニア 兼 ブロガー
  • A8net記事応募キャンペーン優秀賞受賞経験あり
  • WordPressテーマは「Cocoon」
スポンサーリンク

1.「モバイルフレンドリーではありません」の状況

1.「モバイルフレンドリーではありません」の状況

状況が同じでないと、これから行う修正が時間の無駄になってしまうので、軽く状況をお話しします。

実際に問題が起きていた時はこんな感じでした。

図1:問題が起きていた時のモバイルユーザビリティ画面
図1:問題が起きていた時のモバイルユーザビリティ画面

エラー内容は以下の3つ。

  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます
  • コンテンツの幅が画面の幅を越えています

ただ、テキストサイズはGoogleが推奨している16pxにしているし、リンクや広告が重ならないようにもしています。
実際にエラーが出ていたページを載せておきますが、画面の幅も超えていないのがわかると思います。
>>【生活の質が爆上がり!】20代男が選ぶAmazonで買ってよかった超おすすめ商品ランキング!


そこでモバイルフレンドリーテストをしてみたところ、あやしいところが見つかりました。

図4:問題が起きていた時のモバイルフレンドリーテスト画面
図4:問題が起きていた時のモバイルフレンドリーテスト画面

画面右側のスクリーンショットの部分です。

ブログ記事が左半分にしか表示されていません。

なぜかはわかりませんが、 モバイルフレンドリーテスト時に画面左半分にしか記事が表示されないために、モバイルフレンドリーではないという評価になっていました。

確かにこの状態なら、「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」「コンテンツの幅が画面の幅を越えています」のエラーも理解できますね。

2.「モバイルフレンドリーではありません」 の対処法

 2.「モバイルフレンドリーではありません」 の対処法

それではここから 「モバイルフレンドリーではありません」 の対処手順を解説していきます。

「モバイルフレンドリーではありません」 の対処手順は以下の2ステップです。

  1. テーマエディターを開く
  2. ソースコードを一部修正する

注意:
筆者のWordPressテーマは「Cocoon」です。
Cocoonをもとにして解説しているので、他のWordPressテーマを使用している方は各自読み替えてください。
(操作を間違えても復元できるようにあらかじめバックアップを取っておくことを強くおすすめします。)

その①:テーマエディターを開く

WordPressを開き、「外観」→「テーマエディター」をクリックします。
その後、編集するテーマを「Cocoon」にして選択ボタンをクリックします。

図3: 「モバイルフレンドリーではありません」 の対処手順①
図3: 「モバイルフレンドリーではありません」 の対処手順①

画面右側から「header.php」を探してクリックします。

図4: 「モバイルフレンドリーではありません」 の対処手順②
図4: 「モバイルフレンドリーではありません」 の対処手順②

その②:ソースコードを一部修正する

「header.php」を開いたら、ソースコードを一部修正していきます。

といっても、少し文字を追加するだけなので、難しいことはなにもありません。

編集前:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>

編集後:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no"/>
図5: 「モバイルフレンドリーではありません」 の対処手順③
図5: 「モバイルフレンドリーではありません」 の対処手順③

これで保存すればOKです。

補足:
追加した「 user-scalable=no 」とは、スマホブラウザの拡大・縮小を無効にするというものです。拡大・縮小を無効にすることで、上記のような表示バグをなくすことができます。

ただ、拡大縮小ができないと、アクセシビリティの維持が難しいという意見もあります。

たとえば、地図の拡大です。地図を拡大して見たいのに、それができないとなると、ユーザーにとってフレンドリーではないですよね。

なお、iOS10以降では”user-scalable=no”はコードを埋め込んでも無効になるようです。(モバイルフレンドリーになるけれど、スマホで拡大縮小できる状態)

これらの修正で問題は解消したのか

検証テストをした翌日に確認したところ、すべて合格していました。

図6:対応後の検証テスト結果画面①
図6:対応後の検証テスト結果画面①

モバイルフレンドリーテストをしてみても、合格していました。

図7:対応後の検証テスト結果画面②
図7:対応後の検証テスト結果画面②

3. 「モバイルフレンドリーではありません」 は繰り返される

3. 「モバイルフレンドリーではありません」 は繰り返される

悲報ですが、事実です。

というのも、WordPressテーマのアップデートが来たら今回の修正は消えてしまうからです。

ですので、WordPressテーマのアップデートのたびに今回の修正をする必要が出てくる可能性があります。

もしそれが嫌であれば、有料テーマに変更するか、今まで編集したソースコードをすべて白紙に戻した方がいいでしょう。

そもそも今回のバグは、CSSやJavaScriptがおかしな動きをして発生している可能性がとても高いので、このような対応をとれば1回の修正で対応できるようになると思います。

ちなみに、有料テーマで人気なものはこちらです。
>>JIN(ジン)
>>SWELL(スウェル)

よくわからないバグ修正に時間をかけるのはもったいないので、早めに有料テーマを準備するのもありだと思います。

最後に:ブログの「山あり谷あり」をたのしもう

Google Search Consoleに出てくる「モバイルフレンドリーではありません」を解決した方法を解説してきました。

ただ記事を書いても稼げるようにはならないし、試行錯誤して問題が悪化するのがブログの難しさであり、おもしろさでもあります。

ちょっと抽象的な話になりましたが、要するにブログの「山あり谷あり」をたのしんでいきましょうということです。

というわけで、これからも試行錯誤を繰り返して行動していき、成功も挫折も楽しみながらブログを書いていこうと思います。

この記事が少しでもあなたの役に立っていたら嬉しいです!

それでは!


コメント

タイトルとURLをコピーしました