女性個人事業主の為のWEB制作

[コンテンツの幅が画面の幅を超えています]対処方法

ヘッダー

グーグルのアルゴリズムアップデートで今まで安定していたアクセス数がガックリと落ち始め、アクセス数も1/10になってしまったサイトもあってだいぶ焦っております泣

そんな中、私がサーチコンソール を使用しURLテストをしてみたところモバイルユーザビリティに引っかかっていました。無事修正できたので報告と対処方法をお伝えします。

まず始めにサーチコンソール でURLテストをする

サーチコンソール 管理画面→URL検査→検査したいサイトのURLを入力します。

URLはグーグルにすでに登録済みと出ますが、ここで安心せずに右上の公開URLをテストをクリックしてみてください。

私はこんな画面が出ました。

はい。出ましたね、問題ありです。

モバイルユーザビリティに問題あり[コンテンツ幅が画面の幅を超えています]

モバイルフレンドリーではないって事は、アイフォンとかスマホで見た時に、見にくいですよ〜って事ですよね。

私はTCDのワードプレステーマを使っていてレスポンシブ対応になっているはずなのになんでや〜!!!とブツクサ言いながら修正を加えてみました。

[コンテンツ幅が画面の幅を超えています]を対処するにはAMP設定

まず、私のワードプレスにはAMP対応になるプラグインを入れているんです。

TCDワードプレステーマはレスポンシブ対応だし、AMPのプラグインも入れているからモバイルフレンドリーなはずなのになぜ??と疑問を抱きながら対象のURLの管理画面を開き問題点を検証してみました。

[コンテンツ幅が画面の幅を超えています]を対処するには画像のAMP設定が必要だった

挿入している画像をクリックすると、こんな画面になります。

まさかの凡ミスで、右下の、AMP Noloadingと、Add lightbox effectにチェックが入っていませんでした。こちらにチェックを入れると、

こんな感じで青色のチェックが入ります。全ての挿入画像のチェックを入れて再度URL検査をしてみると。

見事に解決です。しかもクリック可能な要素同士が近ずぎるという問題も解決されていました。

めでたしめでたし。

[コンテンツ幅が画面の幅を超えています]対処方法まとめ

  • AMPプラグインを入れる
  • 画像のAMP設定を忘れない

他の記事もきっとこれが原因でアクセスが減ったのかな?と思うので1個ずつ修正していきたいと思います泣