1. 「コンテンツの幅が画面の幅を超えています」というエラー
本サイトのいくつもの Webページが、Google Search Console の モバイルユーザビリティでは「コンテンツの幅が画面の幅を超えています」というエラーが検知されるものの、モバイル フレンドリー テスト では検知されないという現象が発生していました。
2. ハッキリとした原因は不明
モバイル ユーザビリティ レポート – Search Console ヘルプ によると、水平方向スクロールを必要とするページでこのエラーが検知されるようです。
確かに「コンテンツの幅が画面の幅を超えています」が検知されたページでは、<pre><code>
を使っており、その部分は水平スクロールできるようになっています(モバイルによるアクセスの場合)。
ただおかしなことに、他のサイトで同じように <pre><code>
を使っているページではこのエラーは検知されません。
いろいろ実験もしたのですが、根本的な解決方法は見つかりませんでした。
3. <code> の style属性を利用する
というように困っていたのですが、偶然「Don’t let large code examples break Google’s mobile-friendly test」(https://digitalardor.com/articles/code-examples-google-mobile-friendly-test/)(リンク切れ) という記事を発見し、対処療法的ではあるものの対策が分かりました。
それは、<code>
タグの style 属性に "display:block;overflow-x:auto;"
を指定するという方法です。
<pre><code style="display:block;overflow-x:auto;">
...
</code></pre>
確かにこれが効きました。
しかしこれもおかしな挙動です。なぜなら、本サイトでは HTML 内の <style>
タグに以下を記述しているため、わざわざ style 属性で同じプロパティを上書きする必要はないはずだからです。Google 側で上手く認識できないのかもしれません(バグ?)。
<style>
(省略)
pre code {
display: block;
overflow-x: auto;
}
(省略)
<style>
4. おわりに
結局、どのような条件のWebページだと「コンテンツの幅が画面の幅を超えています」のエラーが検知されるのか分かっていません。
また、<code>
タグの style属性に記述するとエラーが抑制されるのもおかしな動作です。参考にさせて頂いた記事は約3年前に執筆されていますので、ずっと放置されている現象のようです。
Google Search Console からフィードバックを送っておきました。
5. 参考
- モバイル ユーザビリティ レポート – Search Console ヘルプ
- Don’t let large code examples break Google’s mobile-friendly test