WordPressテーマSANGOの質問

アドセンス広告のPC⇔モバイルのレスポンシブ表示の際のレイアウト崩れについて

アバター
sh

お世話になっております。
現在サーチコンソールにていくつかのページで以下の2つの問題が発生しています。
[コンテンツの幅が画面の幅を超えています],[クリック可能な要素同士が近すぎます]
※サイトに貼ったURLは一例

しかしモバイルフレンドリーテストを実行すると「このページはモバイル フレンドリーです」の表記になってしまい何が問題かがわかりません。
https://search.google.com/test/mobile-friendly?hl=ja&id=90ZN_qnd86vQmj3ewBlTIg

原因を調査中に発見したのですが、サイトをPCで表示したあとにそのままChromeのコンソールでモバイル表示にするとアドセンス広告がはみ出してしまい、横へのスクロールが発生してしまいます。
逆にモバイル表示してからコンソールでPC表示に戻すと広告がメインコンテンツ外(左)に飛んでしまいます。

広告の種類はレスポンシブで、記事タイトル下広告ウィジェット、Advanced Adsで(3,5,7,9番目のH2要素の前)を使用して表示しておりますが、どちらの方法も同様にだめです。

以前使っていたテーマでは表示を切り替えてもメインコンテンツ内に収まりスクロールも発生しませんでした。
このあたりがモバイルフレンドリーではない原因だと考え対処したいのですが、CSS等で修正可能でしょうか。可能であれば解決方法をご教示いただきたいです。
よろしくお願いいたします。

SANGO
SANGO 質問ガイドライン
コメントへの回答
サルワカくん
サルワカくん
2020/06/02

お世話になっております。
掲載いただいたページを拝見しましたが、コンテンツの幅が画面の幅を超えてはいないようなので、
クロール時にたまたまスタイルや埋め込みコンテンツなどがうまく読み込まれず、はみ出てしまったのかもしれません。

モバイルフレンドリーテストに合格するのであれば、様子見で問題ない気がします。

以前使っていたテーマでは表示を切り替えてもメインコンテンツ内に収まりスクロールも発生しませんでした」

→ これは確かな情報ですか?
アドセンスのレスポンシブ広告は読み込み時に埋め込まれる幅を計測して、そこにフィットするサイズの広告を表示する仕様だと考えられます。
どのテーマであっても広告読み込み後にレスポンシブに広告サイズが変わることはないと思うのですが…。
(広告のはみ出た部分を強制的に非表示にすることならできますが)

以前利用されていたテーマ名を教えていただけますか?
なんらかの対処方法がある場合、SANGOでも改善のアップデートを行います。

アバター
sh
2020/06/03

以前使っていたテーマはJINでした。
サイト欄に動作検証したYouTube動画のURLを貼っておきました。その動画の概要欄に検証に使った記事のURLと比較対象のJINでの検証動画のURLを貼ってあります。
PC→モバイル時にスクロール発生、モバイル→PC時にメインコンテンツ外に広告が移動しております。
PC→モバイルの表示変更タイミングによってはアドセンス広告が画面幅の最大なり、記事が小さくなることでスクロールが発生しないこともありました。

>どのテーマであっても広告読み込み後にレスポンシブに広告サイズが変わることはないと思うのですが…。
>(広告のはみ出た部分を強制的に非表示にすることならできますが)
→(モバイルページ的にどう評価されるかはわかりませんが)おそらくはみ出た部分を非表示にしていたのではないかと思います。

>クロール時にたまたまスタイルや埋め込みコンテンツなどがうまく読み込まれず、はみ出てしまったのかもしれません。
>モバイルフレンドリーテストに合格するのであれば、様子見で問題ない気がします。
→何度検証ボタンを押して検証しても改善されず気になっていたのですが、何が原因かもわからず。。。一応モバイルフレンドリーテストに合格するのでこのまま様子を見てみようと思います。

サルワカくん
サルワカくん
2020/06/03

丁寧に動画まであげていただき、ありがとうございます。
JINの動画を拝見しましたが、やはりはみ出た部分を非表示にしているようです。
SANGOでも同じようにしたい場合、以下のようなCSSを追加すると良いと思います。

.post {
  overflow: hidden;
}

ただし、この場合、はみ出た要素があった場合、横スクロールして全体を見ることができないため、
どちらを好むのかは価値観によると思います。

なお、ページ読み込み後にウィンドウサイズを変えたことにより広告がはみ出るとしても、SEOにマイナスの影響はないはずです。
Googleアドセンスが、読み込み後にサイズ調整されない仕様になっているからです。
(でなければGoogleアドセンスのレスポンシブ広告や関連記事広告を貼っているサイトはすべてモバイルフレンドリーではないということになります)

また、Googleのクローラーがページをレンダリングした後に、ウィンドウサイズを変えて表示崩れを確認しているとはまず考えられません。
Google側からすると、少しでもクロール効率を上げたい中、そのようなコストをかける余裕もメリットもないはずです。

お力になれず恐縮ですが、よろしくお願いします。

アバター
sh
2020/06/03

ご確認およびCSS例をご提示いただきありがとうございます。

>なお、ページ読み込み後にウィンドウサイズを変えたことにより広告がはみ出るとしても、SEOにマイナスの影響はないはずです。
>というのも、Googleアドセンスがそのような仕様になっているからです。
たしかにそのとおりですね。
様子見で設定してみてサーチコンソールを見守ろうと思います。
ありがとうございました。

サルワカくん
サルワカくん
2020/06/03

ご理解いただきありがとうございます。
よろしくお願いします。