Wordpress

【JIN】コンテンツの幅が画面の幅を超えていますってサチコさんに怒られた件【WordPress】

Rito
Rito

Google Search Console使ってます!
Rito(Rito)です!

ブログ運営に必須っていうから、とりあえず導入するもよくわからず使っているグーグルサーチコンソール。
ちゃんと使い方覚えないとなーと思いつつ、放置している案件でございます。

さて、この度そのGoogle Search Consoleからメールが届きまして。
メール受信から解決(?)まで至ったので、記事にしておこうと思います。

この記事で書くこと
  • 「モバイルユーザビリティ」の問題でGoogle Search Consoleにエラー表示が出た件
  • 「クリック可能な要素同士が近すぎます。」を解決。
  • 「コンテンツの幅が画面の幅を超えています。」を解決。

それではいきましょう!

コンテンツの幅が画面の幅を超えています。

Google Search Console「通称:サチコ」

使い方はよくわかっていませんが、サイトのエラーとか教えてくれたり、どんなキーワードで自分のサイトが検索されてるのかを調べたりできる凄いツール。

そのサチコさんから、メールが届きまして。

問題の内容

  • ちょっと!コンテンツの幅が画面の幅を超えてるじゃない!
  • クリックできる要素同士が近すぎるわよ!

とのこと。

ふむ。なるほど。

そういうことであれば、その該当ページを教えていただけませんか?サチコ殿。

該当ページ

ということで、早速Google Search Consoleにアクセス。

左側のモバイルユーザビリティをチェックすると。
該当箇所

エラーが1件あるやんけ!!

で、その該当箇所は?

不思議なページエラー

url
該当箇所「https://rito105.com/page/3/

Rito

まじで心当たりが無い…。

ただの最新記事の3ページ目。

iPhone8で見ても、iPhone5Sで見ても、zenfoneで見ても画像がコンテンツ幅をオーバーして見えなくなっている箇所が見当たらない…。

んー。さっぱりわからん。

他のページも、もしかしたら?

しかしこれはあくまでも「例」らしいです。

これは単なる「例」に過ぎません。サイトのインスタンスが、この表にすべて含まれているとは限らないためです。インスタンスは、次のような理由で省略されることがあります。
・表の行数の制限(1,000 項目)
・インスタンスが最後に試行されたクロールの後に発生した

引用:Google Search Console

つまり、1ページ目や2ページ目も同じようなエラーが出ている可能性があるということ。

しかし、このあたりの設定はまるでいじっていないのでさっぱりわかりません。

モバイルフレンドリーテストツールを使う。

わからんので、うちのサイトはモバイルフレンドリーなのかを調べるツールを使用します。

Google先生が出しているモバイルフレンドリーテストツールです。

モバイルフレンドリーテスト

このモバイルフレンドリーテストを使えば、自分のサイトがモバイルフレンドリーなのかがわかりますよ!

モバイルフレンドリーテストの結果

モバイルフレンドリー!!

あ、ありがとうございます。

でもサチコさんはダメって…。

修正してないけど、修正したって言っちゃおう。

よくいるじゃないですか、その時の気分で「やり直してこい」っていう上司。

何も変えてないのに、もう1回提出したらすんなり通っちゃうことってありますよね。

いいや、修正したことにしちゃお。(にっこり)

サチコサン、シュウセイ、シマシタヨ。

Validation 開始。

修正しましたよ。(何も修正していないけど)

と、Google Search Consoleさんに進言すると

「Validation開始するわよ!」と言われました。

Validationとは
【名】検証、妥当性確認、確証

つまり「確認するから待ってなさい!」ってこと。

ちょっと怪しいかも?なプラグイン

調べてみると、同じようなエラーで困っている人が複数いました。

この問題でちょっと怪しいかもしれないプラグインを私は2つほど使っていました。

(私の場合はこれが原因じゃなかったんですけど。)

ちょっと怪しいプラグイン
  • Autoptimize
  • BJ Lazy Load

2つとも読み込みをゴニョゴニョして、表示を早くする系のプラグインなので、もしかしたら悪さをしちゃうかも。

解決しない人で使っていたら、OFFにして再度チェックしてみてね!

翌日:8:17 a.m.:サチコさんからメールが届く。

脳内翻訳
「あんたのサイトの問題が修正されたわ!コンテンツの幅が画面の幅を超えていた問題は、直ったようね!やるじゃない!」

何もしてないんですけどね。

同様に、「クリック可能な要素同士が近すぎます」問題も修正完了メールが届いていました。

なんだったんだ…。

PCで確認しに行く

エラー0
問題なし

ですよねぇ!?(知ってた!)

合格!

結果。

サチコさんの気まぐれにより、

「ふ、ふん!私だってたまには間違えることだってあるわよ!」

ということで、サチコさんの気まぐれにより3時間ほどグルグルと調べて回ったわけですが…。

よくわかりませんでした!

CV:釘宮理恵で脳内変換していなかったらキレてた。

危ない危ない。

釘宮理恵ツンデレキャラがバチボコに合う声優さん。ハマりすぎると「釘宮病」を発症する。

貴重な日曜日の3時間をムダにした私なのでした。

完!

COMMENT

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