Google Search Console モバイルユーザビリティーエラー

Google Search Consoleに、エラーメッセージが届いていた。

Google has started validating your fix of Mobile Usability issues on your site. Specifically, we are checking for ‘Clickable elements too close together’, which currently affects 76 pages.

Validation can take a few days; we will send you a message when the process is complete. You can monitor the progress of the test by following the link below.

及び

Google has started validating your fix of Mobile Usability issues on your site. Specifically, we are checking for ‘Content wider than screen’, which currently affects 76 pages.

Validation can take a few days; we will send you a message when the process is complete. You can monitor the progress of the test by following the link below

直訳すると、Googleはモバイルユーザビリティの問題を検証し始めたけど、君のサイトは問題があるからお知らせするねー。具体的に言うと、「クリック可能な要素が近すぎる」と「コンテンツの幅が画面を超えてる」の2つだよー。

Consoleを見ると、エラーがメッセージ通り77件表示されている。

以下のように表示されている。

  • 指摘されてるクリック可能な同士が近すぎます
  • コンテンツの幅が画面の幅を超えています

個人ブログなので放置してもいいのですが、気持ちも悪いので直すことにしました。ただ、指摘部分に否があるとは思えなかったので、問題点の洗い出しは気が重かった。

問題点の解決

問題点は、robot.txtでした。

このブログはWordPressの上で動いているのですが、テーマの下に置いているスタイルシートをロボットから遮断しているため、上記のようなエラーが起こっていました。

robots.txtの一部

Disallow: /wp-content/themes

メインで使用しているCSSの位置は以下。whiteplain3は独自のテーマ名です。

wp-content/themes/whiteplain3/style.css

セキリュティ強化のために弾かせていたのですが、思わぬところで痛手を喰らいました。Search Consoleのrobots.txtテスターもエラーは吐かないですしね。

そんなわけでrobots.txtにCSSの巡回を許可しました。

Disallow: /wp-content/themes
...
Allow: /wp-content/themes/whiteplain3/style.css
Allow: /wp-content/themes/whiteplain3/css/
Allow: /wp-content/themes/whiteplain3/js/

上記は、メインのCSS(直接)に加え、他のCSSとJavaScriptを格納しているディレクトリ配下へのrobotの巡回を許可しています。コードハイライトのようなコンテンツ自体の見栄えを整形する外部ライブラリやプラグインなどを使っている場合、それらが利用するCSSやJavaScriptのディレクトリを巡回可能にしておいた方がいいかもしれませんね。

検証開始

修正ができたので、モバイルユーザビリティ>[個々の問題点]>検証の詳細から右上にある「新しい検証を開始」ボタンをクリックします。検証が開始されると、「保留」に検証中の数が表示されます。

検証は全ページに対して一度に行われるわけではないようで、自分の場合は3回に分けて行われていました。中でも残り1ページのエラーが中々完了せず、すべてのパスに7日かかりました。

ちなみにモバイルのエラーが出ているページを「ライブプレビュー」から個々で見ることもできますが、「このページはモバイルフレンドリーです」と表示されても、Search Consoleのエラー結果と必ずしもイコールというわけではないようです。検証自体はロボットを介して行われているためだと思われます。

ライブプレビューは、問題解決の糸口を見つけるページといった感じでしょうか。

とりあえず、これで全ページがモバイルフレンドリーになりました。後日、Search Consoleに修正済みを判断したというメッセージも送られてきました。