MT東京69「SEOトレンド編」Core Web Vitalsに備えるSEO

1
株式会社デジタルアイデンティティ
SEO解析 Div. 金子睦朗
SEOトレンド編

（C）2020 Digital Identity Inc.
アジェンダ 2
 自己紹介
 今、SEOを考える重要性
 Core Web Vitalsとは？
 今、何をすればいいのか

株式会社デジタルアイデンティティについて 4
株式会社デジタルアイデンティティ
2009年
101名（2019年1月現在）
〒150-0022 東京都渋谷区恵比寿南1-15-1
A-PLACE恵比寿南5F
03-5794-3741
〒530-0003 大阪府大阪市北区堂島2-1-27
桜橋千代田ビル8F
〒810-0001 福岡市中央区天神2-14-8
福岡天神センタービル13F
092-737-3680
デジタルマーケティング事業
・ウェブ広告の戦略立案･実行･改善
・インターネット広告代理事業
・ウェブサイトの企画・設計・制作・構築
・インターネットメディア事業

私、金子睦朗について 5
金子睦朗（かねこよしあき）
株式会社デジタルアイデンティティ SEO Div.チーフコンサルタント
2014年より、SEOアナリストとしてさまざまな規模・業種のサイトを担当。
リフォーム、婚活、ジュエリーなどコンテンツを中心としたSEOが重要な
業種へのコンサルティングを得意とする。
さらにHTMLやCMSなどにも精通しており、制作・システムサイドとの
スムーズな連携が行えることも強み。
WordPressやMovable Typeのユーザーコミュニティが主催するセミナーに
多く登壇。

MTDDC Meetup Tokyo 2020を開催します！ 6
←去年のウェブサイト
 Movable Typeユーザーコミュニティ
日本最大級のイベント
 今年はフルオンラインでの開催
 Movable Typeに限定せず、
ウェブに関わるすべての人が対象
 10月に開催予定です
 詳細は近日公開です！

今、SEOを考える重要性

検索を使って情報収集をする人々の存在 8
 おおよそ7割～8割の人が検索をして情報収集をしている
https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h27/html/nc122310.html

対面での商談ができないケースも 9
 検討期間の長い商材では、見込み客との接触点をより多くすることで
検討の議題に上げてもらいやすくなる

今、SEOを考える理由 10
 検索行動をしている人は未だに多くいる
 対面での接触機会が減る中で、
顧客とのタッチポイントを増やしていく必要がある

Core Web Vitalsについて 12
 5/11のブログで発表、アルゴリズムへの導入時期は未定
半年前までに告知することを約束

Core Web Vitals 概要 13
 「ウェブ上でのユーザー体験」という観点ではすでに4つのシグナルがある
 これにプラスする形で追加されるのが Core Web Vitals

Googleのアルゴリズムにもいろいろある 14
 少し乱雑な説明だが、このように考えることができる
コンテンツの
意味や意図を
評価する
サイト自体の
ウェブ体験を
評価する
スパムを
取り締まる
 ハミングバード
 RankBrain
 ベニスアップデート
 ページランク
 品質評価ガイドライン
 E-A-T
 YMYL
 その他各種コアアルゴリズム
 モバイルフレンドリー
 インタースティシャル
広告排除
 ページスピード
 HTTPS優遇
 Core Web Vitals
 ペンギン
 パンダ
 パイレーツ
 ペイデイ
：
etc…
Googleのアルゴリズム／評価システム

Core Web Vitals 概要 15
 「ウェブ上でのユーザー体験」という観点ではすでに4つのシグナルがある
 これにプラスする形で追加されるのが Core Web Vitals
粛々と進めましょう
できていなければ
今すぐやりましょう
消しましょう
今日、勉強して
改善プロジェクトを展開しましょう
表示速度高速化：CWV改善PJと一緒に進めましょう

Core Web Vitalsを構成する3つの要素 16
高速な読み込み素早い操作操作の安定感
快適なウェブ体験に必要な要素を数値化

LCP（Largest Contentful Paint） 17
 ページ内において一番大きな要素が読み込まれるまでの時間
ここが一番
大きな要素

ページ内のどの要素がLCPの対象になるか 18
 PageSpeed Insights で確認できる

FID（First Input Delay） 19
 ユーザーが最初にページを操作してから、次の操作ができるようになるまでの時間
ネットワーク
リクエスト
メイン
スレッド
操作開始
スタイルが読み込まれ、ブラウザが
コンテンツを描写できるようになる
ブラウザが、ユーザーからの
最初の入力を受け取る
最初の入力に対応できる
メインスレッドは5秒以上
動作できない状態が続く
ここがFID
https://web.dev/fid/
▼ブラウザがページを読み込んでいる流れ

FIDのアクションに含まれるもの 20
 FIDは、ロード中のページの応答性を測定する指標
 クリック
 タップ
 入力
 テキストフィールド
 ラジオボタン・チェックボックス
 ドロップダウンメニュー
FIDに含まれるユーザー行動 FIDに含まれないユーザー行動
 スクロール
 ズーム

CLS（Cumulative Layout Shift） 21
 レイアウトの安定性・ユーザーが予期しないレイアウトの動きがないかどうか
▼よくあるCLSの低い挙動
購入する
キャンセル
購入を確定しますか？
購入する
キャンセル
＼今なら20%オフ！／
買い物かごに入れたけ
ど、今はちょっとやめ
ようかなぁ…キャンセ
ルっと。
？！
突然レイアウトが変
わって、キャンセルを
押そうとしたのに「購
入する」を押しちゃっ
た！！！！
購入する
お買い上げいただき
ありがとうございました
購入する気はなかった
のに、もう戻れないな
んて…。
もうこのサイトで買い
物するのはやめよう…。

なぜこのアルゴリズムが発表されたのか 22
 Googleは一貫して「検索体験の向上」を主軸にアルゴリズムの刷新を行っている
検索をして…
欲しい情報が
見つかること
快適なウェブ体験が
できること
Googleが提供したい検索体験
 分からないことが解決した
 課題解決の糸口になった
 興味深いトピックに出会えた
 ほしい情報に素早く
アクセスできた
 使いやすかった
 安全に取引ができた

検索をして…
欲しい情報が
見つかること
できること
Core Web Vitalsが
評価する項目

検索をして…
欲しい情報が
見つかること
できること
優先度の高い
評価項目

今、何をすればいいのか

まずは対象ページの洗い出しから 26
 サーチコンソールの「ウェブに関する主な指標」から抽出可能

3つの要素ごとにご紹介します 27
高速な読み込み素早い操作操作の安定感

LCP（Largest Contentful Paint） 28
 ページ内において一番大きな要素が読み込まれるまでの時間
ここが一番
大きな要素

まずは、対象ページのLCP要素を確認 29
 PageSpeed Insights で確認できる

LCP対象画像の読み込み速度を改善する 30
変換前（JPEG）変換後（JPEG）
次世代フォーマット
（WEBP）
76KB 43.3KB 23.2KB
対象画像を圧縮ツールで圧縮する1
画像形式をwebpなど次世代フォーマットにする2
▼画像を最適化するだけでもこんなに違う

FID（First Input Delay） 31
 ユーザーが最初にページを操作してから、次の操作ができるようになるまでの時間
ネットワーク
リクエスト
メイン
スレッド
操作開始
スタイルが読み込まれ、ブラウザが
コンテンツを描写できるようになる
最初の入力を受け取る
最初の入力に対応できる
メインスレッドは5秒以上
動作できない状態が続く
ここがFID
https://web.dev/fid/
▼ブラウザがページを読み込んでいる流れ

FIDを改善するためにできること 32
サードパーティコードを減らす1
JavaScriptの最適化を行う2
▼どのファイルが悪い影響を及ぼしているかは、PageSpeed Insights（左）やChromeのDevTools（右）で確認可能
リクエスト数を少なくし、転送サイズを小さくする3

Movable Typeの場合… 33
 他のCMSと比較するとサーバとのリクエストが
少なくて済む（再構築かけるから）
 初回リクエストからブラウザ側に返ってくるまでの
スピードが早い（ことが多い）
FIDの改善は有利なケースが多い
（のではないかと個人的には思う）

CLS（Cumulative Layout Shift） 34
 レイアウトの安定性・ユーザーが予期しないレイアウトの動きがないかどうか
▼よくあるCLSの低い挙動
購入する
キャンセル
購入する
キャンセル
＼今なら20%オフ！／
買い物かごに入れたけ
ど、今はちょっとやめ
ようかなぁ…キャンセ
ルっと。
？！
突然レイアウトが変
わって、キャンセルを
押そうとしたのに「購
入する」を押しちゃっ
た！！！！
購入する
お買い上げいただき
ありがとうございました
購入する気はなかった
のに、もう戻れないな
んて…。
もうこのサイトで買い
物するのはやめよう…。

CLSを改善するために 35
HTMLやCSSを工夫する1
▼事前にファイルの幅・高さを指定しておけば、読み込みが完了して急にレイアウトが変わる、ということは防げる
記事の見出し
つれづれなるまゝに、日暮らし、
硯にむかひて、心にうつりゆく
よしなし事を、そこはかとなく
書きつくれば、あやしうこそも
のぐるほしけれ。つれづれなる
まゝに、日暮らし、硯にむかひ
て、
画像ファイルが入る場所が
空けられていない
記事の見出し
て、
画像ファイルが入る場所をあらかじめ指定しておく
記事の見出し
て、
位置がズレずに
表示できる

よくある事例 36
 <img>タグにはwidthとheightをなるべく書いたほうが良い
（レイアウトシフトが起きることが想定されるようなケースでは）
（Lazy-loadingのことも考慮して）
 <iframe>やJSで外部ファイルを読み込む場合、
読み込みが完了した段階の高さを想定して、CSSを書く
などなど・・・・

まとめ 38
1 Core Web Vitalsはユーザーの検索体験を向上させる指標
2 LCP、FID、CLS 3つの評価ポイントがある
3 改善すべきページを把握し、1つ1つ対処していく
→Googleが評価しているのはコンテンツだけじゃない
ユーザーファーストなサイトづくりが第一。

MT東京69「SEOトレンド編」Core Web Vitalsに備えるSEO

More Related Content

Similar to MT東京69「SEOトレンド編」Core Web Vitalsに備えるSEO (20)

More from digitalitalentity (10)

MT東京69「SEOトレンド編」Core Web Vitalsに備えるSEO