Search Console に出た、CLS に関する問題: 0.1 超（パソコン）について

Alt属性 パソコンー関係
2024.08.05

ウェブページの見た目が突然変わるCLS問題とは？原因と対策をわかりやすく解説し、改善方法と診断ツールも紹介します。

    1. CLS とは何か
    2. CLSの詳細
    3. CLSスコアの範囲
    4. CLSの原因と対策
    5. 問題の診断と修正
    6. CLS(Cumulative Layout Shift)とサイドバーにGoogleアドセンスの広告との関係性
    7. 何故、サイドバーにAdsenceの広告を載せる必要があるのか
    8. 「Googleアドセンスの広告がヘッダー直下に出る」理由
    9. Googleアドセンスのヘッダー下広告の消し方
      1. 1. 自動広告を無効にする
      2. 2. 広告ユニットのコードを削除する
      3. 3. 広告の表示ルールを変更する
      4. 4. CSSを使って広告を隠す
      5. 5.サイドメニュー最上部に広告追加で消す方法
    10. 検証日数
    11. まとめ

ウェブページを見ているときに、突然コンテンツが動いてしまったことはありませんか？これがCLS（Cumulative Layout Shift）の問題です。CLSとは、ページの見た目が予期せず変わることで、ユーザーにどれだけ影響があるかを測る指標のことです。急なレイアウトの変化は混乱や誤操作を引き起こし、ユーザー体験を損ねる原因となります。CLSの詳細やその対策方法をわかりやすく解説します。画像や広告のサイズ指定、動的コンテンツの工夫、フォントの読み込み方法の最適化など、具体的な改善策を紹介します。また、問題を診断するための便利なツールもご紹介。ウェブページのパフォーマンスを向上させ、ユーザーにとって快適な閲覧環境を作るためのヒントが満載です。ぜひ最後までご覧ください。

CLS とは何か

CLS（Cumulative Layout Shift）は、Webページの視覚的な安定性を示す指標です。日本語訳すると「累積レイアウトシフト」を意味します。簡単に言うと、ページを読み込んでからユーザーがコンテンツをクリックしようとした時に、予期せぬレイアウトの変化が起こることを示します。

CLSの詳細

  • 何を測るか: ページの読み込み中やインタラクション中に、視覚的なレイアウトが予期せず変わることの頻度と影響を測定します。
  • なぜ重要か: 突然のレイアウトの変化はユーザーにとって混乱や不快感を引き起こし、特に誤クリックや誤操作につながる可能性があります。

CLSスコアの範囲

  • 良好: 0.1 以下
  • 改善が必要: 0.1 から 0.25
  • 悪い: 0.25 以上

Googleの「Page Speed Insight」というサイトを使うことで、ブログの速度やCLSなどの情報を見ることができるので、試してみてください。

CLSの原因と対策

  1. 画像や広告のサイズが決まっていない
  • 原因: 画像や広告のサイズが事前に指定されていないため、表示されると他のコンテンツが動いてしまう。
  • 対策: HTMLやCSSで画像や広告のサイズを事前に指定します。
   <img src="image.jpg" width="600" height="400" alt="Example image">
  1. 動的に挿入されるコンテンツ
  • 原因: JavaScriptでページ読み込み後に新しいコンテンツが追加されると、他の要素が押し出されて動くことがあります。
  • 対策: 新しいコンテンツが追加される前に、そのスペースを予約しておきます。
   <div style="height: 200px;">Loading...</div>
  1. フォントの読み込み
  • 原因: Webフォントの読み込みが遅れると、フォントが切り替わる際にテキストのサイズが変わってレイアウトが動くことがあります。
  • 対策: CSSのfont-display: swapを使用して、フォントの切り替えをスムーズにします。
   @font-face {
       font-family: 'MyFont';
       src: url('myfont.woff2') format('woff2');
       font-display: swap;
   }
  1. 非同期コンポーネントの読み込み
  • 原因: 非同期で読み込まれるウィジェットや埋め込みコンテンツが他の部分を押し出してしまいます。
  • 対策: 非同期コンポーネントが読み込まれる前に、その領域を確保しておきます。
   <div style="height: 300px;">Widget loading...</div>
  1. アニメーションやトランジションの使用
  • 原因: アニメーションやトランジションが他の要素に影響を与え、予期せず動くことがあります。
  • 対策: アニメーションやトランジションを慎重に設計します。

問題の診断と修正

CLSの問題を診断するには、以下のツールを使用します。

  • Google ChromeのDevTools: “Performance”タブでレイアウトシフトを確認できます。
  • Lighthouse: CLSスコアを測定し、改善点が分かります。
  • PageSpeed Insights: ページのパフォーマンスを分析し、CLSスコアを見ることができます。

これらのツールで問題を見つけ、上記の対策を実施することで、ウェブページの視覚的安定性を向上させ、ユーザーエクスペリエンスを改善できます。

CLS(Cumulative Layout Shift)とサイドバーにGoogleアドセンスの広告との関係性

CLS(Cumulative Layout Shift)とは

  • CLS は、ウェブページの視覚的な安定性を測る指標の1つです。
  • ページ上の要素が予期せず移動することで、ユーザーの体験が損なわれるのを防ぐことが目的です。
  • CLS の値が低いほど、ページの視覚的な安定性が高いと評価されます。

サイドバーにアドセンス広告を載せることとCLSの関係

  1. 自動広告の配置が原因となる可能性
  • アドセンスの自動広告は、ページ上の空きスペースに配置されるため、
  • 広告の表示/非表示によってページ上の要素が予期せず移動する可能性があります。
  • これがCLSの悪化につながる可能性があります。
  1. 手動広告配置で改善できる
  • サイドバーの広告を手動で配置することで、
  • ページ上の要素の移動を最小限に抑えることができます。
  • これによりCLSの値を改善できる可能性があります。
  1. 広告の最適化が重要
  • サイドバーの広告配置を最適化することで、
  • ページ上の要素の移動を抑えつつ、収益も確保できます。
  • 広告の大きさ、位置、数などを調整する必要があります。

つまり、サイドバーにアドセンス広告を載せる際は、自動広告ではなく手動広告の配置を検討し、広告の最適化を行うことで、CLS の改善につなげることができます。
これにより、ユーザー体験の向上とサイト収益の確保の両立が期待できます。

何故、サイドバーにAdsenceの広告を載せる必要があるのか

サイドバーにアドセンス広告を載せる理由

  1. クリック率の確保
  • サイドバーの広告は、メインコンテンツとは別の領域にあるため、ユーザーの視線を引きつけやすい
  • これにより、広告のクリック率を高く維持できる
  1. 収益の安定化
  • メインコンテンツ内の広告だけでは収益が不安定になりがち
  • サイドバーの広告を組み合わせることで、収益の安定化が期待できる
  1. ユーザー体験の向上
  • メインコンテンツを邪魔しないようにサイドバーに広告を配置することで、ユーザーの読書体験を損なわない
  • これにより、ユーザーの満足度が高まる
  1. SEO への影響回避
  • メインコンテンツ内に広告を多く配置すると、検索エンジンの評価が下がる可能性がある
  • サイドバーに広告を配置することで、この影響を最小限に抑えられる
  1. 広告配置の柔軟性
  • サイドバーは、メインコンテンツとは独立した領域なので、広告の配置を柔軟に変更できる
  • これにより、広告の最適化が容易になる

以上のように、サイドバーにアドセンス広告を載せることで、収益の安定化、ユーザー体験の向上、SEO への影響回避などの効果が期待できます。ただし、サイドバーの広告クリック率は一般的に低めなので、メインコンテンツ内の広告配置も併せて検討する必要があります。

「Googleアドセンスの広告がヘッダー直下に出る」理由

なぜ広告がヘッダー直下に出るのか

  • Googleアドセンスでは、広告の配置場所を自動的に決める「自動広告配置」機能があります。
  • この機能では、ユーザーの視線に入りやすい場所、つまりページ上部のヘッダー直下に広告を配置することが多いです。
  • これは、広告の視認性を高め、クリック率を上げるためのデフォルトの設定になっています。

自動広告配置の問題点

  • しかし、広告が多すぎるとページ上部が広告で占領されてしまい、ユーザーエクスペリエンスが損なわれる可能性があります。
  • ユーザーが広告に邪魔されてコンテンツにアクセスしづらくなったり、ページ全体の見栄えが悪くなる可能性があります。

解決方法

  • 自動広告配置の設定を見直し、広告の数や大きさ、配置場所を手動で調整することをおすすめします。
  • 広告とコンテンツのバランスを取り、ユーザビリティを損なわないよう最適化する必要があります。
  • 広告収益と UX のバランスを考えながら、適切な広告配置を見つけることが重要です。

つまり、Googleアドセンスの自動広告配置機能によって、広告がヘッダー直下に出る場合があります。しかし、ユーザー体験を損なわないよう、広告の最適化が必要不可欠です。

Googleアドセンスのヘッダー下広告の消し方

Googleアドセンスのヘッダー下広告を消す方法はいくつかあります。その具体的な手順を説明します。

1. 自動広告を無効にする

  1. Google AdSenseにログイン
  • Google AdSenseのウェブサイトにアクセスし、ログインします。
  1. 広告設定ページに移動
  • 左側のナビゲーションメニューから「広告」をクリックします。
  • 「サイト」セクションに移動し、対象のサイトを選択します。
  1. 自動広告の設定を編集
  • 「自動広告」タブを選択します。
  • 「自動広告の設定を編集」をクリックします。
  1. ヘッダー下の広告を無効にする
  • 「広告フォーマット」セクションで「ヘッドライン広告」を探します。
  • それを無効にします（スイッチをオフにします）。

2. 広告ユニットのコードを削除する

  1. ウェブサイトのコードを編集
  • ウェブサイトのヘッダー下にある広告コードを削除します。通常、このコードはHTMLファイルやCMSのテンプレートファイルにあります。
  1. 該当する広告ユニットを削除
  • AdSenseの「広告」セクションに戻り、「広告ユニット」タブを選択します。
  • ヘッダー下に表示される広告ユニットを特定し、それを削除します。

3. 広告の表示ルールを変更する

  1. カスタムルールの設定
  • AdSenseの「広告」セクションで「自動広告」の「カスタムルール」を設定できます。
  • ここで、特定のページや特定の位置に広告を表示しないようにルールを設定します。
  1. ヘッダー下の広告位置を指定して除外
  • カスタムルールでヘッダー下の位置を指定し、その位置に広告を表示しないように設定します。

4. CSSを使って広告を隠す

  1. CSSを編集:
  • ヘッダー下の広告に特定のクラスやIDが付与されている場合、CSSを使ってその広告を隠すことができます。
   .adsbygoogle { display: none; }

これらの手順に従って、Googleアドセンスのヘッダー下広告を消すことができます。変更を加えた後、数分から数時間で反映される場合がありますので、しばらく時間をおいて確認してください。

5.サイドメニュー最上部に広告追加で消す方法

アドセンス広告をサイドバーに設置してクリックの取りこぼしをなくす - 株式会社ティンカーベル
アドセンス広告のサイドバーの設置を軽視しているブログがとても多いです。   さらに「サイドバーにアドセンス広告は必要ない」という情報がもありますよね。   しかし、実はサイドバーにアドセンス広告を設置
suzunoneiro.com

【ウィジェットの追加】

外観➡ウィジェット➡カスタムHTMLをクリするとウィジェットの追加ができます。

検証日数

CLSに関する問題を修正したら、Search Consoleから修正の検証を依頼することができます。検証依頼をしてもすぐにエラーが解消されるわけではありませんが、28日以内には結果が出ます。

まとめ

CLS（Cumulative Layout Shift）は、ウェブページの見た目が突然変わることでユーザーにどれだけ影響があるかをチェックするものです。急なレイアウトの変化は、混乱や誤操作を招くことがあります。対策として、画像や広告のサイズをあらかじめ指定したり、動的に挿入されるコンテンツやフォントの読み込み方法を工夫したりします。問題を診断するには、Google ChromeのDevTools、Lighthouse、PageSpeed Insightsなどのツールを使うといいです。

タイトルとURLをコピーしました