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 のタイムラインで目を引きやすい。
Web 技術の仕組みを体系的に学びたい方は、Web 技術の入門書籍も参考になります。