Search Consoleのモバイルユーザビリティのエラーを引き起こす画像について

Googleがモバイルファーストインデックスを導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供しているモバイルフレンドリーテストで分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。現在のSEO対策（検索エンジン最適化）で、下地となるのがモバイルユーザビリティだから是非とも注意しておきたいにも拘わらず、ブログでエラーが出てしまって改善しなくてはならなくなった。画像がモバイルユーザビリティのエラーを引き起こす原因 Search Consoleの「ページはモバイルで利用できません」と表示されたモバイルユーザビリティのエラー

Search Consoleの「ページはモバイルで利用できません」と表示されたモバイルユーザビリティのエラー

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

僕はSearch Consoleでモバイルユーザビリティの二つの項目を指摘された。

テキストが小さすぎて読めません

クリック可能な要素同士が近すぎます

ブログのスマホでの表示は大丈夫で、何の支障もないから面食らう他はない。何が原因かは分からないので、ブログのソースコードを確認したらいつも付けているはずのHTMLの画像の代替文のalt属性が付け忘れて空になっていた。そこてalt属性をしっかり付けてモバイルフレンドリーテストにかけると大丈夫だったから画像が原因だと分かった。一般的に画像のモバイルユーザビリティのエラーはサイトのデザインの崩れから来ている画像のモバイルユーザビリティのエラーはスマホの画面からはみ出したりしてサイトのデザインを崩していると指摘されるのが普通だ。その場合は小さい画像を使う（レスポンシブ配信ならばスマホだけ小さい画像を載せられもする）かHTMLの画像のimgタグに横幅のwidth属性を小さい値で付けて実際のサイズよりも小さく表示させるかデザインのCSSのwidth要素で縮小するなどの仕方で改善できる。何れの方法も画像の実際の表示をスマホの画面に合わせることでモバイルユーザビリティのエラーを回避することができる。サイトのデザインを崩さなくても画像にモバイルユーザビリティのエラーが出ることもある厄介なのはサイズのデザインを崩さない画像なのにエラーを指摘される。僕は初めて知ったけれどもサイトの画像は適切に表示されていてもモバイルユーザビリティのエラーを免れるとはかぎらなかった。HTMLの画像のimgタグに代替文のalt属性がないか付けても値が空だと失敗する場合があるサイトの画像の代替文のalt属性がないかあっても値が空だとスマホの小さい画面からはみ出したりせず、適切に表示される画像なのにSearch Consoleのモバイルユーザビリティのエラーを引き起こすかも知れない。

目安として横幅が600px以上の画像を貼る場合はalt属性を設定しないとモバイルフレンドリーテストの結果がNGになることがあります

画像のALT属性はモバイルユーザビリティにも関係あり？｜よしブログ

スマホの小さい画面に合った小さい画像を使えば大丈夫だけれどもパソコンと共用したり、画質を高めるためなどで、横幅が600px以上の大きな画像をデザインのCSSで縮小して載せるような場合にエラーの判定を受けるかも知れない。。僕は画像のimgタグにalt属性を付けるだけで大丈夫に変わったけど、しかし適切に表示される画像がモバイルユーザビリティのエラーを引き起こすのはおかしいので、どうしてかの原因を突き止めたくなった。色々とやってみると普通に載せるかぎりはalt属性がない1000px以上の非常に大きな画像でもCSSで画面内に収められてさえいれば大丈夫で、どうにも駄目だといわざるを得ないのがブログの記事にJavaScriptで後から挿入する遅延読み込みの画像だった。サイトに後から挿入する画像はモバイルユーザビリティのエラーを良く注意しておきたい僕はブログの表示速度の高速化のために投稿画像の遅延読み込みの自動化のプログラムを導入している。全ての投稿画像は表示位置が画面内に入る直前まで読み込まれないんだ。初回で表示される上の方の投稿画像は大丈夫だったけれども画面外で後から読み込まれる下の方暖画像にalt属性がないとモバイルユーザビリティのエラーになってしまっていた。元々、複数の画像の横並びで、それぞれの読み込み中に画面からはみ出すことがあってやはりSearch Consoleのモバイルユーザビリティのエラーを引き起こしたし、ブログで明らかに表示が崩れると分かったから投稿画像の遅延読み込みのプログラムを直ぐに修正した。しかし今回は縦に一枚の表示で、見た目には表示が全く崩れないにも拘わらず、駄目になっていた。Search ConsoleのURL検査やモバイルフレンドリーテストのテストのスクリーンショットでは明らかに画像かはみ出した結果として他の文章などの領域が狭められていた。これはalt属性を付けるだけで、簡単に直すことができる。しかしおかしいと思うのがalt属性は画像の表示とは関係ないためで、それは飽くまでも画像の代替文のために使われるものだからサイトのデザインには影響しないはずなんだ。Search Consoleのモバイルユーザビリティの捉え方がどうなっているかは良く分からない。一つだけいえそうなのは画像のサイズがスマホの画面よりも大きければそれ自体からエラー判定を食らう恐れを完全に免れるわけには行かない。alt属性を付ける以外にも画像のimgタグの横幅を指定するwidth属性の値を756px以下にすることでも改善できたから画像のサイズの計算が実際の表示と同じくらい重視されているともいえそうだ。画像の遅延読み込みもHTMLのloading属性のlazyを付けてサイト表示の最初から発動させる場合は大丈夫みたいだ。JavaScriptで途中から付けて――サイト表示を、一瞬、止めることになっても――やろうとするとやはりモバイルユーザビリティのエラーを食らう。およそサイト表示の最初からソースコードに記載されてない画像、JavaScriptで途中から挿入するものなどは結果的に適切に表示されてもモバイルユーザビリティのエラーを引き起こす危険性が高まるんだろう。特殊なサイトかも知れないけど、するとSearch Consoleでも変わったことが起きてしまう。