こんにちは！きいです。
この記事では、
グーグルサーチコンソールの『モバイルユーザビリティの問題が新たに検出されました』と表示されている時の対処法について紹介したいと思います。
主に
✓テキストが小さすぎて読めません
✓コンテンツの幅が画面の幅を超えています
✓クリック可能な要素同士が近すぎます
が代表的なエラーになります。
Contents
モバイルユーザビリティとは？
モバイルユーザビリティとは、ブログサイトをスマホで閲覧した時に見やすくて使いやすいサイトになっているかになります。
モバイルユーザビリティにエラーが出ているということは、読者ユーザーにとって使いにくいサイトになっていることをグーグルが警告していることになります。
ただし、モバイルフレンドリーテストを試して問題がなかった場合は、特に心配しなくて良いと言われています。
モバイルフレンドリーテストとは、該当サイトがモバイル端末での使用に問題がないか検証してしてくれる機能です。
「このページはモバイルフレンドリーです」と表示された場合は、
サーチコンソールのユーザビリティレポートのページに戻り、エラー詳細ページで「修正を検証」ボタンを押します。
1〜2日で修正されましたとの返事がくることが多いです。
問題がないのに「エラーが発生している」と表示されてしまう原因は、
定期的にクロールにやってくるGoogle botがページの読み込みが何かしらの原因により適切に行われず（失敗しているため）、エラーが発生してしまっていると言われています。
グーグルサーチコンソールのモバイルユーザビリティエラー│対処法
モバイルフレンドリーテストを確認してもNGだった場合の対処法を紹介します。
✓テキストが小さすぎて読めません
✓コンテンツの幅が画面の幅を超えています
✓クリック可能な要素同士が近すぎます
テキストが小さすぎて読めません
文字が小さくて読みにくいというエラーです。
フォントサイズを12px以下の場合にエラーが出ることが多いようです。
スマホの一般的なサイズに明確なルールはありませんが、本文のフォントサイズとしては14～18に設定している方が多いと思います。
ただ、グーグルの提唱するフォントサイズは16px・行間は1.2emなので、エラーが出た時はスマホのフォントサイズを16pxにしてみると良いと思います。
また、サーチコンソールでのユーザビリティレポートで、エラー件数をクリックすると、どの記事にエラーが出ているのか詳細の確認できます。
どの記事に対してエラーが出ているのか確認し、原因となっている記事を対処しましょう。
対処後は、サーチコンソールのユーザビリティレポートのページに戻り、エラー詳細ページで「修正を検証」ボタンを押し、エラー修正したことを報告し合格結果を待ちましょう。
コンテンツの幅が画面の幅を超えています
画像や表などのコンテンツが、スマホ画面の横画面に収まっていない可能性があります。
パソコン表示だとうまく表示されていても、スマホで確認してみると画像や表がはみ出していることもあります。
（右にスクロール出来るようになっている場合も要注意）
多くのテーマではカラム幅以上の画像を投稿したとしても、自動で幅を合わせてコンテンツを表示してくれます。
ですが、CSSにて表示形式をいじっている場合はカラム幅を超過しているかもしれません。
その為、多くの原因はCSSが原因と言われています。
Cocoonのテーマを使っている方は、
「Cocoon設定」→「高速化」→「CSSを縮小化する」→保存をします。
そして、
再度モバイルフレンドリーテストを行たら「このページはモバイルフレンドリーです」と表示されていました。
その状態で、サーチコンソールのユーザビリティレポートのページに戻り、エラー詳細ページで「修正を検証」ボタンを押し、エラー修正したことを報告。
この方法を生徒さんにやって貰ったことがあったのですが、その後、無事合格（エラー解消）の通知が来ていたそうです。
その他に、cocoonで親テーマのアップデートを行ったら直った！という情報も見かけたことがあります。
基本ブログは子テーマを皆さん使っていると思いますが、だいぶ古いバージョンを使っている場合には、親テーマを更新＆インストールのうえ、再度子テーマをインストールしてみると直るようです。
（※自己責任でお願いします。行う前はバックアップを取ってから行うことをおすすめします！）
クリック可能な要素同士が近すぎます
テキストリンクやボタンリンクの間隔を確認しましょう。
十分な間隔がないことで出るエラーです。
リンク間に8px以上の間隔を設定すると良いと言われています。
まとめ
グーグルサーチコンソールの『モバイルユーザビリティの問題が新たに検出されました』と表示されていた時は、エラーと言う文言に焦ってしまいますが、
まずは、モバイルフレンドリーテストでモバイルフレンドリーの有無を確認しましょう。
「このページはモバイルフレンドリーです」と表示された場合は、
クロールのエラーなので、特にこちら側で対処する必要はないように思いますので、サーチコンソールのユーザビリティレポートのページに戻り、エラー詳細ページで「修正を検証」ボタンを押します。
「NG」だった場合は、エラーになっている記事を特定し、原因を追究＆対処していきましょう。
（※こちらの対処後も、サーチコンソール上でエラーの修正報告をし、合格させておきましょう）
こちらの方法がすべてではないと思いますが、一例として参考にしていただけたら幸いです！
