Web

<pre><code>タグが引き起こす モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」

投稿日:

1. 「コンテンツの幅が画面の幅を超えています」というエラー

本サイトのいくつもの Webページが、Google Search Console の モバイルユーザビリティでは「コンテンツの幅が画面の幅を超えています」というエラーが検知されるものの、モバイル フレンドリー テスト では検知されないという現象が発生していました。

GSC のモバイルユーザビリティではエラーが検知される
モバイルフレンドリーテストでは検知されない

2. ハッキリとした原因は不明

モバイル ユーザビリティ レポート – Search Console ヘルプ によると、水平方向スクロールを必要とするページでこのエラーが検知されるようです。

確かに「コンテンツの幅が画面の幅を超えています」が検知されたページでは、<pre><code> を使っており、その部分は水平スクロールできるようになっています(モバイルによるアクセスの場合)。

ただおかしなことに、他のサイトで同じように <pre><code> を使っているページではこのエラーは検知されません。

いろいろ実験もしたのですが、根本的な解決方法は見つかりませんでした。

3. <code> の style属性を利用する

というように困っていたのですが、偶然 Don’t let large code examples break Google’s mobile-friendly test という記事を発見し、対処療法的ではあるものの対策が分かりました。

それは、<code> タグの style 属性に "display:block;overflow-x:auto;" を指定するという方法です。

<pre><code style="display:block;overflow-x:auto;">
  ...
</code></pre>

確かにこれが効きました。

URL検査で「モバイル ユーザビリティ」がOKになりました(対策前はエラーでした)

しかしこれもおかしな挙動です。なぜなら、本サイトでは HTML 内の <style> タグに以下を記述しているため、わざわざ style 属性で同じプロパティを上書きする必要はないはずだからです。Google 側で上手く認識できないのかもしれません(バグ?)。

<style>
(省略)
pre code {
  display: block;
  overflow-x: auto;
}
(省略)
<style>

4. おわりに

結局、どのような条件のWebページだと「コンテンツの幅が画面の幅を超えています」のエラーが検知されるのか分かっていません。

また、<code> タグの style属性に記述するとエラーが抑制されるのもおかしな動作です。参考にさせて頂いた記事は約3年前に執筆されていますので、ずっと放置されている現象のようです。

Google Search Console からフィードバックを送っておきました。

5. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

web development

HTTPレスポンスヘッダ COEP, COOP, CORP, CORS についてのメモ

HTTP Response Header である COEP, COOP, CORP, CORS についてのメモです。

Google

Google マップの便利な機能

目次1. はじめに2. Googleマップの便利な機能3. 経路検索(ルート検索)経路をホーム画面に追加4. 運転モード5. マイプレイス6. 印刷 1. はじめに Googleマップ はとても便利な …

Web Vitals

highlight.js が引き起こすレイアウト・シフトを防止する

highlight.js が引き起こすレイアウト・シフトを防止する方法を紹介します。

Firefox

Firefox のコンテンツブロッキング (Enhanced Tracking Protection)

Firefox の コンテンツブロッキング 機能について説明します。

Glitch

Glitch に DokiWiki を設置しようとして失敗しました

Glitch に DokuWiki を設置しようとしたのですが、残念ながら失敗してしまいました。ここにその記録を残しておこうと思います。