Google Search Consoleで、コンテンツの幅が画面の幅を超えていますというモバイル ユーザビリティに関するエラーメッセージが表示されていました。
該当する部分は、<pre><code></code></pre>で囲った部分で横スクロールバーが表示されている部分です。今までに、この部分でエラーメッセージが表示されたことが無いので、不思議に思いながら対処方法を探してみました。
<code>のstyle属性に"display:block;overflow-x:auto;"を指定すると良いという情報がありましたので、試してみた結果、エラーメッセージは表示されなくなりました。
参考URL : <pre><code>タグが引き起こす モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」 - ラボラジアン (laboradian.com)
スタイルシートに設定をしてもエラーは解消できないらしいので、「もしかしたら、AMPが影響している可能性があるのでは?」と考えて、AMPのテンプレートに
pre code { display: block; overflow-x: auto;}
を追加してもエラーが解消できることを確認出来ました。
Google Search Consoleにおいてモバイル ユーザビリティに関するエラーが表示されたら、AMPについても調べる必要があると認識しました。でも、AMPで問題があるなら、Google Search Console内のAMPの部分でエラーを表示して欲しいです。
【2021年5月10日追記】
AMPでは、overflow-x:autoが使用できないという情報があったのですが、現時点ではエラーメッセージや警告メッセージは表示されていません。スマートフォン(実機)でアクセスして、<pre><code></code></pre>で囲った部分で横スクロール可能な為、正常に機能しているように見受けられます。また、The AMP Validator (ampproject.org)でチェックしても、Validation Status: PASSとなっています。
AMPの仕様について、もう少し検索して調べてみたいと思います。
コメント