こんにちはこんばんは。今日は植物ネタじゃなくて、ブログ運営の話です。
ブログ開設からしばらくして勃発した、ファビコンが表示されないという問題を解決した記事です。（ファビコンとは何ぞや？というのは下項にて）
もう、ずぅっーーーーーーーーーーーーと気になっていて、時間があるときにちょこちょこ調べて、やぁっと、実に一年越しに解決しました。
その解決方法を備忘録として記事にします。
（サイト運営の技術的な話です。植物は全く関係ないので、興味の無い方は別の記事をお楽しみください。たぶん当ブログの読者様にはニーズの無い情報だと思うので……）
もうね、「ファビコン 表示されない」とかで検索しても、ファビコンの作り方とか設置方法とか、1ミリも役に立たないクソ情報ばっかりで原因がわからず、解決するのが大変だったんです。嬉しいのでブログ記事にしちゃいます！
この問題を解決するにあたり、参考にしたのがこちらのサイトです。私はWeb専門ではないので、至らない点があるかもしれません。また、技術的というよりは、読み物調に仕上げた記事にしています。より詳しい情報をお求めの方は参考サイトを参照ください。
ファビコンとは？
もず基本的な、ファビコンとは？という話。
見てもらうのが一番早い。コレです↓↓↓
ファビコンとはホームページやブログのアイコンのことです。Favorite iconを略してファビコン。
検索結果に表示されるほか、ブラウザのタブやお気に入りバーに表示されます。
ちなみにですね、このファビコン、ブラウザ上での見た目が良くなる以上の意味はありません。ファビコンを設置したからといって、検索結果の表示順位が良くなるとか、もちろんブログの内容が良くなるとか、そういうメリットは一切ありません。あえて利点を挙げれば（人間の）視認性が上がるとかでしょうか…
ファビコンが検索結果に表示されない
そのファビコンが、ブログ開設後しばらくしてから表示されなくなりました。（上の画像の状態）
正確には検索エンジンによる、検索結果表示時にファビコンが表示されない。という問題が勃発しました。（タブやお気に入りバーには表示される）
ファビコンの情報を載せているいろいろなサイトには、反映には時間がかかると書いてあります。…が、1ヶ月待っても、半年待っても、一年待ってもファビコンが反映されません。
ずっーーーーーーーーーーーーーーーーと地球儀マーク（ファビコンが設定されていないデフォルト状態）なんです。
グーグルはもちろん、ヤフーでも表示されない（まぁ同じグーグルの検索エンジン使ってるしな…）。スマホだけでなく、PCもダメ。
もすレコのファビコンが表示されない…
…？なんで大したメリットのないファビコンにこだわるかって？だって気持ち悪いじゃないですか、設定したことが反映されないのって。
Webは気分や体調で結果が変わりません。0か1かの世界です。設定が反映されないのは、何かが間違っているか問題があるということ。だからねちっこく時間を見つけて調べてたんです。
そういえば余談ですが、モスバーガーさんがモスレコードというのをはじめましたね…
もすレコ。はCMSを使用
原因を究明するため、さらに話を基本的なことに戻します。
当ブログ、もすレコはCMS（コンテンツマネジメントシステム）というものを使って運営しています。※セキュリティのため具体名は避けます。CMSというのは、ホームページやブログを運営するアプリみたいなもんです。
このブログは、アメブロやはてな、楽天ブログなどのブログサービスを利用することとは異なり、私自身がサーバーを借りて運営。そのレンタルサーバーにCMSをインストールすることで、ブログサイトを構築しています。
従来（だいたい2000年以前）のウェブサイトの仕組みは、レンタルサーバー内に.html形式のファイルを設置し、それを閲覧者がブラウザを通して見る。というかたちでした。
2000年以降（普及したのは2010年頃。その間は過渡期）は、そのレンタルサーバーにCMSをインストールし、ウェブサイトを運営するという形式が一般化してきました。
このCMS、なにがいいかと言うと、従来のHTML形式のサイトは更新のたびに、関係する.html形式のファイル（1ファイルがサイトの1ページに相当）すべてを修正する必要があったのに対し、CMSは関係箇所の更新を自動でしてくれる。というのがいいんです。管理の手間が大幅に省けます。
例えば、アクセス数人気記事ランキングをつくろうとすると、従来は大変な手間がかかりましたが、CMSではアクセス数を自動集計、ランキングを自動作成後、それをサイト各所で自動更新する。といったことが簡単にできます（CMSがやってくれます）。
ブラウザから.htmlファイルを閲覧するという静的な形式から、ブラウザからのリクエストに応じて、CMSがページを動的に生成するという形式に変わってきたというわけ。
なのでレンタルサーバーもただのファイルの安置所から、CMSというウェブサイト運営プログラムをインストールし、運用するというかたちに変わってきました。
んで、そのCMS、サイトの更新だけではなく他にもいろいろな機能があります。今回の問題である、ファビコンの設置機能がある場合があり。
当ブログ、もすレコもCMSの機能を用いてファビコンを設置。
さらにCMSは、さまざまなプラグイン（機能拡張）を利用することができ、自分好みにサイトをカスタムすることができます。
なんでこんな前置きが長い話をしたかというと、そのCMSのプラグインが今回の問題の原因だったからです。
ブログの表示速度を速くする必要があった
まだ前置きが続きます。
去年（2023年）から、グーグルはウェブページの表示速度も評価対象にしました。つまり、サイト自体の内容＋ページの表示速度の速さで検索表示順位が決まる。と。
現在はヤフーもグーグルの検索エンジンを使っています。事実上、検索エンジンシェアはグーグルの寡占状態であり（ChatGPTの登場で変化がありそうですが）、そのため、サイト運営においてはグーグルからの評価が非常に重要になっています。
そんなわけなんで、もすレコもページの高速表示化をする必要がありました。
ページの表示を重くする原因の一つが画像です。
画像の品質を維持しつつ、ファイルサイズを軽くする必要がある。そうすることでページの見た目を変えず、表示を高速化することができます。
そこで導入したのがWebP（ウェッピー）という画像形式です。
ファイルサイズが小さいWebP
WebP（ウェッピー）というのはグーグルが開発した、Web表示に特化した画像形式。
WebPは現在主流の画像形式、JPEG（ジェイペグ）と比べ、画質を落とさずに容量を軽くすることができ、かつ透明半透明を維持できる。というメリットしかない画像形式。
ただし、対応している画像編集ソフトは少なく、やはりJPEGのほうが圧倒的に取り回しがいい。
なので、元の画像はJPEGのままにして、CMS側に画像をWebPに変換するプラグインをインストール、運用することにしました。
こうすることで、ブログにJPEG画像ファイルをアップロードすると、プラグインが自動でWebPに変換してくれます。便利！
検索結果にファビコンが表示されない原因はWebP（ウェッピー）
ところがこのプラグイン、アップロードする画像をすべてWebPに変換してしまいます。JPEGだけではなくPNGも（PNGは透明データを維持できるJPEGみたいなもんと思ってください）WebPに変換。
つまりですね…
前述のようにCMSを利用してアップロードした画像をファビコンに設定した場合、
WebPのファビコンデータが出来上がってしまいます。
通常ファビコンは、上に書いたPNG（.png）または.icoの形式（アイコン専用の画像）が推奨されています。
今回の検索結果にファビコンが表示されない。という問題の原因を調べた結果、
どうやら検索エンジンがWebPの表示に対応していない（対応ないし、あるいは何かしらの問題がある）というのが原因のようです。
解決方法
ということで解決方法。
WebPに変換するプラグインを一時的に無効化し、ファビコンデータをあらためてアップロード。
その後、アップロードしたファビコンデータをファビコン画像に設定。
こんだけ。
注意点としては、データアップロード後、サーバー内の画像データをWebPに最適化しないこと（最適化してしまった場合はもう一度やり直す）。あと、一時的に無効化したプラグインを、有効にするのを忘れずに。また、ファビコンの変更はすぐに反映されないので、3日～1週間後に確認。
んで1週間後↓↓↓
無事ファビコン表示( TㅅT )
いやー。マジで一年かかりました（嬉）
ファビコンデータをFTPを用いて、サーバーに直接アップロード後、ヘッダ内にファビコンのパスを直接記述…とかもやったんですが、これでは解決せず。
お使いのCMSなど、環境によって原因と解決方法が異なる場合があります。参考事例のひとつとしてお考え下さい！
ファビコンが表示されないのは、WebPが問題だった！というのがこの記事でもっとも言いたかったことです！
それでは。
読んでくれてありがとうございます人気ブログランキングはお好みのジャンルからブログを検索できるサービスです。
もすレコ。は人気ブログランキングに参加しています！良ければクリックしてね
コメント