広告によっておこるCLS(レイアウトのズレ)を修正する方法

サイトへの広告を増やしていくとたまにサーチコンソールでこのような「CLSに関する問題」というエラーが出る場合があります。

『CLS』というのはサイトを読み込む際の画像や広告などのレイアウトのズレの大きさなどを示す指標です。

※CLSは広告だけで起こるというものではありません。

具体的にどんなものかというとこの動画がわかりやすいですね。(この人はグーグルのアディ・オスマニ氏という方だそうです^^)

左側の画像は、画像を表示される前は左に寄っていた文字列が、表示されたとたんに右にズレていますね。

この画像や広告などの表示によるレイアウトのズレが「CLS」と呼ばれるものです。

これが起こる事で、「さっきまで文字列だったのに気づいたら触ってた場所が広告になっててクリックしてしまった!」なんていうユーザーの誤クリックが発生したり、ユーザビリティが下がったりということが起こりえるわけなのです。

当然Googleはこうしたユーザーエクスペリエンス(UX)を下げてしまうサイトを問題視しますので、エラー(指標の目安0.25以上)として警告を促しているわけです。

ですので、もしこの数値がきになって少しでも改善したいという場合は試しに下記の方法で試してみてくださいね。

広告によるCLSのズレを防ぐ方法

CLSを防ぐまずひとつの方法として、広告を貼り付ける場所にあらかじめ広告用のスペースを事前に確保するというものです。

上のツイート動画でいうところの、右側の画像の例になりますね。こうすることによって広告による表示ズレを少なくすることができます。

このように広告がまだ表示されていなくても、広告が表示される予定の場所に先に空間を確保する方法をお伝えしていきます。

実際に広告の表示枠を確保してみましょう

普段は広告コードのみをはり広告表示をしているはずですが、そのコードに下記のコードを追加していきます。

コピペで使用していただいてOKです。

  1. <center><style>
  2. .container {
  3.     display: block;
  4.     width: 100%;
  5.     height: 326px;
  6.     background: #ccc;
  7.  overflow:hidden;
  8. }
  9. </style>
  10. <div class=“container”>
  11. ここに設置する広告コードを貼る
  12. </div></center>

このコードの下記の部分をあなたが表示させたい広告によって変えて使用してください。

④、⑤、⑥、⑫のコードは任意で設定をしていきます。

モバイルファーストビューレクタングル広告のおすすめ数字
④確保する横幅・・・100%(px設定も可)⑤確保する高さ・・・326px⑥背景色・・・背景の色にしたいカラーコード(デフォルトはグレー)⑫表示する広告タグ・・・ここの文字はすべて消して、設置する広告タグを挿入デバイスによっても違うので、公開画面を見ながら微調整で設定してみてください。
上記で作成したタグを表示させたい場所へ設置していき、完了です。

修正検証期間は約1ヶ月です。

修正が完了したら、サーチコンソールで再検証申請をしていきましょう。

検証期間は約1か月となります。

検証で基準に合格した場合は下記のように緑表記になります。

もし「検証失敗しました」と出た場合は、広告以外の画像ずれなどの影響もあるかもしれないので、他の可能性も疑ってみるとよいですね。

CLSの数値やエラー項目のチェック方法

CLSの数値やエラー項目はGoogleの提供するPageSpeed Insightsで確認することができます。

こちらの数字が改善された後に、サーチコンソールの方で、修正を検証ボタンを押して、Google側に通知すると後日エラーが解消されます。エラーが解消されるまでには2週間〜1ヶ月を目安にしておくとよいでしょう。なんでそんなにかかるのかは不明ですが・・ ^ ^ ;