OGP設定ガイド — SNSでの見え方を最適化する
SNSやチャットアプリでURLを共有したとき、タイトルや画像、説明文がカード形式で表示されることがある。あの見た目を制御しているのがOGP（Open Graph Protocol）である。設定を怠ると、リンクは味気ないテキストのまま流れていき、クリックされる機会を逃してしまう。ここではOGPの基本と、正しく表示させるための設定ポイントを整理する。
OGPとは何か
OGPとはOpen Graph Protocolの略で、もともとFacebookが提唱したウェブページのメタ情報の規格である。ページのHTMLヘッダー内にOGP用の情報を記述しておくと、SNSやチャットツールがそのリンクをカード表示する際に、その情報を読み取って見た目を組み立てる。つまりOGPは「このページが外部で共有されたときにどう見えるか」をサイト側から指定するための仕組みだと考えてよい。
OGPの各情報は、ページのヘッダーに置く meta タグの一種として記述する。それぞれのタグには プロパティ名 と、それに対応する値を指定する。代表的なプロパティを以下に挙げる。
主要なOGPプロパティ
- og:title ― カードに表示されるタイトル。ページの内容を端的に表す文言を指定する。ブラウザのタブに出るタイトルとは別に設定できる。
- og:description ― カードの説明文。タイトルだけでは伝わらない補足を、簡潔にまとめる。
- og:image ― カードに表示されるサムネイル画像のURL。推奨サイズは1200×630ピクセル、比率はおよそ1.91対1である。
- og:url ― そのページの正規URL。共有時の基準となるアドレスを示す。
- og:type ― ページの種別。一般的なページなら website、ブログ記事やニュースなら article を指定することが多い。
- twitter:card ― X（旧Twitter）向けのカード形式を指定するプロパティ。大きな画像を伴うカードにしたい場合は summary_large_image を指定する。
XはOGPを基本的に読み取りつつ、独自の twitter 系プロパティも参照する。og 系を一通り設定したうえで、カード形式を指定する twitter:card を併記しておくと表示が安定しやすい。
画像設定のポイント
OGPで最も目立つ要素が画像である。見栄えと表示の安定性のため、次の点を押さえておきたい。
- サイズは1200×630ピクセルを基準にする。この比率なら多くのSNSで画像が切れずに表示される。小さすぎる画像は引き伸ばされて粗くなり、カード化されないこともある。
- 画像URLは絶対URLで指定する。相対パスではSNS側が画像を取得できない場合がある。プロトコルからドメインを含めた完全なアドレスを指定する。
- ファイルサイズは過大にしない。重すぎる画像は取得に失敗したり、表示が遅れたりする要因になる。
- 文字を入れるなら余白を確保する。環境によって画像の端がトリミングされることがあるため、重要な文字は中央寄りに配置し、四辺に余白を持たせる。
うまく表示されないときの確認点
設定したつもりでもカードが出ない、画像が古いまま、といったトラブルは珍しくない。次の順に確認するとよい。
| 症状 | 確認すること |
|---|---|
| 画像や文言が古いまま | SNS側にキャッシュが残っている。各SNSが提供するデバッガで再取得を実行する。 |
| 画像が出ない | 画像URLが絶対URLになっているか、また誰でもアクセスできる公開状態かを確認する。 |
| カード自体が出ない | og:title や og:image などの必須プロパティが揃っているか、URLが正しいかを確認する。 |
SNSは一度取得したOGP情報をキャッシュするため、修正後すぐには反映されないことが多い。各SNSが用意しているデバッガ（検証ツール）から再取得を促すと、新しい情報が読み込まれる。
よくある質問
OGP画像が更新されないのはなぜか
多くの場合、SNS側に以前のOGP情報がキャッシュされていることが原因である。画像のURL自体を変更するか、各SNSのデバッガでキャッシュをクリアして再取得することで反映される。反映までの時間や挙動はSNSごとに異なるため、最終的には実際の共有先で確認するとよい。
画像の推奨サイズはどれくらいか
1200×630ピクセル、比率にしておよそ1.91対1が広く推奨されている。このサイズを基準にしておけば、主要なSNSで大きな画像のカードとして表示されやすい。
設定したのにカードが出ない原因は何か
必須プロパティの記述漏れ、画像URLが相対パスになっている、画像や対象ページが非公開でアクセスできない、といった原因が多い。各SNSのデバッガで実際に何が読み取られているかを確認すると、原因を特定しやすい。
当サイトの「OG Preview」にURLを入力すれば、X・Facebook・LinkedIn・Googleでの表示プレビューを並べて確認でき、OGPタグの検証もまとめて行える。
※ SNSごとの表示仕様やキャッシュの挙動は変更されることがある。最終的な見え方は各SNSのデバッガと実際の共有先で確認すること。