検索結果のファビコンがどうしても反映されず変わらない→解決したその方法
Googleのモバイル検索結果のページのファビコンのicoデータを変えてもどうしても反映されず古いアイコンが出続ける問題に遭遇、結果的に解決しましたので報告します。
2019年5月、Googleのモバイル検索結果のページに各サイトのファビコンが表示されるようになりました。faviconというとサイトを開いた時にブラウザのタブなどに表示される小さなアイコンで、解像度が低かった昔と違い、今となっては本当に小さく気にならず意味をなさないものになっていました。実際Safaiに至っては表示すらしていません。
そんな中、今やメインストリームであるモバイル検索の、それも目立つ場所へファヴィコンがが表示されるとはWeb担当者にとっては寝耳に水の話だったと思います。
事実、このサイトのファビコンはブラウザのグレーの上に表示される事が前提のほとんど白色のアイコンだったのでモバイル検索では全く目立たないという状態になっていました。
そこで早速、favicon.icoのデザインを変更しようとしたのですが・・・・・
ファビコンのデザイン変更
favicon.icoなんて数年間変えてなかったので作り方すら忘れていました。Googleのガイドラインを参照して作り直します。まず48x48の倍数の大きめの画像、192x192のpngを作成。海外のサイトでそこから様々なサイズの画像を詰め込んだfavicon.icoを自動生成するサービスがすぐ見つかったのでそれを利用、簡単に新しいfavicon.icoを作ることができました。(favicon makerなどで検索)
Googleのガイドラインにはhtmlのheadにlinkタグを埋め込み、relには以下のいずれか、hrefには参照先のfavicon.icoを指定する様に書いてありました。
- "shortcut icon"
- "icon"
- "apple-touch-icon"
- "apple-touch-icon-precomposed"
サイトにはrelにshortcut icon、hrefに/favicon.icoを指定してあったのですが、念の為全ページに上の4つを入れておきました。shortcut icon以外は192x192のpngのパスを指定しました。さて、ガイドラインにはクロールされたら検索結果のファヴィコンが変わるとあるので3日ほど待ちます。
検索結果のファビコンが変わらない！
3日後、そろそろGoogleの検索結果のファビコンに反映されただろうと、手持ちのスマホでsite:ドメイン名で確認。
・・・
全く変わってません(￣ロ￣ll)
SearchConsoleをみてもちゃんとクロールは来ている模様。特にトップページは今朝クロールが来たばかり。
ちょっと焦りすぎなのかもしれません。そのうち変わるだろうと一日一日、スマホでsite:検索して変化を待ちました。
半月後
半月後。未だに変わってません
流石におかしいと思いネットを検索すると皆さん半日から2日で反映されたとの報告。
調査開始しました。
確かめたこと
favicon.icoへのlinkがちゃんと設定されているか
まず、favicon.icoがちゃんと設定されているか。これは海外のファビコンチェッカーを3つほど試してどれもPassなので問題ないでしょう。(favicon checkerなどで検索すると出てきます)
ブラウザキャッシュに残っていないか
こちらのローカルのブラウザキャッシュに残っていて実はすでに変わってたというオチもあるかなと、キャッシュを無効化しても同じ。Googleの検索結果のソースを見ると、favicon表示はdataurl(htmlに画像を埋め込む方式)を使っていてキャッシュの対象外。
実験
やはりこちらの問題ではなさそうなので、Google側の調査をしてみました。
インデックスの状態
SearchConsoleからURL Inspectorでfavicon.icoを試しに指定してみました。すると結果は「インデックスされていません」。当たり前と言えば当たり前ですが。
一応LiveTestもやってみます。すると「robot.txtにブロックされています」との記述が。
robot.txtの確認
robot.txtは確かに心当たりがあって最近変更した経緯はあります。しかもその変更はミスでちょうどfavicon.icoをブロックする様な設定でした。
しかしそれは半月以上前の話ですぐになおしたはずです。実際、Googleのrobot.txtチェッカーで現在のrobot.txtでfavicon.icoの位置を指定したらちゃんとAllowedになり問題はありません。
キャッシュの消去
SearchConsoleは古いバージョンに切り替えるとインデックスの削除やGoogleのキャッシュの消去もできます。Google側にキャッシュ保持している旧ファビコンが古いのですから、ここからキャシュを消去するリクエストをすれば再度読み込んでくれるかもしれません。
コンソールから/favicon.icoのURLを指定してキャッシュ消去のリクエストをします(間違えてインデックスから消してしまわないように注意しました)。リクエスト状態になります。
1日後、確認するとRemovedのステータスになっていました。
さすがにこれで、検索結果のファビコンは、「デフォルトの地球マーク」になっているか再度読み込まれて「更新後のファヴィコン」になっているに違いありません。
さっそくスマホでsite:サーチ。
表示されたのは
・
・
・
旧ファビコンΣ(￣ロ￣lll)
考察
明示的にGoogle側のキャッシュを消去したのにもかかわらず、dataurlで旧ファビコンが配信されるということはつまり、
「Googleはウェブクロールのキャッシュとは別にファビコンをキャッシュしている」
ということです。なのでいくら待っても、明示的に消去してもファビコンが変わらないということですね。
やってみたこと
そこでやってみたことは以下の通り。
- favicon.icoをコピーして例えば、favicon-v2.icoとしてサイトに配置
- linkタグのrelがshort cutの部分のhrefが指すパスをfavicon.icoからfavicon-v2.icoに変更
これだけです。もし上の推測通り、Googleがfaviconをウェブクローラのキャッシュとは別のキャッシュに持っていて、そちらが何らかの原因(例のrobot.txtのミスが怪しい)でキャッシュを更新していないのであれば、これで別のファイルがfavicon.icoに使われたと認識してそのキャッシュは使われなく成るはずです。
検索結果のファビコンが変わった！
翌日
無事、Googleのモバイル検索に出てくるファビコンが半月前に変えたものになりました！＼(＠＾０＾＠)／
大成功です！半月前にファイル名変えておけばよかったですね笑
まとめ
ということで、Googleの謎のキャッシュに保持されていた旧ファビコンは新ファビコンに変更されました。
おそらく、なんらかの内部的な問題でfavicon.icoのファイル内容だけを変えてもキャッシュ更新がされていなかった模様です。
教訓としては
検索結果のfavicon.icoを確実に変更するならキャッシュ対策でファイル名も変えておくこと(もちろんlinkタグのhrefも)
です。その上で、先に書いたチェッカーで試しておくことをおすすめします。
同じ様な問題に遭遇した方の一助になれば幸いです。
