Google検索結果でアイコンが表示されないときの対処方法（Hexo対応）

概要

Googleの検索結果にアイコンを表示させるための手順を残します。

初回普通にfaviconを設定していましたが、なかなか反映されず困ってましたが、
色々な方法を試して無事登録できたのでその方法を紹介していきます。

同じように苦戦している方の参考になればうれしいです！

Hexoを使用していない方もこの方法は有効だと思うので、是非見ていってください（^^/s

ちなみに変更前は下記のようにアイコンは表示されていません。
変更前

目次

手順

1.様々な形式のアイコンを作成

Google検索結果表示用に設定する画像形式は複数用意する必要があります。

  • 用意する形式
    • svg
    • ico
      • size:144×144px
    • png
      • size:144×144px

サイズもきっちり合わせたほうが確実かと思います。
ちなみに検索結果のアイコンには48px以上が推奨されています。
developers.google.comソース

複数種類用意しないとiPhoneだけ表示されないなど、プラットフォームによって表示されない可能性があります。 場合によってはできるかもですが、自分の場合は3種類用意して表示されました。

2.head要素に用意したアイコンを設定する

head要素に用意したアイコンをすべて設定します。

site\themes\light\layout\_partial\head.ejs

1
2
3
<link rel="icon" href="/images/common/pin.svg" type="image/svg+xml">
<link rel="shortcut icon" href="/images/common/favicon.ico" type="image/x-icon">
<link rel="icon" href="/images/common/pin.png" type="image/png" sizes="144x144">

head要素

3.数日待ってから確認

数日待ってからGoogleで自分のサイトを検索すると、検索結果にアイコンが表示されます。

完成

自分の場合は、2週間くらいかかった気がします。 GoogleのクロールBotが巡回されるまで気長に待つしかなさそうです。。。

4.いつまでたっても適用されない場合

GoogleSearchConsoleでトップページのインデックス再登録を実施すると登録されるかもしれません。
自分も一応やっておきました。
損はしないと思います！

締め

自分の場合は、色々やり方を試しましたがなかなか表示されませんでした。。。
試行錯誤してようやく検索結果に表示することができたので、似たように悩んでいる方の参考になりましたらうれしいです。

あとはGoogleのクロールの頻度が低いので、一発で決めれるように確実に設定していきましょう！

サイトアイコンがないとクリックするときに少し不安感を覚えるので、これでさらにサイトの完成度が上がりました！

以上。
他にもいろいろHexo関連の記事を書いています。よければ見ていってください（^^b
お疲れさまでした。

エンジニアリング
エンジニアリング, 手順, Google