ページにアクセスしたときに起こる表示ズレを解消し、CLS指標を全ページ「良好」にした事例

サイトにアクセスして気になる情報をクリックしようとしたときに、突然ページのレイアウトがずれて意図しないページヘのリンクをクリックしてしまった経験はありませんか？

サイトにアクセスした際に突然ページのレイアウトがずれる現象のことを「レイアウトシフト」と言い、Google Search Consoleにおける「ウェブに関する主な指標」のCLSに影響を与えます。

「ウェブに関する主な指標」については下記のページで詳しく解説していますので、ぜひご参照ください。

本記事では、弊社でご支援させていただいている某クライアントサイトにて検出された、「多数のページでCLS指標が要改善判定だった」事例について、その原因と改善施策を共有いたします。

検出された課題・問題

Google Search Consoleのウェブに関する主な指標において、CLSの評価が悪く「改善が必要」判定となっていたページが多数検出されました。

原因及び仮説

PageSpeed Insightsにて詳細を確認したところ、ページ内の画像部分（imgタグ）にwidthとheightの設定がされておらず、レイアウトシフトが起こってしまう事が要因だと判明しました。

画像のwidthとheightが未設定の場合、ページが読み込まれる際に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうため、CLSスコアに悪影響を与えていたようです。

改善施策の内容

地道な作業ですが、すべての画像(imgタグ)にwidthとheightを設定することを提案させていただきました。
SEO評価を上げたい(落としたくない)ページを優先的に、中長期にわたる改善施策となりました。

結果

「改善が必要」判定のページが全て「良好」に変化しました。

まとめ

WEBサイトの運営において、Googleはユーザー体験を最も重視している傾向にあります。

そういった背景から、Googleはレイアウトシフトをウェブに関する主な指標の1つにしており、ユーザー体験の向上が間接的にサイトのSEO評価向上につながることを示唆しています。

ウェブに関する主な指標は課題が見つかりにくく、改善に工数がかかるケースも多いですが、本事例のように地道な改善を重ねていくことで、ユーザーからも検索エンジンからも高評価をいただけるサイトに近づいていくはずです。

ぜひ参考にしてみてください。

執筆者：川口享晟

株式会社ヒトノテのSEOコンサルタント。メディアサイトからポータルサイト、ECサイトまで様々なサイトのSEO支援を経験。売上のアップから逆算したSEO対策を得意とし、クライアントに寄り添ったオーダーメイドの提案を心がけています。

監修者：坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。