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がスタンダード化された時、また新しい回答になるかもしれませんが、まずはこんな考えもある、ということをご参考ください。


関連記事

Search Console Insightsがリリース

2020年8月にSearch Console Insightsのベータ版がリリースされていました。私はベータ版の対象者になっていたので、当時は詳細を紹介していました。これが米国現地時間2021年6月15日に正式にリリース紹介されましたので、あらためてご紹介します。ここ数日間をかけて徐々にロールアウト ...(続きを読む)

SEOが不要になる

私の個人的な意見です。個人的な意見というのは、確証が無い憶測での記事ということですので、ゆる~い感じでご覧いただければと思います。 SEOとはSearch Engine Optimizationの略で「検索エンジン最適化」の訳ですが、このSEOについて、何か特別なマークアップ以外はもう考えなくて良く ...(続きを読む)

GSCのクエリフィルタリング機能更新

先日、Google Search Console内での検索パフォーマンスで正規表現フィルタが新機能として実装されたことをご紹介しましたが、その後この機能がアップデートされたと米国現地時間6月1日にGoogleは発表しました。発表内容は日本語ですが、ここでもご紹介します。 Googleからの発表内容 ...(続きを読む)

202106コアアップデート

Googleは米国現地時間6月2日にコアアップデートを行うことをツイートしました。前回が米国現地時間2020年12月3日でしたので、約半年後の告知となっています。コアアップデートの度にGoogleは2019年8月のブログ記事を引用して発表していますが、その記事の和訳は私のブログでこちらに記載していま ...(続きを読む)

コメントを書く

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