オープングラフ（共有プレビュー）

オープングラフ（OGP）タグには何が入る？

オープングラフのタグは、ページのヘッド部分に書く短い説明書きで、基本の4つはタイトル・種類・メイン画像・アドレスです。Open Graphプロトコルの公式ドキュメント（ogp.me）は、この4つをすべてのページに必要なプロパティとして定めています。

ここに説明・サイト名・言語・画像の説明を加えると、プレビューがより整います。お客様の目に入るのは主にタイトル・説明・画像ですが、残りの値もサービスがリンクを正確に理解するために使われます。

これらのタグは、お客様の目に見えない場所に書かれます。そのため実際にリンクを送ってみるまでは抜けているかどうか気づきにくく、公開前のチェックリストに必ず入れておくのがおすすめです。

共有プレビューの画像はどんなサイズ・構成で作る？

横長の長方形で、おおよそ1.91:1の比率（例：1200×630）で作るケースがいちばん多いです。Meta（Facebook）の開発者ドキュメントは、高解像度の画面できれいに見えるよう幅1080ピクセル以上の画像を推奨し、画像の幅・高さもタグで一緒に記載するよう案内しています。

サービスによって、画像を切り取って表示する比率が少しずつ違います。そのため、お店の名前や重要な文字は端を避け、中央に寄せておくと安心です。

画像の中に文字を入れるなら、10文字前後の短いフレーズ1つで十分です。グループトークではプレビューが手のひらより小さく表示されるので、スマホの画面で直接確認してみてください。

画像の容量も大きくしすぎないようにしてください。共有サービスが画像を取得するのに時間がかかると、プレビューに画像が表示されないことがあります。

ページごとにプレビューを変えるべき？

はい、お客様によく送るページなら、ページごとに別々に設定するのがおすすめです。すべてのリンクが同じロゴ画像で表示されると、受け取った人は開いてみるまで何の内容かわかりません。

少なくともトップページ、メニュー・料金ページ、予約ページ、イベントページは個別に設定しておいてください。タイトルにはそのページでお客様が得られる内容を、画像にはその内容をいちばんよく表す場面を選べば大丈夫です。

新しい記事や商品を頻繁に載せるお店では、一つひとつ設定するのは大変です。記事の最初の写真や商品のメイン写真が自動でプレビュー画像になるよう設定しておくと便利です。

• カフェ：新メニューのお知らせリンクには、新メニューの写真と「秋限定の栗ラテ発売」のタイトル。
• 美容室：イベントのリンクには、「初めてのお客様向けトリートメントのご案内」のタイトルと店内の写真。
• 工房：クラス募集のリンクには、完成作品の写真と「11月の週末クラス募集」のタイトル。
• オンライン販売：商品のリンクには、その商品の写真と商品名がそのまま表示されるように。

共有プレビューのタイトルと説明はどう書く？

共有プレビューのタイトルは、受け取った人がリンクを開く前に何が得られるかわかるように書けば大丈夫です。検索結果に表示されるページタイトルと同じでもかまいませんが、トークルームで読まれる言葉であることを考えて、少し語りかけるように整えるのもよいでしょう。

説明は、オープングラフの公式ドキュメントにあるとおり1〜2文で十分です。営業時間・場所・予約方法のように、受け取った人が知りたい情報を前に置いてください。プレビューでは長い文は途中で切れて表示されがちです。

メイン画像を決めたら、画像の説明（og:image:alt）も一緒に書いておいてください。オープングラフのドキュメントもあわせて書くことを勧めており、スクリーンリーダーを使う人にも画像の内容が伝わります。

お店の名前を繰り返すだけのタイトルより、リンクを受け取った人が次に何をすればいいかが見えるタイトルのほうが、開く理由をはっきり示せます。「〇〇工房」より「〇〇工房・11月のクラス日程」のように、です。

• タイトルの例：「カフェ〇〇・延南洞のハンドドリップ、毎日10時〜22時」
• 説明の例：「窓際の席が広いハンドドリップカフェです。コーヒー豆は店頭でも購入できます。」
• 惜しい例：タイトル「ホーム」、説明「ようこそ」のように、お店がわからない文言

プレビューが更新されない・おかしく表示されるときは、どの順で確認する？

ほとんどは、タグが抜けているか、画像のアドレスに問題があるか、サービスが以前のプレビューを記憶しているかのどれかです。以下の順番で確認すれば、原因を見つけやすくなります。

Meta（Facebook）は、シェアデバッガーで再取得させれば、通常の更新周期（約24時間）を待たなくてよいと案内しています。カカオトークも、カカオの開発者サイトにある共有デバッガーで同じことができます。

同じリンクを複数のサービスで送る予定なら、サービスごとに一度ずつ確認しておいてください。同じタグを読み込んでも、サービスによって画像の切り取り方や文字数が違って見えることがあります。

1. 01該当ページにog:title・og:imageのタグが実際に入っているか確認します。
2. 02画像のアドレスが「https://」で始まる完全なアドレスか確認します。
3. 03画像のアドレスをブラウザに直接入力し、ログインなしで開けるか確認します。
4. 04画像の容量が大きすぎないか確認します。
5. 05Metaのシェアデバッガーやカカオの共有デバッガーにアドレスを入れ、プレビューを再取得させます。
6. 06カカオトークの「自分に送る」でもう一度送り、結果を確認します。

オープングラフでよくある失敗は？

いちばん多い失敗は、すべてのページに同じタイトルとロゴ画像を入れることです。設定はされていてもリンクごとの違いがないので、共有したときに開く理由を与えられません。

画像を差し替えてもファイル名をそのままにしていると、サービスが古い画像を表示し続けることもあります。画像を新しく作ったら、ファイル名も変えておくのが確実です。

共有プレビューは、オーナー様が送るリンクだけでなく、お客様が友人に送るリンクにも同じように使われます。お客様が代わりに宣伝してくれる瞬間なので、トップページと予約ページだけは必ず整えておいてください。

オープングラフについて制作会社に何を聞けばいい？

共有プレビューは公開後に手直しするのが面倒なので、デザイン案の段階で以下の4つを聞いてみてください。

• ページごとにタイトル・説明・画像を個別に設定できますか？
• 新しい記事や商品を載せるとき、プレビュー画像は自動で設定されますか？
• 共有プレビューをカカオトークで実際に確認してもらえますか？
• あとでオーナー様が管理画面からプレビューを変更できますか？