この記事では、OGP（Open Graph protocol）の設定方法について、TwitterとFacebookの開発者向けドキュメントをもとに解説していきます。
OGPの記述方法
OGPを設定するためには、ウェブページのhead要素内に以下のコードを記述する必要があります。
<meta name="twitter:card" content="◯◯">
<meta property="og:url" content="◯◯">
<meta property="og:title" content="◯◯">
<meta property="og:description" content="◯◯">
<meta property="og:image" content="◯◯">ここからは、上記のコードを一つずつ説明していきます。
twitter:card
Twitterカードのタイプを指定します。カードタイプは、“summary”、“summary_large_image”、“app”、“player”のいずれかです。
ウェブページのURLをシェアしたい場合は、“summary”か“summary_large_image”を指定します。両者の違いは、Twitterでシェアした際の画像の大きさです。
Twitterで画像を大きく表示したい場合は、“summary_large_image”を指定します。
og:url
ページの正規URLの指定します。
og:title
タイトルを指定します。
og:description
概要文を指定します。
og:image
表示する画像のURLを絶対パスで指定します。
OGPで設定する画像
ここからは、og:imageで指定する画像ファイルについて説明していきます。
この画像を何と呼ぶ？
OGPで設定する画像を「OGP画像」もしくは「OG画像」と呼ぶことが多いみたいです。Twitterでアンケートをとってみたところ、以下のような結果になりました。
この記事では「OGP画像」と呼ぶことにします。
OGP画像の仕様
Facebookの開発者向けドキュメントには、次のような記述があります。
高解像度デバイス上での表示が最適な状態になるようにするには、1200×630ピクセル以上の画像を使います。
そのため、OGP画像には1200×630ピクセルの画像を用意すれば問題ないでしょう。
画像のファイル形式は、JEPG、PNG、GIFのいずれかを選択します。ファイルサイズは5MBまで許容されていますが、軽いほうが望ましいと思います。
OGP画像の仕様をまとめると、以下のようになります。
| 仕様 | ||
|---|---|---|
| ファイル形式 | JEPG、PNG、WebP、GIF | JEPG、PNG、GIF |
| アスペクト比 | 2:1 | 1.91:1 |
| 画像サイズ | 最小：300×157ピクセル 最大：4096×4096ピクセル |
最小：600×315ピクセル |
| ファイルサイズ | 5MB以下 | 8MB以下 |
この表の出典元は下記の通りです。
- Twitter開発者向けドキュメント
- Facebook開発者向けドキュメント
OGPの確認方法
Twitterの場合
長年、OGPを確認するために「Card Validator」が用いられてきました。しかし、2022年8月2日に「Card Validator」からプレビュー機能が削除されたことが発表されました。
We’ve recently removed the preview functionality from the Card Validator.
Card Validator – preview removal – Publisher Tools / Cards – Twitter Developers
TwitterでOGPを確認する方法については、以下の記事にまとめています。
Facebookの場合
「シェアデバッガー」を用いて確認することができます。
OGP画像の更新方法
Facebookの開発者向けドキュメントには以下の記述があります。
新しい画像には新しいURLを使います。そうしないなら画像は更新されません
置換前の画像は削除しないでください。置換前の画像を参照する既存のストーリーがあるかもしれないからです
リンクシェアの中の画像指定 – シェア機能
そのため、Facebookでのシェアを想定している場合は、下記の手順でOGP画像を差し替えます。
- 画像に上書きするのではなく、別のファイル名でサーバーにアップロードします。
- og:imageで設定した画像URLを変更します。
こうすることで、OGP画像を差し替えた際に、キャッシュが残るのを防ぐことができます。
