ECサイト構築クラウド型プラットフォーム

モバイルファーストマーケティングラボ

【画像のSEO対策】新指標のCLSとその改善策を解説

  • 2020.12.02
  • SEO
【画像のSEO対策】新指標のCLSとその改善策を解説

2021年5月より、Googleの検索結果の表示順に、新たな指標として「ページエクスペリエンス」が加わることが発表されました。

https://developers.google.com/search/blog/2020/11/timing-for-page-experience

 

ページ エクスペリエンスとは、ユーザーがウェブページで操作を行った際の、情報そのものの価値以外に関するエクスペリエンスの尺度となるシグナルのセットです。これには、ウェブに関する主な指標(ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザー エクスペリエンスを測定する指標のセット)が含まれます。また、モバイル フレンドリー、セーフ ブラウジング、HTTPS、煩わしいインタースティシャルに関するガイドラインといった既存の検索シグナルも、これに含まれます。

https://developers.google.com/search/docs/guides/page-experience?hl=ja

 

ページエクスペリエンスとはそのページにおけるユーザーの利用のしやすさを指し、以下の5項目がその評価項目(シグナル)です。

  • ウェブに関する主な指標
  • モバイルフレンドリー
  • セーフブラウジング
  • HTTPS
  • 煩わしいインタースティシャルがない

その中でも「ウェブに関する主な指標」は今回新たに追加されたシグナルで、今後SEO対策をしていく上で新たに考慮する必要があります。

ウェブに関する主な指標(英: Core Web Vitals)とは

以下の3項目から構成される新たな評価指標で、2021年5月から、ページランキングに影響を与えます。

  • Largest Contentful Paint (LCP) : 読み込みパフォーマンスの尺度
  • First Input Delay (FID) : インタラクティブ性の尺度
  • Cumulative Layout Shift (CLS) : 視覚的安定性の尺度

SEOのためにはそれぞれに対策が必要になりますが、今回はCLSについて、改善策を交えて簡単に解説します。

CLS(Cumulative Layout Shift)とは

日本語で直訳すると累積レイアウトシフトです。

以下の画像を見てください。

レイアウトシフトの例

ページを読み込みだしてから、初めに文字が表示され、遅れて画像が表示されることで文字(テキストテキスト…)の位置がズレてしまいます。

みなさんも経験したことがあるかと思いますが、これがレイアウトシフトと呼ばれる現象で、表示されているコンテンツのレイアウトがズレることを指します。

Googleではこのレイアウトシフトを独自の基準で数値化したものをCLS(累積レイアウトシフト)として計測しています。0.1以下がよいとされており、具体的な数値はPageSpeed InsightGoogle Chromeの拡張機能などで確認することができます。

では具体的にどのような要因がCLSのスコアに影響を与えるのでしょうか。

CLSとして計測される原因

大きく以下の項目が原因となります

  1. 画像によるレイアウトシフト
  2. 広告や埋め込みによるレイアウトシフト
  3. 動的なコンテンツによるレイアウトシフト
  4. Webフォントによるレイアウトシフト

注意すべき点は、これらを原因とするレイアウトシフト全てが必ずしもCLSに計測されるわけではないということです。Googleが規定した基準によってそのレイアウトシフトの良し悪しが決められ、CLSとして計測されます。

今回は、多くのパターンでCLSに計測される一方で、簡単に改善することができる「画像によるレイアウトシフト」を解決してみましょう。

ポイントは画像が読み込まれる前に画像のスペースを確保することです。

画像によるレイアウトシフト

先程見ていただいたとおり、画像のレイアウトシフトはページへのアクセス、更新などのタイミングで、文字が表示された後に遅れて画像が表示されることで発生します。

画像を原因とするレイアウトシフトの対策は簡単で、<img>タグの属性にwidthheightを追加するだけです。

以下に画像のレイアウトシフトの対策前後のコードと例を紹介します。

対策前

【HTMLコード】

<div>
    <p>画像の前にある文章です。</p>
    <img src="http://placehold.jp/300x300.png" alt="遅れて表示されます">
    <p>画像の後にある文章です。画像が表示されるタイミングでずれてしまいます。</p>
</div>

widthとheightを指定していない画像

(※見やすくするためにCSSで赤枠を追加しています)

対策後

【HTMLコード】

<div>
    <p>画像の前にある文章です。</p>
    <img src="http://placehold.jp/300x300.png" width="300" height="300" alt="先にスペースが確保されます">
    <p>画像の後にある文章です。画像が表示されてもずれません。</p>
</div>

widthとheightを指定した画像

(※見やすくするためにCSSで赤枠を追加しています)

 

また、レスポンシブに対応させるためには以下CSSも追加します。

【CSSコード】

img {
    width: 100%;
    height: auto;
}

 

このように<img>タグの属性にwidthとheightを追加するだけで画像の読み込み前にスペースが確保され、レイアウトシフトを避けることができます。

まとめ

2021年5月から新たに追加されるウェブに関する主な指標(Core Web Vitals)のCLS、また画像の表示におけるCLSの改善策を解説しました。

画像以外の項目も含め、高度な技術を用いずに改善が可能なので今のうちから対策しておくとよいかもしれません。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。

SEOカテゴリの最新記事