ここ最近はずっとCLSのことを考えて過ごしています。インプレッション報酬になって以降、私のブログ収益は右肩下がり。その一因になってるのがCLSの問題ではないかと思ってます。
上の記事で収益が減ってるというお話を書きました。そしてCLSの問題解決への対応はアドセンスの自動広告の無効化でした。今回はCLSについていろいろと調べてる中で、自動広告を有効化したままCLSの数値を下げる方法についにたどり着きましたのでご紹介します。
それでは、短い記事ですがどーぞ！
CLSの数値が高い原因はレイアウトシフト
CLSの数値がなかなか下がらずしぶしぶアドセンスの自動広告を無効化していました。個人的にはGoogle側で広告を出してくれるので無効化はしたくなかったのですが、ブログタイトルの真下に大きく自動広告を出してくるおかげでページの上部でレイアウトシフトが起き、その結果CLSの数値はとても悪かったです。
その時の私がとった対応は、自動広告を無効化して、記事の目次下に手動で記事のコードを入れるという作業でした。現時点で300を超える記事に対して一つ一つコードを埋め込んでいったのでした。本当はこんな作業やりたくはなかったのですが、アドセンスがインプレッション報酬になった今、なるべく広告は出したいというのがブロガーの心情ではないかと思います。
アドセンスの広告は表示位置を制御できる
手動で記事の中に広告を貼っていったのですが、効率が悪すぎます。できれば自動広告を有効化したい一心でネット上を探し回りました。そしてついに見つけたのです。
広告を表示する場所を制御できる方法を。これが出来るとページの上位部分で広告を出せなく出来ます。すると必然的にPage Speed InsightsでのCLSの数値は下がるはずなのです。ではさっそく、広告表示を制御する手順をご説明します。
制御する手順はこちらです
まずは、アドセンスの自動広告の編集ページへ遷移します。
おそらく初期表示はこのような虫眼鏡の表示になるはずです。
このタイミングで、検索ボックスにブログ記事のURLを張り付けてみてください。
今回は、こちらの記事のURLでご説明します。
検索ボックスにURLを記入すると記事のプレビューが表示されると思います。
画面右のほうに除外エリアのリンクがあるのでそこを押下。
記事のプレビュー欄に青色で「エリアを除外しますか？」と聞かれるので、自動広告を表示させたくないエリアを選びます。
今回はレイアウトシフトを防ぐのが目的なのでページ上部の広告を非表示にします。こんな感じです。
こうすることで、ページ上部でのレイアウトシフトは起きなく出来ます。ページの下の方でレイアウトシフトが生じる可能性はありますが、ページの上部と下部ではCLSに与える影響が違います。ページ上部でレイアウトシフトが起きたほうがCLSの値は悪くなります。
Page Speed Insightsで確認
最後に、Page Speed InsightsでCLSの値を確認します。
結果の画像がコチラです。CLSは０です。
これで、自動広告を有効化したままCLSの値を低く抑えることが出来ました。
まとめ
今回は、自動広告の表示位置を変えてCLSの値を低くする方法のご紹介でした。これって、自動広告を有効化してるのでGoogleにとってもいいし、サイト運営者側からすると広告のインプレッションも増えるのでまさにwin-winだと思うのです。
今回の対応がCLSの問題を解決する最善策だと私は思ってます。
以上、短い記事でしたが読者さまのお役に立てれば幸いでございます。
ごまさば
