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

メールアドレスが公開されることはありません。

関連記事

プライバシー

ウェブブラウザのサードパーティ・クッキーを無効にする方法

目次1. サードパーティ・クッキーとは?2. サードパーティ・クッキーを無効にする手順Chrome の場合Firefox の場合Microsoft Edge の場合Internet Explorer …

Web

Cookie使用の同意を求めるポップアップを表示する (Cookie Consent by Osano)

Cookie Consent by Osano の使い方について説明します。

JavaScript

console.log や console.error の便利なところ

console.log や console.error の便利なところを紹介します。

CSS

CSS: Individual transform properties が便利

CSS の Individual transform properties が便利です。

Google App Engine

GAE (PHP 7) で Cloud Firestore を使う手順

Google App Engine で Firestore を使う手順について説明します。