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

Recommended

Recommended

More Related Content

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

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

More from digitalitalentity

More from digitalitalentity (10)

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