コアウェブバイタル最難関CLSの調査・改善方法をわかりやすく解説。CLS改善でPVも増える!?【SEO情報まとめ】

illustration by つきのあめだま [1]

「CWV（コアウェブバイタル）」の1つ「CLS」は、わかりづらく改善が難しい指標ではある。その調査・改善の方法を具体的に解説する。

しかも、CLSを改善したら、セッションあたりPV数や直帰率にも大きな好影響が出る可能性もある。Yahoo!ニュースでは指標がどう改善したかも紹介する。

［筆者からのおしらせ］
筆者も解説！「コンテンツSEO＆オウンドメディア運営講座」
【1/20 オンライン開催】

筆者も「コンテンツマーケターが知っておくべきSEOの基礎」についてお話しするWeb担主催の講座が、1月に開催されます！

[2]

コンテンツSEOとオウンドメディア運営を1日で一気に学べるオンライン講座で、実際に自分で手を動かすワークショップも。あなたの2021年を、SEOとオウンドメディアの勉強から始めてみませんか？

→ 海外SEO情報ブログのファンは今すぐ講座をチェック！ [2]

ほかにも、Google検索のコアアップデートやMFI、AMPなどなど、SEO担当者やサイト運営者に役立つ情報をまとめてお届けする。

• Google検索がコア アップデートを実施。年の瀬に2020年3回目の更新
• かなーり簡単にCLSを抑制する方法
• リダイレクト元URLをサイトマップに含めてもいいのか？
• 関連サイト・姉妹サイトをリンクし合うのはガイドライン違反になるのか？
• 「visibility:hidden」と「display:none」はSEO的に違いを生むのか？
• rel="noopener"なしのtarget="_blank"はもう怖がらなくてよくなる!?
• 12月のオフィスアワー: MFI後のアノテーション、認証画面のリダイレクト、AMP Page Experience Guide についてなど
• アマゾンや楽天がなくなる日がやってくる！？
• AMP Fest 2020のハイライトまとめ～AMPの注目したいデータや機能など
• GoogleのPassage Indexingは野菜の中に埋もれているトマト🍅を探し出すことができる
• SCの検索パフォーマンスとGMBのインサイトのデータはどうして一致しないのか？

今週のピックアップ

Yahoo!ニュースでPV指標を10%以上改善！ CLSの調査・特定・改善方法 [7]
コア ウェブ バイタル改善事例 （Yahoo! JAPAN Tech Blog） 国内情報

Yahoo!ニュースのサイトにおける、コア ウェブ バイタルの指標の1つであるCLS改善の例と、そのための具体的な手順や手法を紹介している。

CLSは、表示要素の予期しない移動を表す指標で、小さいほど良い（CLSほかコア ウェブ バイタル3指標の詳細はこちら [8]）。

Yahoo!ニュースでは、CLSが不良と判定されたURLの数をおよそ98%削減することに成功したそうだ。

[7]

CLSの調査と改善は、同じくコア ウェブ バイタル指標であるLCPやFIDと比べて難しい。しかし元記事では、CLSの調査や改善すべき箇所の特定などの方法を、だれでも実践できるやり方でわかりやすく解説している。

元記事では、次のような改善施策が順に示されている。

1. コア ウェブ バイタルの状況把握 ―― Search Consoleと独自ツール
2. CLSを発生させている要素の特定 ―― Chrome DevToolsとブックマークレット
3. CLSの解消

少し技術寄りの施策も含まれているが、さほど難しくないし、実践的だ。非常にわかりやすい良記事だ。

興味深いのが、画像の読み込みで発生するページレイアウトのズレをなくすと、

• セッションあたりPV数
• セッションあたり滞在時間
• 直帰率

といった指標が改善したという点だ。

[7]

「PV/セッション」や「滞在時間/セッション」が10%以上良くなったというのは、非常に大きなものだ。Yahoo!ニュースはもともとPV数が大きいため、なおさらだろう。

この変化は偶然ではない。元記事では、CLSと直帰率や滞在時間などとの相関性を示すデータ [9]を紹介している。

[9]

CLSは、ページをスクロールすればするほど発生する傾向があるものだ。そのため、この相関は「CLSを抑制すればUXが改善されユーザー行動が良くなる」という因果関係だととらえてもいいのではないかと考えられる。

2021年5月にはコア ウェブ バイタルがランキング要因に [10]組み込まれる。参考にして改善に取り組もう。

グーグル検索SEO情報

Google検索がコア アップデートを実施。年の瀬に2020年3回目の更新 [11]
例によって大変動が発生 （Google SearchLiaison on Twitter） 海外情報

広範囲にわたるコア アルゴリズムのアップデートをグーグルが実行した。太平洋時間の12月3日、日本時間では12月4日に日が変わって間もなくの時間帯だ。

Google検索のツイッター公式アカウントが実施の数時間前に事前アナウンスした。金谷氏が日本語でリツイートしている。

影響範囲が広いコア アップデートを年に3～4回グーグルは実施する。今回のコア アップデートは今年3回目だ。1回目は1月に、2回目は5月に実施している。ほとんどの場合は3～4か月間隔だ。しかし、前回からは7か月空いた。

新型コロナによる騒乱やホリデーシーズンにさしかかっていることなどから、年内のコア アップデートはもうないだろうとの予想もあったなかでの実施だ。一般的に言って、11月後半から年が明けるまで、大きな変動を伴う変更の実施をグーグルは控える。ウェブでの活動、特に購買が盛んになる時期なのでむやみに混乱を起こさないようにするためだ。ところが、今回はそんな慣例に従わなかった。

さて、どのくらいの変動が検索結果に起きているのだろうか？ “広範囲にわたる”の言葉が示すとおり、大きな変動が起きているようだ。

こちらは、SEMrush [17]という海外のSEOツールベンダーが提供しているデータだ。コア アップデート実施の翌日には、非常に大きな変動を日本のグーグルでも検知している（最大10のスコアで9.4を記録）。

米グーグル（google.com）のデータになるが、変動幅が特に大きいのは次のジャンルだった（平均値の9.4以上のジャンル）。

• アート・エンターテインメント
• 自動車・乗り物
• 美容・運動
• ビジネス・産業
• コンピューター・エレクトロニクス
• ファイナンス
• ゲーム
• 健康
• 趣味・余暇
• ホーム・ガーデニング
• インターネット・通信
• 法律・政治
• ニュース
• オンラインコミュニティ
• 人・社会
• ペット・動物
• 科学
• ショッピング
• スポーツ

サクラサクマーケティングの根岸氏 [18]は、日本でのジャンルごとの変動状況を表にしてツイッターで共有 [19]していた。

病院、法律、お金関連のワードに大きな影響が出ているそうだ。

また、Faber Companyのデータサイエンスチームがコア アップデートの分析を動画で解説している（Faber Companyは筆者が所属する企業で、筆者も冒頭で少し説明している）。

どんなサイトでどんな影響があったのか、サイト管理者がどう考えるべきかに関して、速報としてわかりやすく解説している。

さて、コア アップデートが実施されるとSEO業界はいつも大騒ぎになる。状況把握は必要だとしても、のめり込みすぎないように注意したい（SEOの専門家でない限りは）。分析は、その時点でのデータに過ぎない。グーグルは絶えず検索アルゴリズムを改良している。また、相関関係と因果関係は異なる [20]ことにも気を付けたい。読み取れるのは、あくまでそういった傾向があるということだけだ。

コア アップデートがあってもなくても、ウェブ担当者として取り組むことは不変である。

• 関連性があり高品質なコンテンツを提供する
• E-A-T [21] を高める
• ユーザー体験を向上させる

コア アップデートに振り回されることなく、サイトの改善に継続して努めよう。

かなーり簡単にCLSを抑制する方法 [22]
コンテナを準備しておく （Addy Osmani on Twitter） 海外情報

今回のピックアップ記事に続いて、CLSの改善方法をもう1つ紹介する。

CLSの発生を防ぐためのTIPSを、グーグルのエンジニアであるアディ・オスマニ氏がツイッターで共有した。

レイアウト移動を最小限にするためには、後から読み込まれる可能性がある視覚要素のための十分なスペースを確保しておくといい。バナーや画像などに対する固定した区画が役に立つ。

画像によるCLSを防止するには、height属性とwidth属性を追加する [25]と役に立つことは以前にこのコラムで紹介した。その画像の表示に必要なスペースをブラウザがあらかじめ計算して確保できるからだ。

同様に、（JavaScriptで読み込む）広告やバナーにも対しても事前にスペースを確保しておくことでCLSを抑制できる場合がある。

具体的には、CSSで、サイズを固定したコンテナ（要素を格納するためのボックス）を設定し、高さを明示しておくのだ。たとえば次のようにする：

<style>
.container {
    display: block;
    width: 720px;
    height: 90px;
    background: #ccc;
    overflow: hidden;
}
</style>

そのコンテナの中に広告などを表示させるのだ。

<div class="container">
  <!-- ここに画像や広告を入れる -->
</div>

画像のheight属性やwidth属性と同様に、この施策も難易度は低いはずだ。

実際には、広告配信システムを使っている場合には、広告サイズのバリエーションがあったり、配信する広告がない場合があったりと、ここで示したシンプルな形ではうまくいかないこともある。

しかし、CLS抑制の第一歩として、こうしたやり方から試していくといい。

リダイレクト元URLをサイトマップに含めてもいいのか？ [26]
リダイレクト処理を速める目的で一時的に （John Mueller on Twitter） 海外情報

サイトマップには、インデックス対象のURLを含めるのが原則だ。ただし、例外がある。URLをリダイレクトしたときは、リダイレクト元のURLを含めてもいいのだ。

リダイレクト元のURLをサイトマップに含めると、Googlebotは結果的にリダイレクト先のURLにアクセスする。そのため本来ならば、サイトマップに記載するのはリダイレクト先のURLであるべきだ。

しかし、サイトマップにリダイレクト元URLを記載することで、そのリダイレクト先のURLがクロール対象であることをグーグルに伝え、リダイレクトの検出を早められるのだ。結果として、リダイレクト先URLが早くインデックス処理されることが期待できる。

そうは言っても、リダイレクト元のURLをずっとサイトマップに記載しておくことはおすすめしない。冒頭でも書いたように、インデックス対象のURLをサイトマップには含めるべきだからだ。

数週間たち、いったんリダイレクト処理が完了したとわかったならば、削除するのがいい。

またグーグルは、サイトマップをURLの正規化にも利用する。リダイレクト元のURLをサイトマップに記載したままにしていると、古いURLが正規URLだとグーグルに伝えることにもなる。リダイレクトと矛盾したシグナルを送ることになる。

転送元URLをサイトマップに含めるのは、リダイレクト直後の一時的な設定だと理解しておこう。

関連サイト・姉妹サイトをリンクし合うのはガイドライン違反になるのか？ [27]
通常は問題ないが、大規模リンクネットワークなら違反になるかも （Google SEO office-hours） 海外情報

同じ企業が複数のサイトを運営しており、それらのサイト同士を互いにリンクし合っていたら、それはリンク操作だとしてガイドライン違反になるのだろうか？

グーグルのジョン・ミューラー氏によれば、通常は問題ないそうだ。グーグルは、どういった目的のリンクであるかを理解し、普通のリンクとして扱う。

しかし、SEOでのランキング操作を目的とした大規模なリンクネットワークの一環だと判断されれば、その限りではない。手動での対策の対象になりうる

要は、何のためにリンクし合っているのかという動機が問題になる。

同一企業が運営しているサイトとしての紹介が目的で、そのリンクを人間の訪問者がたどることを意図しているのであれば、まったく問題ないだろう。

しかし、上位表示を狙うキーワードをアンカーテキストにしてリンクし合い、さらには別の手段も用いて不正なリンクを大量に集めていれば、リンクプログラムの一種だと認識される可能性が高い。

Web担当者に役立つ最新情報

「visibility:hidden」と「display:none」はSEO的に違いを生むのか？ [28]
どちらも同じように処理されるっぽい （Search Engine Roundtable） 海外情報

CSSの visibility:hidden と display:none には、Google検索における違いはないようだ。どちらも同じようにインデックスされる。

visibility:hiddenとdisplay:noneは、どちらもページ上のコンテンツを非表示にするCSSの指定だ。しかし、仕組みは異なる。グーグルのデベロッパーサイトは次のように説明 [29]している。

visibility: hidden と display: noneは異なります。「visibility: hidden」の場合、要素は非表示になりますが、依然としてレイアウト上のスペースを占めています（つまり、空のボックスとしてレンダリング）。これに対し、「display: none」の場合、要素はレンダリング ツリーから完全に削除されるので、要素は非表示となりレイアウトにも含まれません。

CSSでdisplay:noneを指定した要素はレンダリングツリーに含まれないので、Googlebotが検出しないのではないかとも疑われる。だが実験した結果、そんなことはなかったそうだ。

グーグルのマーティン・スプリット氏も、推測だとはしつつも、「visibility:hiddenとdisplay:noneに差異があったとしても、ごくわずかだろう」とコメントしている。

検索に関して言えば、どちらを使おうが気にする必要はなさそうだ（ただし、ユーザーを騙す目的でコンテンツを隠すのはガイドライン違反 [33]になる）。

rel="noopener"なしのtarget="_blank"はもう怖がらなくてよくなる!? [34]
Chromeが対策に乗り出した （Chromium Blog） 海外情報

外部向けリンクを別タブで開くためにHTMLでtarget="_blank"属性を指定するのは、脆弱性やセキュリティ、パフォーマンスの点で問題がある。rel="noopener"属性または rel="noreferrer"属性との併用が推奨される。

こうした注意喚起を、以前にこのコラムで解説 [35]したことがある。

この解説記事を読んで、target="_blank" のリンクに rel="noopener" を追加していったウェブ担当者もいるのではないだろうか。

朗報がある。グーグルが対策に乗り出してくれた。Chrome 88では、target="_blank"のリンクをクリック／タップした際には、暗黙的にrel="noopener"があるものとして処理するようになる。つまり、rel="noopener"を明示的に記述していなくても安心になるのだ。

このセキュリティ問題は、元ページとリンク先ページが別ドメイン名であっても発生 [36]するものだ。そのため、ブラウザで対応するのが適切ではある。

とはいえ、古いWebシステムではポップアップでログイン画面を表示するようなものがあり、この変更でうまく動作しなくなる可能性がある点には注意が必要だろう。

なお、Firefoxは2020年6月に、Safariは2019年3月に、すでにこの仕様になっている。2021年1月にリリース予定のChrome 88の安定版で、主要なブラウザでの対応が完了する形だ。EdgeやVivaldiなどのChromium系のブラウザも追って対応するだろう。

12月のオフィスアワー: MFI後のアノテーション、認証画面のリダイレクト、AMP Page Experience Guide についてなど [37]
新しいクロール統計情報の紹介あり （Google 検索オフィスアワー） 国内情報

12 月のオフィスアワーが開催された。

Q&Aに入る前の冒頭では、次の 2 つについて金谷氏が案内している。

• ウェブマスターセントラルからグーグル検索セントラルへの移行
• 新バージョンの「クロールの統計情報」レポート

1つ目の移行については前回紹介 [38]した。2つ目の新しいクロール統計情報レポートのリリースは、特に大規模サイトのウェブ担当者にとって重要なニュースだ。どんな機能が備わっているのか金谷氏の説明を聞いておこう。

さて、Q&Aに関しては、次の質問に金谷氏とあんな氏が回答している。

• MFI 移行後のアノテーション（13:57 [39]）
• MFI 適用済みサイトにおける「PC 版」ページ（17:48 [40]）
• インデックス登録が突然削除された（22:22 [41]）
• インデックス未登録ページ増加への対応（27:25 [42]）
• 別々の URL 方式サイトでのモバイル対応（32:54 [43]）
• 認証画面へのリダイレクトの影響（35:56 [44]）
• SPA サイトのダイナミックレンダリング対応（42:51 [45]）
• time datetime タグの更新基準（46:59 [46]）
• AMP Page Experience Guide について（51:22 [47]）
• Google 検索結果からページを削除したい（53:27 [48]）

YouTubeの録画を埋め込んでおく。気になる質問の回答だけを知りたいときは再生時間のリンクから直接開始できる。

なお、次回のオフィスアワーは12月23日（水）の予定だ。今のうちに質問を送っておけば回答してもらえるだろう。質問フォームはこちら [49]だ。疑問点を解消して年越しを迎えよう。

アマゾンや楽天がなくなる日がやってくる！？ [50]
ショッピファイでECを自社運用 （東洋経済オンライン） 国内情報

アマゾンや楽天がなくなる日が本当にやってくるかもしれない

あるベンチャーキャピタリストの予想だ。これを聞いてあなたは、特にあなたがECサイトのウェブ担当者だったら、どう反応するだろうか？

欧米を中心にShopify [51]（ショッピファイ）というECサイト向けのCMS（コンテンツ マネジメント システム） [52]が注目されている。

• ルイ・ヴィトン
• ディズニー
• ナイキ
• ワークマン

といった大手企業が、ショッピファイによる自社ECサイトの運用に注力するようになり、アマゾンでの出店から撤退し始めているそうだ。

ある調査 [53]によれば、2020年11月時点でのCMSのマーケットシェアの第2位はショッピファイだった（3.1%のシェア。1位はWordPressで、ダントツの39.0%）。Joomla（ジュームラ）やDrupal（ドルーパル）といった、古くからあるCMSがシェアを落とすなか、ショッピファイのシェアは伸びている。

もともとベンチャーとして2004年に創業したショッピファイだが、現在の時価総額は約10兆円で、ホンダの倍、三菱商事やソフトバンクグループの時価総額も抜き始めているとのことである。破竹の勢いでビジネスを拡大しつつあるようだ。

また日本では、ショッピファイ [54]以外にもBASE（ベイス） [55]という日本産のECサイト向けCMSが伸びているとのことだ。時価総額は3000億円を突破したそうだ。元記事では紹介されていないが、日本ではSTORES（ストアーズ） [56]というサービスも人気だ。

全体的に見れば、新型コロナウイルスは経済に暗い影を落としている。ところが、オンラインショッピングに対してはコロナはむしろ追い風になっている。CMSで構築した自社運用のECサイトが、ひょっとしたら日本でも本当に増えていくかもしれない。

自社運用に課題があるとしたら、集客、特に検索エンジン経由での集客だろうか。楽天やアマゾンに出店することの最大のメリットはその集客力だ。検索エンジンからのトラフィックやメールでのプロモーションに関しては大手モールの集客力は頼りになる。中小企業ではたちうちできないようにも思う。

それでも、自社運用すれば手数料の支払いはなくなるし制約も減る。ECサイトのウェブ担当者は、ショッピファイのような新しいEC構築サービスにアンテナを張っておくのもいいかもしれない。

AMP Fest 2020のハイライトまとめ～AMPの注目したいデータや機能など [57]
AMPドメインの60%がコア ウェブ バイタル指標に合格 （Google Developers Japan） 国内情報

AMP Fest [58]というAMPをテーマにしたオンライン カンファレンスを10月13日にグーグルが開催した。多くのセッションのなかからハイライトを開発者向けブログが紹介している。

たとえば次のようなハイライトがある。

• AMPドメインの60%がコア ウェブ バイタル指標に合格している
  • 同じ基準に合格した非AMPドメインは12%
• AMPページのページエクスペリエンスを測定するツールとしてAMP Page Experience Guideを公開
• 多くのパブリッシャーがウェブストーリー（旧AMPストーリー）を導入
• ウェブストーリーでクイズ、投票機能、360 度動画などの機能を利用できるように
• AMP for Emailをサポートするメールプラットフォームが増えている
• AMPの成功事例

すべてのセッション動画で日本語字幕を利用できる。興味のあるハイライトはセッションを通しで視聴するといい。AMP Fest 2020のプレイリストはこちら [59]だ。

[60]海外SEO情報ブログの
掲載記事からピックアップ

Passage Indexingとグーグル マイビジネスについての記事をピックアップ。

• GoogleのPassage Indexingは野菜の中に埋もれているトマト🍅を探し出すことができる [61]

  より細かな粒度でコンテンツを評価する。

  ★★★★☆

  • SEOがんばってる人用（ふつうの人は気にしなくていい）
• SCの検索パフォーマンスとGMBのインサイトのデータはどうして一致しないのか？ [62]

  知られざる理由もあり。

  ★★★★★

  • すべてのローカルビジネスWeb担当者 必見！