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

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Web

Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法

Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法について説明します。

no image

Webサイトのスタイルガイド作成

参考 Webデザインのスタイルガイドの作り方 | UX MILK

DokuWiki

DokuWiki Wrapプラグインの使い方

DokuWiki を使う上で、外せない Wrapプラグイン の使い方について書きます。 目次1. DokuWiki の Wrapプラグインとは?2. 基本的な使い方<div> タグと&lt …

Web

Screen Wake Lock API を使って、ディスプレイをスリープさせないWebページを作る

Screen Wake Lock API を使ったサンプルページを作りました。