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

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

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

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

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

それでは本文をどうぞ。

困っている人

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

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

さすを

この悩みを解決します！

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

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

筆者の情報：

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

【徹底解説します！】ブログを100記事書いて得られた収入・PV報告まとめ

ブログを100記事書くとどのくらい稼げるようになるのか知りたくはありませんか？この記事は、ブログを100記事書いた筆者の合計収益や合計PV数、100記事書いて分かったことなどを詳しく説明しています。ブログを100記事書くとどのくらい稼げるようになるのか知りたい人は必見です。

1.「モバイルフレンドリーではありません」の状況
2.「モバイルフレンドリーではありません」の対処法
3. 「モバイルフレンドリーではありません」は繰り返される
- 最後に：ブログの「山あり谷あり」をたのしもう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「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"/>

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

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

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

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

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

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

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

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

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

悲報ですが、事実です。

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

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

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

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

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

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

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

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

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

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

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

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

それでは！

リンク