ブログ運営で大切なことは、公開した記事がきちんと読まれることです。週刊はてなブログではSEO専門家の辻正浩さんに、現在のFavicon（ファビコン）の重要性と注意すべきポイントについて寄稿いただきました。どうぞお読みください。
SEO専門家の辻正浩( 
id:t-w-o )です。はてなブログのSEOをサポートしている外部スタッフとして、これまでも何度かはてなブログのSEOについてご紹介*1してきました。今年の6月から株式会社JADEを立ち上げてJADEの辻として活動しています。
今回は、はてなブログでも対応可能なFaviconの価値についてご紹介します。
モバイル検索結果にFaviconが登場
Googleは2019年5月22日にモバイル検索結果のレイアウト変更を発表しました。スマートフォン検索結果の変化としてはここ数年で最大の変化です。
大きな変化は、これまではタイトル→URLと表示されていたのがURL→タイトルと表示されるようになったことと、検索結果にFaviconが現れるようになったことです。
FaviconとはWebサイトに独自の方法で設定するアイコンのことで、様々な場所で表示されます。ご覧のこのページが表示されているブラウザの上の方を見てください。多くのブラウザでは、この「週刊はてなブログ」のタブのところに「週」の文字が表示されているはずですが、これがFavicon表示の一例です。
Faviconはこれまでこのブラウザ最上部の小さなアイコンや、ブックマークしたとき、その他いくつかの場所で表示されていました。しかしその影響力は大きいものではありませんでした。大手サイトでもFaviconを設定していないサイトも多くありますし、設定しても集客に大きな影響はありませんでした。
しかし、今回モバイル検索結果にFaviconが現れるようになりました。私は、このことは非常に大きなことだと考えています。
実際に私が関わっているWebサイトにおいて、モバイル検索結果が変わった日から明らかに平均クリック率、CTRが変化したサイトがいくつもあります。
とある非常に多くの人から知られているサービスで、一部コンテンツを別(サブ)ドメインで展開していて、そこにFaviconをつけ忘れていたサブドメインとつけていたサブドメインがありました。そこではFaviconをつけていたサイトだけが明らかにCTRが伸びました。
一方、あまり望ましくない印象がついているサイトにおいて、Favicon表示と同時にCTRが落ちたサイトもありました。その変化は非常に大きいものではありません。ただ、サイトによっては平均CTRが数ポイント変わり、一ヶ月単位で見ると数万のアクセスに影響が出た所もあります。
検索結果では信頼されているサイトがクリックされがちです。Faviconでひと目で自分が信頼しているサイトだと確認できればクリック率が上がるのは当然でしょう。それは誰もが知っている有名サイトだけに当てはまるわけではありません。個人ブログでも、検索結果に現れたURLが良い記事が多いと思っているブログの記事とわかった場合、優先的にその記事をクリックするのではないでしょうか。あなたのブログを良いブログと思ってくださっている人がいるのならば、Faviconで自分のブログだとわかりやすくすることは非常に有益なことです。
検索エンジン、Googleは非常に多くの要素を順位付けに使っています。クローラが収集するWebの情報だけではなく、様々なデータを元に検索結果は作られています。そのアルゴリズムは単に検索結果で多くの人がクリックすると順位が上がるなどというようなシンプルなものではありません。ただ、多くの検索ユーザに選ばれてクリックされ、その多くの人を満足させたならば、検索順位が上がることは確かです。それならば、自分のサイトの読者に自分のサイトの存在をアピールできるFaviconを設定できたならば、それは検索順位にもプラスの影響があります。
Faviconはこれまでは非常に大切なものではありませんでした。しかし2019年6月以後重要性が高まったのです。
ブログサービスの中で、Faviconを設定できるサービスは多くはありません。しかし、このはてなブログは設定が可能です。今回はてなブログではFaviconの設定をよりGoogleのガイドラインに適合した状態で行えるように仕様変更を行いました。
今回この記事では、はてなブログのようにFavicon設定が可能なサイトの方向けに、どのようなFaviconを設定するべきかご紹介します。
検索結果で選ばれるためのFaviconの作り方 5つのポイント
サイズは48ピクセルの倍数
新しく公開されたGoogleのFaviconのガイドラインでは、その画像サイズは正方形で48ピクセルの倍数のサイズにするようにと推奨されています。
これまでFaviconは一般的に16pxや32pxで作られていたものです。しかし最近、Faviconは様々な場所で使われるようになりました。ブラウザのホーム画面や、場合によってはスマホのホーム画面のアイコンとしても使われます。そのようなときに16ピクセルなどでは非常に微妙な表示になっていました。そして、現状の主な環境においては、48px・96pxでも問題なく表示されるようです。
ここはGoogleの推奨通り48pxの倍数にしておくべきでしょう。
透過は使わない
Faviconは透過pngなど透過でも設定は可能ですが使用しないことが賢明です。背景は全面に引くことをおすすめします。
Faviconはいろいろな環境で使われます。背景色が違う場合も多いでしょう。場合によっては、スマートフォンや検索結果の背景色を黒、文字色を白で設定している人もいます。そういう人の環境で、背景を透過・黒文字でのFaviconを設定した場合、Faviconは見えなくなってしまいます。
なお、背景色は目立つものにしたほうが良いでしょうが、もしサイトのイメージカラーが決まっている場合、それと合わせることが「検索結果であなたのサイトと気づきやすくなる」ことに繋がります。自分のサイトに合った色にしましょう。
複雑なものにはしない
Faviconはいろいろな場所で使われますが、一番重要な検索結果では非常に小さく使われます。細かいデザインは確認できません。文字を入れるとしても1〜3文字が限界でしょう。サイト名を入れるなどはできません。小さくされても識別されやすいアイコンの例として、このページを参考にしてみてください。
このページは、Googleが無料で公開しているアイコンのサンプルです。このページを縮小して見てみてください。その多くはとても小さくしても認識できるアイコンになっています。このアイコンは無料で使用が可能なものですが、多くの場所で使われていますのでそのまま使うと「あなたのサイト」と分かりづらいかもしれません。この例を参考に、自分のサイトに適したデザインを考えてみてはいかがでしょうか？
正しく指定をする
Faviconを作成した場合、それを「Webサイトと同じサブドメイン上に置いた上で」「などでファイルの場所を指定」するようにGoogleのガイドラインでは指定されています。別のサブドメインに置いても正しくrel要素で指定をすれば、また、rel要素の指定がなくてもルートにfavicon.icoというファイル名で保存をしておけばブラウザやGoogleは自動で使ってくれる場合が多いようです。ただGoogleのガイドライン上では同一サブドメインへの配置やlink要素での指定が必須とされています。いつ読み込まれなくなるかわかりませんので、link要素relも指定しましょう。
あなただけのFaviconに
Faviconに求められるのは、ひと目であなたのサイトだとわかることです。他のサイト、特に同じジャンルの似たサイトと似たFaviconにするのは避けましょう。
たとえばですが、私の個人サイトの検索結果はこのようになっています。
私は一部の方にはSEOの専門家として知っていただいており、書いたものを信頼してくれる人もいらっしゃいますので、まずは私、辻が書いたものだと知らせることが有益と考え、更に目を引くように金赤を背景にしました。
極端な設定ではありますが、こちらが反映されてからCTRはモバイルだけで伸びました。
Faviconは、必ずしも奇抜なもの、目立つものである必要はありません。もし、サイト上で目立つように使われているアイコン・ロゴが正方形サイズで有るならばそれを使うのが一番です。「自分のサイトを知ってくれている人が気づけるようにする」それを第一にお考えください。
Faviconを設定するには？
実際にFaviconを設定しよう、と思われた方は、画像を用意する必要があります。ユニークなデザインを作る場合は画像編集アプリが必要です。もし自分のサイトを示すユニークなデザインを作る自信が無い方は、（十分な報酬を渡して）知人やクラウドソーシングに頼むのが良いでしょうが、上で紹介したような1〜2文字の画像を元にしたFaviconでしたらボタン作成用のWebサービスなどで対応可能です。無償で公開してくださっている方がいますので、お試しください。
作成した画像ファイルは、はてなブログの場合はそのまま管理画面からアップロードが可能です。Webに直接アップロードする場合は、変換やそれに適したlink要素relの設定が必要になりますので、別途ご確認ください。
Faviconを設定してより伝わるブログに
以上、FaviconのSEO上の利点、そして作る上でのポイントを説明してまいりました。
最初にも書きましたが、Faviconはあなたのサイトを信頼してくれる読者の方がいて、その方にわかりやすくするためのものです。FaviconだけでSEO観点での価値があるものではありません。
ただ、価値ある記事を多く公開されていて、それが読者の方に評価されている場合、Faviconはその評価をアクセスにつなげることができるものです。ぜひFaviconを活用して、更に良いブログライフをお送りください。
執筆者プロフィール
辻 正浩（つじ・まさひろ）( id:t-w-o )
株式会社JADE所属のSEO専門家。
Web制作会社、広告代理店、SEM会社等を経て2011年に独立。その後、株式会社so.laや株式会社JADEにてSEOサービスを提供し、日本を代表するSEO専門家として活動を続けている。
多くのデータと多様なサイトでのSEO施策の経験を元にWebサービスのグロースに取り組み、日本有数のWebサイト・WebサービスのSEOを多く担当している。
