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

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

関連記事

Google

Googleマップで調べた経路をホーム画面に追加する (Android)

Android版の Googleマップで調べた経路は、ホーム画面にアイコンとして追加することができます。 手順は以下となります。 Google マップで調べた経路をホーム画面に追加する手順 (1) G …

Web

AMP に関する情報

AMP 本来の目的からずれているように見える。この機能は必要?

Web

Digest認証の設定手順

Digest認証の設定手順について説明します。

Web

Chrome で SameSite=None に関する Cookieについての警告が表示される

Chrome で SameSite=None に関する Cookieについての警告が表示される理由について説明します。

Web

ウェブサイトを開いたら表示される「通知の表示」を求めるポップアップについて

ウェブサイトの「通知」機能について説明してます。