モバイルユーザビリティのエラー

Search Consoleにエラーの表示

2020年10月3日、Search Consoleのモバイルユーザビリティにエラーの表示を確認。

Search consoleにエラーが表示されたのは今回が初めて。エラーの内容は…。

この3点。エラーが確認されたページは、Google AdSenseの申請の1ページのみ。

心当たりは全くなし。(問題の部分は削除しています)

モバイルフレンドリーテスト

とりあえず、エラーが出たページをモバイルフレンドリーテストに通すと、コンテンツが画面の左半分にしか表示されていない。残り右半分は空白。

このページが他のページと違うところといえば、<code>を使っていることくらいかなぁ?

とりあえず、<code>のタグだけを削除してから、モバイルフレンドリーテストを通すと今回は合格。

ただ、画面の右1/3ぐらいが空白のまま。次は、chromeのデベロッパーツール(F12かctrl+shift+I)を使う。よく見ると…。

このコードが、右側にはみ出していることを確認。

この部分を削除したのちに、モバイルフレンドリーテストに通すと、キレイに表示されテストも合格。

<code>ではなくて、この英文自体が原因?

英文の折り返し

確か、英文の折り返しを制御するCSSがあったような…。"CSS 英文 折り返し"で検索。

cssのbodyに、

body  {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

この2つを追加してから、エラーが起こった状態(初期の状態)に戻す。そして、モバイルフレンドリーテストに通すと見事合格。

ページも正常に表示されていました。英文の折り返しが原因で確定かな。サーチコンソールで、3つのエラーごとに【修正を検証】して終了。

「モバイルユーザビリティの問題を修正しています」というメールが、すぐに3通届きました。

「検証には数日かかることがございます。処理が完了し次第お知らせいたします。」とのこと。

モバイル ユーザビリティの問題の未修正部分について

2020年10月4日の早朝(5時47分)に、「サイト「peamon.net」のモバイル ユーザビリティの問題の未修正部分について」というメールが3通届く。

"恐れ入りますが、一部のページで、この問題が依然として修正されていないことが確認されました。"

ですって。サーチコンソールにも【検証：失敗しました】と表示されている。

ただ、モバイルフレンドリーテストは、やっぱり合格。う～ん。

アップロードや何もせずに再検証するだけで解決できたという報告も存在する。

もう1度CSSとHTMLのファイルをアップロードし直してから【詳細を表示】→【新しい検証を開始】をクリック×3。

モバイル ユーザビリティの問題の未修正部分について2

2020年10月5日の早朝(前回とほぼ同じ時間)に、また不合格のメールが3通届く。

モバイルフレンドリーテストは合格しているのになんなんだ一体(怒)

もう次は、問題であろうコード自体を削除してから【検証を開始】する。

それほど重要な部分ではないので、まるまる削除しても大丈夫。

「モバイル ユーザビリティ」の問題が修正されました

2020年10月6日の早朝(前回、前々回とほぼ同じ時間)、ついに合格のメールが届く。とりあえず一安心。

というか、削除した英文と同じ英文がこのページに存在するんだけど、これは大丈夫なんだろうか。

もちろん、このページもモバイルフレンドリーテストには合格しています。まぁ、何かあったら、またネタにでもしよう。

一応、問題解決

腑に落ちない部分はあるものの、英文の折り返し方法を指定しておかないと、モバイルユーザーのユーザビリティを損ねるのは揺るぎのない事実。

初歩的なことだろうけど、全く配慮していませんでした。上記リンクの悠々生活さんに書いてあるとおり、テーブルの扱いにも注意ですね。

まぁ、ユーザビリティを改善しても、2020年10月時点でのアクセス数は、ほぼゼロなんですけど。