Bloggerでモバイルユーザビリティのエラーが出た場合、対応方法が簡単に気づければいいのですが「どうやってもエラーの原因がわからない」ということもあります。
僕のサイトの場合はこんな風にエラーが出ています。
その中でも原因がわからず困っていたサイトの対応方法の調べかたについて記載しておきます。
「SearchConsole」のラベルで他の一般的な問題の解決策も記載しているので、そちらも確認してみてください。
主要なもの
１．調べられるエラーの種類
問題となったエラーは以下のものですが、この記事は「どこが悪いか調べる方法」なので、エラー内容は何でも良いです。
- クリック可能な要素同士が近すぎます
- コンテンツの幅が画面の幅を超えています
またサイト全体でエラーが出ているようなケースは、この調査方法ではあまり効果がないと思います。
２．エラーの詳細を確認する
SearchConsoleで調べたいエラーメッセージをクリックします。
今回は「コンテンツの幅が画面の幅を超えています」をクリックしました。
これをクリックすると、エラーの詳細画面が表示されます。
これはエラーが出ている状態
こちらはエラーが無い状態
再チェックは、画面の右の方にあるボタンで可能です
ここの画面でエラー内容がわかれば、それで解決。
でも、意味不明なことも結構あるんですよね。
３．エラー原因の特定
ここからは非常に原始的で泥臭い話です。
※ここからはエラーの特定の為、問題ページを編集します。そのため「現状のページを元に戻せる」ようにバックアップを取っておいてください。
エラーの出ている画面を編集可能な状態で開きます。
僕はBloggerなのでこんな感じ
ページの内容を半分くらい削除して、再度「ライブページテスト」を行います
ライブページテストの結果が「OK」となった場合、削除した部分に問題があったということになります。
今度は削除する範囲を狭くして、再度「ライブページテスト」を行います。
これを繰り返すことで、ページのどこに問題があったのかがわかります。
画面上半分、下半分消してみたけど、テストでOKにならない
ページの内容を全部消してみて、エラーが出るか確認してみます
エラーが出なくなった場合、ページの複数の箇所でエラーが出ていることになります。
全部消したページにすこしずつ内容を復元して行って、エラーが出るようになる場所を見つけましょう
ページの内容すべて消してもエラーが出る場合
いま編集しているページよりも、外の部分に問題があると考えられます。
サイトのすべてのページ、多くのページで同じエラーが出ていませんか？
複数のページにまとめて設定されているものが何か調べましょう
なかなかに泥臭い方法ですが、プログラミングなどでの原因特定どうしてもできないときにも渋々つかう考え方ですね。