faviconで検索エンジンからのアクセスアップ(微増)を狙う

faviconは、ホームページを表す小さな画像です。
ブックマーク(お気に入り)のリストにアイコン的に表示されます。
地味だったfaviconが、Googleの検索結果に表示されることになり、再注目されています。
ここでは、SEO(検索エンジン対策)とfaviconについてまとめてみました。

この記事は2020年1月24日に公開しましたが、3日後の1月27日時点において、PCからのGoogle検索でfaviconが表示されないことが確認されました。
一方で、スマホの検索結果には依然としてfaviconが表示されております。スマホ利用者数がPC利用者数を上回る現状において、本ページの情報は無駄にはならないと考えます。

SEOとクリック率

ホームページの訪問者の大動脈といえる「検索エンジン」からのアクセスアップ対策は、次のように分類できます。

  • 検索順位を上げる
  • ヒットするキーワードを増やす
  • クリック率を上げる

まめわざは、ベストのSEO(検索エンジン対策)はホームページ内容の充実化と一貫して説明しておりますが、これは1と2の双方または片方に繋がります。
他方、3は「クリックしたくなるページタイトルや説明文にする」という対策ですが、他とは違って専門的で不確実性もあり難解です。
1と2の対策が3をある程度補い得ることもあり、まめわざでは3についての説明はしておりません。

こんな中、今回Googleの検索結果の表示が変更となり、「少なくともfaviconは登録しておく」という分かりやすい3の対策が登場しました。

検索結果の表示例

上から3番目の地球儀がfaviconを設定していないページの表記です。

このように、faviconがあった方が少し目立つため、クリック率の微増が期待できます。
上記で説明した通り、クリック率を上げる対策は簡単ではない中、このようなシンプルな対策は前代未聞です。
劇的な効果は期待薄ですが、継続的な微増による「塵も積もれば山となる」を期待しましょう。

faviconを作成&設置する方法

どんなfaviconが良いか

既にGoogle側でガイドラインが用意されています。
https://support.google.com/webmasters/answer/9290858?hl=ja
このなかで、禁止事項と言えるのは以下ですので、少なくともこれは避けましょう。

「わいせつな表現やヘイト表現に関連するシンボル(例: かぎ十字章)などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。」

今後、クリック率アップだけを狙った派手なfaviconが登場して「faviconスパム」のように呼ばれ、Googleがこれを禁ずる可能性があります。
よって、予めクリック率アップだけを狙わず、faviconの従来の用途に沿った「ロゴ」「ブックマークのアイコン」「自社のホームページを表現する小さい画像」としてfaviconを用意することをおすすめします。

巨大企業のfaviconを見てみる

GAFA
日本の大手サイト
SNS
日本の大手企業

ロゴマークをそのまま使っているのが基本です。枠ありのロゴの方が目立つ傾向があります。
ソニーはロゴが「Sony」のため、頭文字を白抜きでセットしていて、よく目立っています。
色付きの方が目立つ傾向があります。淡い色よりも濃い色がより目立ちます。
以上から次のことを参考にfaviconを用意してみましょう。ただし、既に作成済みなら「わざわざ作り直す必要はない」が基本です。

  • ロゴマークがあり正方形の領域に適当ならそのまま使用する。白抜き版があれば優先
  • 色付きが理想。淡い色より濃い色が良い
  • 新規作成なら、
    a) サービス名・会社名の頭文字
    b) 濃い色の背景に白抜き文字

faviconの作成方法

faviconの仕様や作成方法については2017年に「faviconやホーム画面アイコンの指定方法2017」という記事で紹介しています。
こちらの説明を踏まえ、フロー形式で手順を説明いたします。

STEP1)png画像を作る(画像編集ソフトが使える方)

画像編集ソフトでfavicon用のpngを作成
(画像編集ソフトが使えない方)

以下のような便利なサイト
文字と色を指定するだけ!ファビコンジェネレーター | Drip 'n' Snip
で1文字+背景のシンプルなfavicon用のpngを作成
STEP2)pngをico形式に変換するhttps://www.icoconverter.com/
などでpngをicoに変換しましょう
STEP3)faviconをセットする(まめわざユーザー)

まめわざにログインし、右上の「≡」アイコン→「その他の設定」→「favicon」タブ、と進んで画像をアップロード
(非まめわざユーザー)

画像をアップし、<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180"> 
のようにしてhaedタグ内にセット(ファイルパスとサイズは要変更)
2020/1/24