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


関連記事

過去のインフォメーションページ運用

もう何年も前からご相談の多い「過去のインフォメーションページはそのままで良いのか?捨て方が分からない」という内容。これに関して私の意見をご紹介しておきたいと思います。実はインフォメーションページはSEOだけでなく、ユーザー訪問状況、運用管理工数等によって方法がだいぶ変わるんです。 過去のインフォメー ...(続きを読む)

「高品質」へのGoogleの取り組み

このタイミングであらためてGoogleが「高品質なコンテンツページに向けてなにをしているのか」を説明しています。目新しい情報はございませんが、一応ここでも和訳して共有しておこうかと思います。 Googleの説明内容 検索品質を担保するために、Googleでは(BERTをはじめとした)アルゴリズムの強 ...(続きを読む)

ウェブ検索からのCTRを上げる

Googleウェブ検索でクリック率を上げるためのテクニック要素を備忘録的に記載しておきます。今回はDiscoverや画像検索、ニュース検索等は含めず、またリッチリザルト化やAMP、検索順位上昇の概念も含めない、純然たるウェブ検索結果のブルーリンクとして表示される部分のみに注視して考えます。 クリック ...(続きを読む)

サイトマップページで遊ぼう

サイトマップというとXML(形式はXMLだけではないのですが、ここでは便宜上XMLサイトマップにしておきます)と考える人も多くなったかと思います。サイトマップページ(HTMLのサイトマップ)はもはや不要と考える人が多いからです。でも、私は改めてこのHTMLによるサイトマップページに注目してみたいと思 ...(続きを読む)

コメントを書く

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