WebフォントとSEO

最近、5Gや表示速度、Core Web Vitals等に対する世間での意識が高まっているせいか、「Webフォントってどう思います?」というご質問をよくいただきますので、私なりの意見をご紹介しておこうかと思います。

ふわふわ

Webフォントとは

今さらご説明も不要かと思いますが、Webサイトに表示するテキストフォントの形式には2種類ありまして、1つ目はデフォルトで各OS、デバイス(デスクトップやモバイル)に組み込まれているフォントを表示するデバイスフォントです。そして2つ目が、予めネット上にアップしているフォントデザインをCSSで指定することで呼び出し、ダウンロードして表示するWebフォントです。

デバイスフォントの場合、イメージとしては“ハードディスク内蔵型”って感じですので表示に時間がかかるものではなく、スムーズなテキスト表示を実現しているわけですが、端末やOSに合わせたフォントデザイン種類が限られていますので、Webサイトとしての個性は出しにくいです。
一方、Webフォントの場合、イメージとしては“外付け吐き出し型”って感じですのでレスポンスのタイムラグが生じ、表示に時間がかかります。「最近はWebフォントの表示は遅くない」という方もいらっしゃいますが、デバイスフォントに比べれば遅くはなります。また、Webフォントに関してはサードパーティー制利用になりますので、使用料が発生したり使用範疇の制限が発生したりします。「○○PVまで○○円」とか「商用サイトには使用不可」とか、色々な注意点があります。しかしそれらを差し引いても余りある「個性」をとことん演出することができるのが魅力です。Webサイトの世界観や他サイトとの差別化を図りたい場合には非常に有効なのがWebフォントでしょう。

ふわふわ

SEOにおいてWebフォントで気を付ける点は?

Webフォント使用によって、SEO上の注意をしなければならない点は表示速度とCore Web Vitalsですね。表示速度はスピードアップデートというアルゴリズムに対する影響度です。Webフォントによるレスポンスに時間がかかるため、表示速度も遅延します。
また、Core Web Vitalsに関しては特にCLS(Cumulative Layout Shift:レイアウト移動測定指標)にも注意したいところです。Webフォントは表示されるまでデフォルトでデバイスフォントが表示され、その後Webフォントに切り替わって表示される仕組みです。結果、デバイスフォントよりもWebフォントの方が文字間が広かったり、サイズに違いが出たりした場合、表示にズレが生じてくるでしょう。そしてそれがCLSに影響することもあるわけです。
私も以前、自身の運営するWebサイトでWebフォントを使用したことがありましたが、この瞬時のズレが気になってしまい、デバイスフォントに戻した経験があります。

ふわふわ

表示速度もCore Web Vitalsもページ単位

さて、意外と忘れがちなので改めておさらいします。SEOにおいて、検索ランキングに影響する表示速度はスピードアップデート、そして2021年以降実装されるであろうCore Web Vitalsによる検索ランキングへの影響、この2つはどちらも“ページ単位で評価”するという点です。つまり、SEOにおいてランクインするページに対してのみ、まずは注意深く捉えると良いでしょう。
まぁ、ユーザー目線で考えればその限りではありませんが…。

ふわふわ

ご提案として

以上を踏まえて、私から「Webフォントを使いたければこうすると良い」ことをご提案します。

  • Webフォントを使用してまで演出したい世界観の対象となるページを見出すと良い。
  • 世界観を演出するのはニーズ軸よりもサービス軸のページの方が良い(記事要素のページよりもプロモーショナルなページを優先)。
  • SEO上、ランクインを対象としているページで極限での上位表示を競っている環境下ではWebフォントは見送ったほうが良い。
  • サイトを横断的に捉えず、CSSでルールを作った<div>単位でWebフォント化するかどうか考えると良い。
  • コンテンツ評価として影響が出ない限りで世界観を表したいフォントを画像化して(画像フォント化して)演出する。
  • HTTP/2をコンボで実装することで、より表示レスポンスを向上させる。

つまりSEOにおいて、検索クエリニーズを拾うようなページではWebフォントを使用せず、(Webフォントを使いたければ)そこからサービス利用に対してポジティブな姿勢を示したユーザーに対して、プロモーショナルページやエントリーフォームまでのブリッジページでWebフォントを使用すると良いのではないかという考えです。そのほうがサービスの世界観を演出しやすいですし、情報だけ伝達するユーザーニーズ軸はデバイスフォントを使用する感じで、サービスを啓蒙したいと考えている軸の中でもポイントとなる箇所でWebフォントを使用する感じで――と、使い分けたほうが良いでしょう。

今のところはこんな感じの回答ですね。5Gがスタンダード化された時、また新しい回答になるかもしれませんが、まずはこんな考えもある、ということをご参考ください。


関連記事

202012コアアップデート

米国現地時間2020年12月3日にGoogleはコアアルゴリズムのアップデートを始めたと発表しました。今年1月と5月にコアアップデートをしましたので、7ヶ月ぶりくらいですね。結構間が空きました。 毎度おなじみの Later today, we are releasing a broad core a ...(続きを読む)

クロールの統計情報が刷新

Googleは米国現地時間11月24日に、Search Consoleにおけるクロール統計情報のUIと仕様を刷新したことを発表しました。Google Search Central Blogでも記事化されていますので和訳してご紹介します。 To help website owners better u ...(続きを読む)

Google検索セントラルブログへ

Googleは今まで検索に関するブログをWebmaster Central Blog(ウェブマスター向け公式ブログ)という名称で運営していましたが、この度、Webmaster(ウェブマスター)という名称を廃止し、developers.google.com配下で運用するようになりました。 新旧の違い ...(続きを読む)

古いコンテンツの削除ツールが刷新

リンク否認ツールに続き、古いコンテンツの削除ツールがリニューアルしました。GoogleがTwitterで発表しています。インターフェースの変更のようですが、サイトオーナー側で行う作業ではなく、第3者が行うツールですのであまり馴染みがないかと思います。でも何かと便利かもしれませんので、知っておくと良い ...(続きを読む)

コメントを書く

コメントは承認から反映までしばらく時間がかかる場合がございます。メールアドレスが公開されることはございません。