Studioでファビコン・OGP画像を設定する基本——タブとSNSシェアの見え方を整える

サイトのデザインや文章はしっかり作り込んだのに、ブラウザのタブを見ると味気ないアイコンのまま、SNSでシェアされても画像が出ない——という状態になっていることがあります。

原因は、ファビコンとOGP画像という2つの設定が未設定のままになっていることです。この記事では、それぞれの役割と、用意するときの基本を整理します。

ファビコンとは

ファビコンは、ブラウザのタブやブックマーク一覧、閲覧履歴などに表示される小さいアイコンです。複数のタブを開いているとき、ファビコンがあるだけで自分のサイトを見分けやすくなります。

表示される場所が小さいため、細かい文字や複雑な絵柄は潰れて見えにくくなります。ロゴの一部や、シンプルな図形に絞ったデザインが向いています。

OGP画像とは

OGP画像は、URLをSNSやチャットアプリで共有したときに、リンクと一緒に表示される画像です。文章だけのリンクよりも、画像が添えられているほうが目に留まりやすく、クリックされやすくなります。

ファビコンとは違い、OGP画像は横長の1枚の画像として、比較的大きく表示されます。サイトの雰囲気が一目で伝わるような画像を用意すると効果的です。

確認しておきたい4つ

ファビコン・OGP画像とも、次の4点を確認しておくと、公開後に慌てずに済みます。

• ファビコンは正方形（Google検索セントラルが推奨する48×48ピクセル以上）で用意する
• OGP画像は横長（1200×630px程度）で用意する
• OGP画像の文字・ロゴは端に寄せすぎない
• 公開後、実際にURLをシェアして見え方を確認する

なぜ端に寄せすぎないほうがいいのか

OGP画像は、共有先のSNSやチャットアプリによって、表示される比率や切り取られる範囲が微妙に異なります。同じ画像でも、あるアプリでは全体が見えるのに、別のアプリでは上下や左右が少し切れて表示されることがあります。

文字やロゴを画像の端ぎりぎりに配置してしまうと、切り取られたときに読めなくなる恐れがあります。伝えたい要素は、画像の中央寄りにまとめておくと安全です。

公開後に確認する方法

設定して満足するのではなく、公開後に実際の見え方を確認しておくと安心です。自分が使っているSNSやチャットアプリに、実際のURLを貼ってみて、意図した画像・文言が表示されるか見てみましょう。

一度共有された内容が古い画像のままキャッシュされ、更新後もすぐには反映されないことがあります。画像を差し替えたのに見え方が変わらない場合は、時間を置いてから再度確認してみてください。

まとめ

ファビコンとOGP画像は、サイトの中身そのものには関わらない設定ですが、タブの中やSNS上での「見つけやすさ・目に留まりやすさ」を左右します。デザインや文章がひと通り整ったら、この2つの設定も忘れずに確認しておきましょう。検索結果でのタイトル・説明文の整え方はノーコードで作ったサイトのSEO、最初にやること・後回しでいいことで扱っているので、あわせてどうぞ。