Bing検索画面にアイコン画像を表示

ホバリングするカワセミ

はじめに

Googleの検索結果にはサイト指定のアイコン画像(ファビコン)は表示されるがBingは表示されなくて,代わりにデフォルトの「グローバル Web アイコン」なる地球マークが表示されている。

Googleの検索結果(アイコン表示あり

Bingの検索結果(デフォルトアイコン表示)

以前から認識していたが,対応が遅くなった。
Bingはファィル名「favicon.ico」のファイルが必要だが,WordPressの標準では準備しない。favicon.icoファイルをブログルートに保存するだけでもアイコン表示されるとの記事もあるが,とりあえず検索記事を参考にコードを記入してみることにする。

結論

1ヶ月以上に渡り2サイトでそれぞれコード登録・変更を繰り返す試行錯誤ですったもんだしたが,どんな設定をしてもBing検索結果のタイトルにはデフォルトの「グローバル Web アイコン」しか表示されない。
結局Bing ウェブマスター サポートに依頼してゴニョゴニョしてもらうのが一番手っ取り早い。
午後にサーポートに依頼して2日後の朝にはアイコン表示された。早い!
サポートから「ファビコンが更新され、Bing の検索結果に反映されるまで 7 ~ 8 日かかることをお知らせします。」と2日後の午後に英文メールで回答が届いたが,既に表示されていた。_(._.)_
しかしサポートへ日本語で依頼したのだが,英語で回答が来たので迷惑メールとして処理するところだった。(-_-;)汗

Bingの検索結果(アイコン表示あり

以下はこのサポート対応や同様記事の検索からの推論

以下は推論だがクローラーが集めたファビコンをBingの特定場所に変換・保存する処理がほぼ上手くいっていないように思う。ある条件では上手くいくときもあるみたいだが,その条件がわからない。固定IP?,ドメイン名(サブディレクトリ有無)?,サイト掲載順位?,開設時期?,何なのか。申し出があった場合にサーポートがその処理を代行しているように思える。システム改修出来ない理由があるのか? 又はやる気がないのか?,規則通りの手順なのか?。何かアナウンスがあってもいいと思う。
サポートの中の人「エンジニアリング チーム」が手入力でファビコン登録処理をするのでヘッダー記載フォーマットは関係なく何でも登録処理してくれるのかな? 変更もサポートにお願いすればOK?
間違っていたらゴメンナサイ! 頑張れマイクロソフト!


以下参考

以下は無駄なことをいろいろ延々と行った記録(-_-;)汗  参考なので見なくても問題ない。

WordPress標準のアイコン

wordpressの標準画像は全てjpeg画像でヘッダー記載分は次の3ファイル(テーマで異なる?)
「cropped-元ファイル名-32×32.jpg」
「cropped-元ファイル名-192×192.jpg」
「cropped-元ファイル名-180×180.jpg」
上記のアイコンリンクがヘッダーに記載される。他のサイズも作成されているがヘッダー記載はない。
Bingで必要なファイル「favicon.ico」は作成されないので,ファビコン画像作成サイト等で作成する。
wordpress標準で作成されてヘッダーに入るアイコンリンクは次の3つ

<link rel="icon" href="ブログURL/wp-content/uploads/yyyy/mm/cropped-ファイル名-32x32.jpg" sizes="32x32" />
<link rel="icon" href="ブログURL/wp-content/uploads/yyyy/mm/cropped-ファイル名-192x192.jpg" sizes="192x192" />
<link rel="apple-touch-icon" href="ブログURL/wp-content/uploads/yyyy/mm/cropped-ファイル名-180x180.jpg" />

新規登録するアイコン

ファビコン画像作成サイト等で作成したリンクに,真偽は定かでないがBing用を追加した。
一般的な記述の1行目とMicrosoftのための専用の記述の2~3行目を追加した。
残りは参考程度で追加してみた。
.ico ファイルのクラシック モードの場合、フル セットは 16×16、24×24、32×32、48×48、64×64 だが(16×16、32×32、48×48)で登録。

<link rel="icon" href="/wordpress/favicon.ico?v=2">
<link rel="icon" type="image/x-icon" href="/wordpress/favicon.ico?v=2">
<link rel="icon" type="image/vnd.microsoft.icon" href="/wordpress/favicon.ico?v=2">
<link rel="shortcut icon" href="/wordpress/favicon.ico?v=2">
<link rel="icon" type="image/png" sizes="32x32" href="/wordpress/favicon-32x32.png?v=2">
<link rel="icon" type="image/png" sizes="96x96" href="/wordpress/favicon-96x96.png?v=2">
<link rel="icon" type="image/svg+xml" href="/wordpress/favicon.svg?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/wordpress/apple-touch-icon.png?v=2">
<link rel="manifest" href="/wordpress/site.webmanifest">

以前の自動作成サイトはpngの16×16も作成していたようだが,今般は使用頻度が少ないのか作成しない仕様となっている。
ちなみに従来のファビコン画像作成サイトから作成されるアイコンリンクは下記だったみたい。(検索した過去記事から)

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
<link rel="manifest" href="/site.webmanifest?v=2">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=2" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico?v=2">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

アイコンファイル保存

ブログのルートフォルダーにアイコンファイルを保存する。
プログのURLが「https://hoge.com/wordpress/」であれば,ルートフォルダーは「wordpress」になる。
1.favicon.ico (16×16、32×32、48×48)
2.favicon-32×32.png
3.favicon-96×96.png
4.web-app-manifest-192×192.png
5.web-app-manifest-512×512.png
6.favicon.svg
7.apple-touch-icon.png
8.site.webmanifest  ファイル内のアイコンリンク修正必要の場合あり

wordpressを開く場合はヘッダー記載のアイコンリンクが適用されるが,同じフォルダー内の他のファイルを開く場合のブラウザー表示アイコンは,上位フォルダーの「favicon.ico」が適用されるようなのでドメインルートにも保存した。

header.phpへ記入

記入方法はテーマファイルエディターで「header.php」の「</head>」直前にアイコンリンクを記入する。親テーマ又は子テーマの「header.php」カスタマイズについては過去記事参照

・・・・・省略・・・・・
<?php
	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>

<link rel="icon" href="/wordpress/favicon.ico">
<link rel="icon" type="image/x-icon" href="/wordpress/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/wordpress/favicon.ico">
<link rel="shortcut icon" href="/wordpress/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/wordpress/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/wordpress/favicon-96x96.png">
<link rel="icon" type="image/svg+xml" href="/wordpress/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/wordpress/apple-touch-icon.png">
<link rel="manifest" href="/wordpress/site.webmanifest">

</head>

ファイル末尾に指定するバージョン情報「?v=2」は頻繁に更新する場合は必要なのかも。

おわりに

Bing検索結果にファビコン表示させるためいろいろ設定変更していたら,今度はGoogle検索結果のファビコンが「グローバル Web アイコン」に変わってしまった。あまり頻繁に変更すると駄目なのかも。
今回はWordPress標準のアイコンに不足していると思われるアイコンを追加してみたが,様々な検索エンジンやブラウザ対応用として複数のアイコンを規格統一して1種類で済まないものかな。

Favicon checker
https://realfavicongenerator.net/favicon_checker#.Y9TAjWDP25c

Bing関連サイト
Bing Webmaster Tools

Googleのファビコン設定
検索結果用のサイトのファビコンの設定 | Google 検索セントラル  |  ドキュメント  |  Google for Developers