Web

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

投稿日:2021年4月30日 更新日:

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」(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>

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

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

投稿日時のところに「○時間(前)」と表示されるサービスについての疑問

投稿日時のところに「○時間(前)」と表示されるサービスについての疑問です。

Web

URLリダイレクトの動作

URLリダイレクトの動きについて説明します。

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。

Web

複数のGoogleアカウントのGmailページを一括で開く

複数のGmailアカウントのメールページを一括で開く方法について書いています。

Chrome

Chrome の「ピクチャー イン ピクチャー」機能を使って、YouTube の動画を最前面で再生する

目次1. Chrome の「ピクチャー イン ピクチャー」機能2. ピクチャー イン ピクチャーを行う方法3. プレイヤーの操作など3. おわりに 1. Chrome の「ピクチャー イン ピクチャー …