OGP・ファビコンとは?SNSや検索での「見え方」を整える基本
LINEやSNSでリンクを共有したときに出る画像とタイトル。ブラウザのタブに表示される小さなアイコン。どちらもホームページの「見え方」を左右する大切な部品です。OGPとファビコンの意味と、整えておくべき理由を解説します。
執筆: おもてらいと編集部(ホームページ運用チーム)
お客さまがあなたのお店のホームページをLINEで友だちに教えるとき、トーク画面には「画像つきのカード」が表示されます。あの画像とタイトルがどう決まるかをご存じですか。
結論から言うと、あれを制御しているのがOGPという仕組みです。そしてブラウザのタブに出る小さなアイコンがファビコン。どちらも小さな部品ですが、ホームページの「見え方」と信頼感を左右します。
先に、要点をまとめます。
- OGPは、リンクを共有したときに出る「画像・タイトル・説明文」を決める仕組み
- ファビコンは、ブラウザのタブに表示される小さなアイコン
- どちらも「共有されたとき・見返されたとき」の第一印象を整える部品
OGPとは何ですか?
OGP(Open Graph Protocol)とは、ホームページのリンクがSNSやメッセージアプリで共有されたときに、どんな画像・タイトル・説明文を表示するかを指定する仕組みです。
LINE、Instagram のDM、X(旧Twitter)、Facebook——リンクを貼ると出てくるあのプレビューカードは、ページ側に埋め込まれたOGPの情報を読み取って作られています。
OGPが設定されていないと、どうなりますか?
画像なしの素っ気ないリンクになったり、ページの端から拾われた意図しない文章が説明文として表示されたりします。
考えてみてください。お客さまが「このお店いいよ」と友だちにリンクを送ってくれたとき、そこに表示されるのは無関係な文字列だけ——せっかくの紹介の瞬間に、お店の顔が見えないのは大きな機会損失です。
OGP画像には何を使えばいいですか?
お店の外観や代表的な商品など、「一目でどんなお店かわかる写真」がおすすめです。横長(1.91:1程度)でつくるのが標準で、小さく表示されても読めるよう、画像内に細かい文字を入れないのがコツです。写真の準備はホームページの写真はスマホで十分?準備のコツと撮り方の基本も参考にしてください。
ファビコンとは何ですか?
ファビコン(favicon)とは、ブラウザのタブ・ブックマーク・履歴などに表示される小さなアイコンのことです。「favorite icon」を縮めた言葉です。
たった16〜32ピクセル四方の小さな画像ですが、役割は意外と大きいものです。
- タブをたくさん開いているとき、お客さまがあなたのサイトを見つける目印になる
- ブックマークの一覧で、きちんとしたサイトという印象を与える
- 未設定だと空白のアイコンになり、どこか未完成な印象を残す
お店のロゴやシンボルマークを設定するのが定番です。
検索結果にも影響しますか?
ファビコンは、スマートフォンのGoogle検索結果でサイト名の横に表示されることがあります。つまりタブの中だけでなく、検索結果での「見つけやすさ」にも関わる部品になっています。
OGPも同様に、検索そのものの順位を決める要素ではありませんが、SNS経由の流入やクリック率という形で、間接的にサイトへの訪問数に影響します。
設定は難しくないのですか?
自作サイトの場合は、HTMLにメタタグ(ページの情報を記述するコード)を書き、規定サイズの画像を用意する必要があります。難しくはありませんが、ページごとの設定漏れが起きやすい部分です。
おもてらいとでは、登録いただいたお店の情報・写真・ロゴをもとに、OGPとファビコンが自動で設定されます。「共有されたときの見え方」まで含めて、最初から整った状態で公開できます。
まとめ:共有された瞬間も「お店の顔」
OGPとファビコンは、お客さまがリンクを共有したり、タブを見返したりする瞬間の「お店の顔」です。目立たない部品ですが、整っているかどうかで印象は確実に変わります。
公開前には、実際にLINEなどで自分のサイトのリンクを送ってみて、どう表示されるかを確かめてみてください。公開前の確認項目は、コラムホームページ公開前チェックリスト15項目にまとめています。
Related
関連ガイド
ホームページの写真はスマホで十分?準備のコツと撮り方の基本
ホームページの印象を大きく左右するのは、実は文章より写真です。プロに頼まなくても、いまのスマートフォンで十分きれいな写真は撮れます。用意すべき写真の種類と、明るさ・構図の基本、やってはいけないことをまとめました。
ホームページとは?ウェブサイトとの違いと、小さなお店に必要な理由
「ホームページ」と「ウェブサイト」は何が違うのか、そもそもホームページとは何なのか。いまさら聞きにくい基本を、小さなお店の目線でやさしく整理します。これからホームページを持つか考えている方の最初の一歩になるガイドです。
SNSがあればホームページは不要?役割の違いと使い分けの考え方
InstagramやX(旧Twitter)を頑張っているから、ホームページはいらないのでは——そう考える方は多くいらっしゃいます。結論は「役割が違うので、置き換えにはならない」。SNSとホームページそれぞれの得意・不得意と、小さなお店での現実的な使い分けを解説します。