OGP (Open Graph Protocol) とは
概要
OGP (Open Graph Protocol) は、Facebook が策定したメタデータ規格である。Web ページの HTML に og:title、og:description、og:image などのメタタグを埋め込むことで、そのページが SNS でシェアされた際の表示内容を制御できる。現在では X (旧 Twitter)、LINE、Discord など、ほぼすべての主要プラットフォームが OGP に対応している。
主要なプロパティ
OGP の基本プロパティは 4 つある。og:title はページのタイトル、og:description は説明文、og:image はサムネイル画像の URL、og:url はページの正規 URL である。これらを HTML の <head> 内に「<meta property="og:title" content="..." />」の形式で記述する。
加えて、og:type でページの種類 (website、article など) を指定し、og:site_name でサイト名を設定する。X 向けには twitter:card メタタグで表示形式 (summary、summary_large_image) を指定する。
質問箱サービスでの活用
質問箱サービスでは、OGP を 2 つの場面で活用している。第一に、質問箱の公開ページ (/q/{slug}) が SNS でシェアされた際に、質問箱のオーナー名と説明が適切に表示されるよう OGP タグを動的に生成している。
第二に、回答済みの Q&A をシェアする際に、質問と回答をカード形式にまとめた OGP 画像を自動生成している。この画像は Satori と Sharp を使ってサーバーサイドでレンダリングされ、テキストベースの投稿よりも視覚的なインパクトが大きく、SNS のタイムラインで目を引きやすい。