グーグル直伝! CSSとウェブフォントのコア ウェブ バイタル最適化テクニック【SEO情報まとめ】

CSSを少し変えるだけでコア ウェブ バイタル(CWV)を改善できるとしたら? 「無理でしょ」と思うかもしれないが、けっこう使えるテクニックをグーグルが解説してくれている
よろしければこちらもご覧ください

CSSを少し変えるだけでコア ウェブ バイタル(CWV)を改善できるとしたら? 「無理でしょ」と思うかもしれないが、けっこう使えるテクニックをグーグルが解説してくれている。

また、今回はさらに「利用していないJavaScriptを削除して、CWV改善+セキュリティ」という話題もピックアップしている。

少し技術的なトピックだが、知っておいて損はないネタだ。

ほかにも、「コア アルゴリズム アップデートが来たけど来月も来る」「ファーストビューで見えるコンテンツ」「インデックス制限」「リンク否認」などなどなど、あなたのSEOとWebサイト運営に役立つ情報をまとめてお届けする。

  • 2021年初のコア アップデートをグーグルが6月に実施、2部構成の後半は7月に予定
  • ファーストビューでは各ページ固有なコンテンツを見せるべき
  • グーグルのインデックスするページ数に上限はあるのか?
  • 不自然リンクへの対処はリンク否認だけじゃダメ!? んじゃ何が必要なの?
  • SEOとCWVの最新情報をGoogle I/Oで手に入れる
  • 読者の信頼を獲得するためにサイトが提供すべき情報
  • 2021年5月は3分の1のサイトがCWVに合格
  • スパマーにサイトを悪用されないための対抗策
  • Google、CLSの定義を変更。ページエクスペリエンスシグナルは新CLSで評価する
  • Search Consoleのウェブに関する主な指標レポートが新しいCLSで計測開始

今週のピックアップ

グーグル直伝! CSSウェブフォントのコア ウェブ バイタル最適化テクニック
英語で長文だけど読むべし (web.dev) 海外情報

コア ウェブ バイタル(CWV)改善の役に立つ技術解説をグーグルは開発者向けサイトで提供している。6月にはこれまでに次の2つの解説記事が出ている。

CSSとウェブフォントはほぼすべてのサイトが利用している技術だ。ベストプラクティスは非常に実践的だ。解説記事は英語で書かれている。

すぐに活用できる具体的なテクニックとして、CSSのベストプラクティスの記事では次のようなものが解説されている:

  • クッキーの許諾メッセージなどは position:sticky で上部に表示するのではなく、position:fixed(またはabsolute)を使ってページ下部に表示することで、レイアウトシフトを避ける

  • LCPに該当する要素の背景デザインにグラデーションを使っている場合、backgroundurl() で指定するのではなく、linear-gradientで指定することで、LCPを下げる

  • img要素には width属性と height属性を指定することで、レイアウトシフトを抑制する

  • Webフォントの読み込みはCSSの @import ではなく、link要素を使い、さらに rel="preconnect" を指定した link要素を head 内のできるだけ上部に記述することで、DNS・TCP・TLSの処理を先行させ、レイアウトシフトを抑制する

  • アニメーションでは margin を動かすのではなく transform を使うことでレイアウトシフトを避ける

また、フォントのほうも(なかなか技術的ではあるが)役に立つ情報が詰まっている。

詳細なだけあって長文なのでここで訳すことはできないが(申し訳ない)、英語が苦手であればグーグル翻訳を利用するなりしてコア ウェブ バイタル改善の参考にしてほしい。

★★★★★
  • CWV改善がんばってる人用(ふつうの人は気にしなくていい)
  • 技術がわかる人に伝えましょう

未使用のJS削減でCWVが劇的に改善
簡単にできるCWV最適化 (Emma Thompson on Twitter) 海外情報

読み込まれたものの使われていないJavaScriptを削除したところ、コア ウェブ バイタルの状況が劇的に改善した事例をツイッターに投稿したサイト管理者がいた。

Search Consoleのページエクスペリエンス レポート。良好URL(緑のタテ棒)がゼロだったが少しずつ増えてきている。それにともない良好URLの表示回数(紫の折れ線)が爆上がりしている。

JavaScriptは、ページの読み込み速度を遅くする元凶の1つだ。使わないJavaScriptの読み込みコードは削除するべきだ。必要ないものをページで読み込むのは意味がないどころか、マイナスしか生まない(利用しなくなったサービスのJavaScriptによってセキュリティ問題が発生した事例もある)。

使われていないJavaScriptを調査するには、次のようなツールを使うといい:

簡単にできるコア ウェブ バイタル改善なので実践してみよう。

PageSpeed Insightsの「改善できる項目」の「使用していない JavaScript の削減」で見つけられる
★★★★★
  • すべてのWeb担当者 必見!
  • 技術がわかる人に伝えましょう

グーグル検索SEO情報

2021年初のコア アップデートをグーグルが6月に実施、2部構成の後半は7月に予定
逆転現象が見られるかも (金谷 武明 on ツイッター) 国内情報

広範囲にわたるコア アルゴリズム アップデートを日本時間の6月4日にグーグルは実施した。2021年初だ。

グーグル検索の広報をツイッターで務めるGoogle SearchLiaisonアカウントが実施のにアナウンスした。英語なので金谷氏が日本語で知らせてくれた。

通常のコア アップデートには見られない特徴が今回のコア アップデートにはある。6月と7月の二段構えでの実施という点だ。予定しているすべての更新の準備が完了しておらず、準備ができたものだけを展開することになったというのが理由だ。したがって来月も、広範囲なコア アップデートが実施される。

いわば、6月のコア アップデートと7月のコア アップデートで1セットだ。そのため、6月に起きた変動が7月には逆転する可能性もある。今回上がったサイトが次に下がり、反対に下がっていたサイトが上がるかもしれないという意味だ。

広範囲にわたるアップデートには付きものと言える比較的大きな変動が発生している。7月の第2弾もおそらく同様だろう。上がったサイトでも気は抜けない。下がったサイトは復活に期待したいところだ。

★★★★☆
  • SEOがんばってる人用(ふつうの人は気にしなくていい)

ファーストビューでは各ページ固有なコンテンツを見せるべき
ユーザー視点から? (Google SEO office-hours) 海外情報

ページに着地してスクロールせずに見えるエリア、いわゆる「ファーストビュー」には、そのページ独自のコンテンツを多少なりとも表示するのが良さそうだ。少なくとも、サイト共通の要素で画面が埋まるのは避けておきたい。

ヘッダー画像や既定のバナー、定型文などすべてのページで共通の要素で、ファーストビューを埋め尽くすことはおすすめしない。ページ固有のなんらかのコンテンツがすぐに見えるエリアに置いたほうがいい。

このように、グーグルのジョン・ミューラー氏はアドバイスしている。

ミューラー氏による同じようなアドバイスをこのコラムで紹介したことがある。グーグルの評価という観点からなのか、それともユーザー体験の観点からなのかは定かではない。とはいえ、グーグルの評価には影響しなかったとしても、ユーザー視点からはそのページ固有のコンテンツがすぐに見えたほうが親切だ。

特にモバイルでどう見えるのかを確認しておきたい。

★★★★☆
  • すべてのWeb担当者 必見!

グーグルのインデックスするページ数に上限はあるのか?
価値があれば制限なしにインデックスする (#AskGooglebot on YouTube) 海外情報

グーグル検索のインデックスに上限はあるのか?

この質問にジョン・ミューラー氏が動画で回答した。要点は次の2つだ:

  • インデックスするページ数に上限は設けていない
  • 静的ページでも動的ページでもグーグルは同じようにインデックスする

それぞれを詳しく説明する。

まず、インデックス制限に密接に関係する「静的ページ」「動的ページ」のほうから理解しておこう。

静的ページ」とは、だれがいつアクセスしても同じ内容であることを意味し、多くはウェブサーバーに格納しているHTMLファイルをそのままブラウザに配信することを指す。インターネット初期には一般的だったスタイルで、「.html」「.htm」といった拡張子が付いたファイルがURLに含まれていることが多かった。

一方で「動的ページ」とは、ブラウザがアクセスした時点でコンテンツ(の一部)を生成するパターンだ。アクセスするタイミングやブラウザでのログイン状態によって内容が異なる場合があり、内容の生成もサーバー側やブラウザ側などの可能性がある:

  • サーバー側でページ(コンテンツ)を生成する場合(PHP、Perl、Ruby、Javaなど)
  • ブラウザ側でコンテンツを生成する場合(JavaScriptなど)

ずっと昔(それこそ10年以上前)は、動的ページはインデックスされづらいこともあったのだが、今はそんなことはない。グーグルは、静的ページであろうが動的ページであろうが、同じようにインデックスするしランキング評価に違いもない(ただしJavaScriptの場合はGooglebotが確実にレンダリングできることが重要)。そのため、動的ページなのに「.html」の拡張子を付けて静的ページに見せかけるといった小細工もまったく必要ない。

さて、肝心のインデックスするURLの制限についてはどうだろうか。

サイトあたりのインデックスするURLの数にグーグルは単純な制限をかけていない。インデックスする価値があると判断すればそのページをインデックスする。

昔は動的なページは主に次の2つの理由でインデックスされにくいこともあった:

  • URLが違うのに同じ内容の場合がある
  • URLが同じなのに内容が無限に異なる場合がある

しかし現在では前述のように、動的ページでも静的ページと同様にインデックスされる。ただし前提は「インデックスする価値があるか」、つまり「検索ユーザーに価値を提供するとグーグルが判断するか」だ。

逆に言えば、インデックスする価値がないと判断したページはクロールしてもインデックスしないことがあるし、いったんはインデックスしても後に削除することもある。

また、新規公開したサイトのように、そのサイトについてよく知らない場合は、最初のうちはインデックスするペースが遅いかもしれない。1日にいきなり100万ページをインデックスはしないだろう。価値があるコンテンツを提供しているサイトだと認識するにつれて、インデックスする量は増えていくだろう。

つまり、上限なしでインデックスしてほしければ高品質なコンテンツを公開することが重要だ。

★★★★☆
  • SEOがんばってる人用(ふつうの人は気にしなくていい)
Web担当者に役立つ最新情報
  • 不自然リンクへの対処はリンク否認だけじゃダメ!? んじゃ何が必要なの?
  • SEOとCWVの最新情報をGoogle I/Oで手に入れる
  • 読者の信頼を獲得するためにサイトが提供すべき情報
  • 2021年5月は3分の1のサイトがCWVに合格
  • スパマーにサイトを悪用されないための対抗策
海外SEO情報ブログの掲載記事から
  • Google、CLSの定義を変更。ページエクスペリエンスシグナルは新CLSで評価する
  • Search Consoleのウェブに関する主な指標レポートが新しいCLSで計測開始

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

不自然リンクへの対処はリンク否認だけじゃダメ!? んじゃ何が必要なの?
まずリンクの削除が先 (John Mueller on Twitter) 海外情報

不自然なリンクの手動対策を受けてしまったときに、その手動対策を解除するためにするべき行動とは?

グーグルのジョン・ミューラー氏に次のように質問したSEOコンサルタントがいた。

不自然なリンクの手動対策を解除するためには、次のどちらを実行すべきですか?

  • リンクを否認するだけ
  • リンクを削除する

否認するだけで十分だと言うSEO専門家がいるようです。私自身は、常に削除を試みてその結果を記録して報告していました。

ミューラー氏はこのように回答した。

あなたがやっているやり方を推奨する。

つまり、時間をかけて不自然なリンクを調査して削除し、それをレポートするやり方だ。

手動対策を受けたサイト管理者が問題を認識し対処したことをウェブスパムチームは知りたいからだ。

(そうした対処をしたうえで)理由が何にせよ、ほかのサイトのリンクを削除できないときには、否認ツールが役に立つ。

ランキング操作を目的にした不正なリンク獲得が原因の手動対策の対処法は昔も今も変わらない。

  1. まず、問題になっていると思われるリンクを徹底的に削除する
  2. それでもどうしても取り去れないリンクが残ってしまったときにのみ否認ツールを使う
  3. 削除の取り組み内容と結果を再審査リクエストで詳細に報告する

「手動対策」ということは、その向こうには人間の担当者がいるということだ。問題があると判断された以上は、手を抜いて否認だけで済まそうとしても、手動対策が解除されることはない。

★★★★☆
  • ホントにSEOを極めたい人だけ

SEOとCWVの最新情報をGoogle I/Oで手に入れる
日本語字幕あり (グーグル検索セントラル ブログ) 国内情報

グーグルは、「Google I/O(グーグル・アイオー)」という大規模カンファレンスを、5月18日~20日の3日間開催した。通常は、米グーグル本社近くの会場で行われるのだが、COVID-19の影響により2020年は中止、今年はオンライン開催となった。I/Oは開発者向けのイベントだが、検索関連の多くの新しい情報も提供される。

I/Oのセッションのなかから、サイト管理者にも役立つ情報を検索セントラルブログがまとめて紹介している。

こちらは、おなじみのジョン・ミューラー氏による、まさに検索にフォーカスしたセッションだ。動画コンテンツで利用できる2つの新しい構造化データを紹介している。

ほかには、コア ウェブ バイタルに関するセッションも今年は多かった。

動画には日本語字幕が付いている(Web Vitals Q&A除く)。英語が得意でなくても安心だ。視聴して、SEOとCWVの最新情報を手に入れよう!

★★★★☆
  • SEOがんばってる人用(ふつうの人は気にしなくていい)

読者の信頼を獲得するためにサイトが提供すべき情報
ニュースサイトじゃなくても当てはまる (グーグル検索セントラル ブログ) 国内情報

読者の信頼を得るために必要とする透明性の確保について、グーグルは検索セントラルブログで説明した。元記事が対象としているのは「グーグルニュースに掲載される記事の提供元サイト」だが、一般のサイトであっても、読者の信頼を獲得する施策に役立ちそうだ。

読者の信頼を得るために次のような情報を提供すべきだとグーグルは推奨している:

記事レベルで提供すべき情報

  • 記事の公開日
  • 執筆者の署名
  • 執筆者に関する情報(執筆者の資格や専門分野について説明する経歴へのリンクなど)
  • 執筆者の連絡先
  • 記事のタイプ(「意見」や「ニュース」など)を示すラベル

サイトレベルで提供すべき情報

  • ニュース提供元
  • 背後にいる企業やネットワーク
  • サイトの目的、構成の枠組み、サイトで得られる情報のタイプについて読者が理解するのに役立つ情報
    • ミッション ステートメント
    • 編集ポリシーと基準
    • 編集や業務に関わるスタッフの情報と経歴
    • 個別の連絡先情報
    • オーナーや資金提供元などの組織レベルの情報

どうだろう? 必ずしもニュースサイトでなくても、こうした情報を提供したほうがあなたのサイトに対する読者の信頼度が上がると思わないだろうか?

★★★★★
  • すべてのWeb担当者 必見!

2021年5月は3分の1のサイトがCWVに合格
CLSが良くなったのは定義の変更が理由か (Chrome UX Report on Google グループ) 海外情報

2021年5月のChromeユーザーエクスペリエンス レポートの集計データが公開された。約841万サイトの統計だ。2月から数値を次の表に示す。

5月4月3月2月
LCPが良好のサイト50.7%49.4%49.01%47.99%
FIDが良好のサイト89.9%89.8%89.66%89.46%
CLSが良好のサイト60.4%53.8%51.84%45.99%
3指標がすべて良好のサイト29.2%25.8%24.81%21.98%

CLSに合格したサイトの状況が53.8% ⇒ 60.4%とかなり良くなっている。これはサイト側の改善の成果というよりは、CLSの測定方法が更新されたためと思われる。更新によって数値が良くなるサイトはあるが悪化するサイトはないからだ(更新内容については、概要を筆者が個人ブログにまとめたので興味があれば読んでほしい)。

コア ウェブ バイタルのウェブ全体の状況を知るには、HTTP Archive(HTTPアーカイブ)も役立つ。HTTP Archive はウェブの利用状況をさまざまな指標からレポートするサイトだ。コア ウェブ バイタルのもとになるChromeユーザーエクスペリエンス レポートのデータも提供するようになった。

HTTP Archiveではさまざまなデータを確認できる。図はコア ウェブ バイタルに合格したサイトの過去1年間の推移グラフ
★★★★☆
  • CWV改善がんばってる人用(ふつうの人は気にしなくていい)

スパマーにサイトを悪用されないための対抗策
悪用されるとランキングが下がることも (グーグル 検索セントラルブログ) 国内情報

サイト管理者ではないユーザーがコンテンツを作成できるサイトにおけるスパム対策について検索セントラルブログが注意喚起した。

たとえば、次のようなサイトが関係してくる:

  • フォーラム(掲示板)
  • ゲストブック
  • ソーシャル メディア プラットフォーム
  • ファイル アップローダー
  • 無料ホスティング サービス
  • サイト内検索サービス

グーグルは触れていないが、コメントを受け付けているブログも該当するだろう。

こうしたサイトがスパムに悪用されると次のような悪影響を受ける可能性があるとのことだ:

  • ウェブサイトの一部に低品質なコンテンツがあると、サイト全体のランキングに影響を与えることがあります。

  • スパム行為のあるコンテンツは、マルウェアやフィッシングを伴うサイトなど、望ましくないコンテンツや有害なコンテンツにユーザーを誘導するおそれがあり、サイトの評価が下がる可能性があります。

  • 無関係なコンテンツからのサイトへの意図しないトラフィックのために、サイトが遅くなったり、ホスティング コストが増加したりすることがあります。

  • Google は、検索結果の品質を保護するため、第三者生成スパムが多数あるページを削除したり、ページの順位を下げたりすることがあります。

スパマーにサイトを不正利用させないためにできることをグーグルはアドバイスしている:

第三者によってスパム判定されてはたまったものではない。

企業サイトを担当している人のなかでは該当することは少ないだろうが、一般ユーザーがコンテンツを掲出できるタイプのサイトを管理するウェブ担当者は、詳細をリンク先でしっかり確認し、社内で上司を巻き込んで対応していくことを勧める。

★★★★☆
  • ユーザーがコンテンツ作成できるサイトのすべてのWeb担当者 必見!

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

CLSの定義変更に関する記事をピックアップ。

この記事の筆者

鈴木 謙一(すずき けんいち)

「海外SEO情報ブログ」の運営者。株式会社Faber Companyの取締役Search Advocate(サーチ・アドボケイト)。

海外SEO情報ブログは、SEOに特化した日本ではもっとも有名なSEO系ブログの1つ。米国発の最新のSEO情報を中心に、コンバージョン率アップやユーザーエクスペリエンス最適化のための施策も取り上げている。

正しいSEOをウェブ担当者に習得してもらうために、ブログでの情報発信に加えて所属先のFaber Companyでは、セミナー講師や講演スピーカーを主たる役割にしている。

テーマ別カテゴリ: