Open Graph

Open Graph Protocol (OGP) は、Facebook が 2010 年に策定したメタタグのプロトコルで、Web ページが SNS でシェアされた際に表示されるタイトル、説明文、画像、URL などの情報を制御します。HTML の <head> 内に og:title、og:description、og:image、og:url、og:type などのプロパティを <meta> タグとして記述します。仕様上必須とされているのは og:title、og:type、og:image、og:url の 4 つで、og:description は必須ではありませんが、説明文が空だと共有先が本文から適当な箇所を拾うため、実務では必ず設定します。OGP を設定しないと、SNS のクローラーがページ内容を自動的に推測してプレビューを生成するため、意図しない表示になることがあります。

OGP を適切に設定すると、Facebook、LinkedIn、Discord、Slack、LINE などの SNS やメッセージングアプリでリンクを共有した際に、意図したプレビューカードが表示されます。タイムラインやチャットではリンク先の中身が見えないため、プレビューのタイトルと画像が「開くかどうか」の判断材料になります。特に画像は面積が大きく目に入りやすいので、記事ごとに内容を表す画像を用意するか、少なくともサイト共通の読みやすいカード画像を og:image に指定しておきます。

各プロパティには実務上の目安があります。og:title と og:description は、共有先のサービスやデバイスによって表示できる幅が変わり、収まらない分は省略記号で切られます。上限を公表していないサービスもあるため、特定の文字数を守ることより「先頭に要点を置き、途中で切れても意味が通る書き方にする」ほうが確実です。og:image については Facebook の公開資料に具体的な条件があり、高解像度の端末で綺麗に表示させるには 1200 x 630 ピクセル以上、許容される最小サイズは 200 x 200 ピクセル、フィードでの切り取りを避けるには 1.91:1 に近い比率、ファイルサイズは 8MB を超えないこととされています。1.91:1 に近い横長は他のサービスの大きなカード表示にも収まりやすいため、1 枚の画像を使い回す場合の基準になります。

OGP は Facebook が策定しましたが、W3C などの標準化団体が定めた仕様ではなく、多くのサービスが参照する事実上の共通仕様という位置づけです。X (Twitter) は独自の Twitter Card タグ (twitter:card、twitter:title など) を持つため、X からの流入を重視する場合は og: 系と twitter: 系の両方を書いておくと、どちらを参照する実装でも意図した表示になります。なお、OGP は検索順位を決める要因ではありませんが、Google は検索結果の見出し (タイトルリンク) を生成する材料の一つとして og:title の内容を挙げています。「SNS 専用のタグだから検索結果には無関係」とは言えないため、<title> と大きく異なる文言を入れる場合は、検索結果側の見え方も確認しておくと安全です。

よくある誤解として、OGP タグを変更すればすぐにプレビューが更新されると思われがちですが、共有先のクローラーは取得した内容をキャッシュするため、即座には反映されません。Facebook では Sharing Debugger で対象 URL を再取得させ、最新のプレビューを確認できます。X については、ログインした状態で投稿の下書きに URL を貼り、実際のカード表示を確かめるのが確実です (かつて公開されていた検証ツールは、現在は利用できなくなっています)。また、og:image の URL を変更する際は、ファイル名自体を変更するかクエリパラメータを付与してキャッシュを回避する手法が有効です。

文字数カウントの観点では、og:title や og:description の長さを事前に把握しておくことが役立ちます。文字数カウントツールで長さを確認し、共有先のプレビューで途切れても要点が残る構成に調整することで、効果的なソーシャルシェアにつながります。