Open Graph protocol (OGP) についてまとめています。Twitter Card を含めています。

日本では OGP と省略されている事が多いのですが、
英語圏で見ている限りはそのような省略表記はほとんど使われず、
Open Graph で表記されている事が多いです。
正しい情報を得ようと OGP で検索すると日本語情報しか出てこないのでご注意下さい。

Twitter Card は Open Graph protocol を継承しているため、
このページで含めてあります。

property	content
og:audio	音声ファイル URL
og:description	説明
og:determiner	タイトル前に付加する単語。日本語サイトでは不要でしょう
og:image	画像ファイル URL
og:locale	ロケール（言語と地域）。日本語は `ja_JP`
og:site_name	サイト名
og:title	タイトル
og:type	種類。後記する特有のプロパティがなければ `website`
og:url	URL。通常はこのページの URL そのものです
og:video	動画ファイル URL

例えば項目毎に次のような表記となります。

<meta property="og:audio" content="https://example.net.eu.org/balloon/about.mp3" />
<meta property="og:description" content="Open Graph protocol (OGP) について。" />
<meta property="og:determiner" content="the" />
<meta property="og:image" content="https://example.net.eu.org/balloon/balloon.jpg" />
<meta property="og:image" content="https://example.net.eu.org/balloon/balloon2.jpg" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="en_UK" />
<meta property="og:site_name" content="Open Graph の使い方" />
<meta property="og:title" content="説明ページ" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.net.eu.org/balloon/index.html" />
<meta property="og:video" content="https://example.net.eu.org/balloon/about.m4u" />

og:image og:title og:type og:url は基本的なメタデータとして
公式ページには記載されているのですが、
実際には og:image や og:type を省略している Web サービスが見られ、
Facebook などでこれらも正常に処理されています。

og:image

og:image プロパティには更に次が存在します。

property	content
og:image:url	画像ファイル URL。`og:image` に同じ
og:image:secure_url	HTTPS を要する場合の代用 URL
og:image:type	MIME-Type。`image/jpeg` など
og:image:width	横幅。ピクセル
og:image:height	縦幅。ピクセル
og:image:alt	説明

og:video

og:video 関連は og:image に同じ追加のプロパティがあります。

property	content
og:video:url	動画ファイル URL。`og:video` に同じ
og:video:secure_url	HTTPS を要する場合の代用 URL
og:video:type	MIME-Type
og:video:width	横幅。ピクセル
og:video:height	縦幅。ピクセル
og:video:alt	説明

og:audio

og:audio は次の追加プロパティがあります。

property	content
og:audio:url	音声ファイル URL。`og:audio` に同じ
og:audio:secure_url	HTTPS を要する場合の代用 URL
og:audio:type	MIME-Type

og:locate

og:locate は次の追加プロパティがあります。

property	content
og:locale:alternate	他に対応しているロケール

複数指定

og:image などは複数指定しても構いません。
この場合同じ property を持つ <meta> タグを連続して記載できます。
上に記載されたコンテンツが優先されます。

<meta property="og:image" content="https://example.net.eu.org/balloon1.jpg" />
<meta property="og:image" content="https://example.net.eu.org/balloon2.jpg" />

下層のプロパティはその前に宣言されている上層プロパティに有効です。

<meta property="og:image" content="https://example.net.eu.org/balloon1.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.net.eu.org/balloon2.jpg" />
<meta property="og:image" content="https://example.net.eu.org/balloon3.jpg" />
<meta property="og:image:height" content="1000" />```

上の記載は、次のように解釈されます。

<meta property="og:image" content="https://example.net.eu.org/balloon1.jpg" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />

<meta property="og:image" content="https://example.net.eu.org/balloon2.jpg" />

<meta property="og:image" content="https://example.net.eu.org/balloon3.jpg" />
<meta property="og:image:height" content="720" />```

従って画像と横幅・縦幅の関係は次になります。

画像ファイル名	横幅	縦幅
balloon1.jpg	1280	640
balloon2.jpg	なし	なし
balloon3.jpg	なし	720

ただし、Facebook は現在先頭にある og:image を表示する仕様なので、
ほとんどのサイト・ブログでは画像を一つだけにしているケースが多いようです。

og:type

og:type のプロパティにより、更に追加の項目を使用できます。

日時の表記は ISO 8601 で、日本標準時だと末尾に +09:00 を付加して
2021-03-20T13:54:34+09:00 と記載します。

トップページを website、トップページ以外を article と
決め打ちして記載しているところが見られますが、
現在の仕様では使用する追加プロパティに応じて
適切な og:type の content の値を付ける仕様になっています。
追加プロパティが不要であれば全ページ website でも問題ありませんし、
トップページで日時を含めるために article を指定しても構いません。

また og:type に blog を指定する説明が存在しています。
Open Graph protocol の古いバージョンで blog の定義と追加プロパティがありましたが、
現在は公式ページで記載がなく、英語圏でもほとんど触れられていません。
現在は blog は設定せず、最新仕様に合わせて適切な値を設定して下さい。

article

ブログの記事ページが想定されています。

property	content
article:published_time	公開日時
article:modified_time	変更日時
article:expiration_time	期限日時
article:author	執筆者
article:section	セクション（カテゴリ）
article:tag	タグ（キーワード）

book

property	content
book:author	随筆者
book:isbn	ISBN 番号
book:release_date	発売日・公開日
book:tag	タグ（キーワード）

music.song

property	content
music:duration	曲の長さ。秒
music:album	その曲が入っているアルバム。 music.album 参照
music:album:disc	ディスク番号
music:album:track	トラック番号
music:musician	作曲者・作詞者

music.album

property	content
music:song	このアルバムに入っている曲。 music.song 参照
music:song:disc	ディスク番号
music:song:track	トラック番号
music:musician	作曲者・作詞者
music:release_date	発売・公開日

music.playlist

property	content
music:song	含まれている曲。 music.song 参照
music:song:disc	ディスク番号
music:song:track	トラック番号
music:creator	作曲者・作詞者

music.radio_station

property	content
music:creator	作成者

profile

property	content
profile:first_name	日本では「名」。ファーストネーム
profile:last_name	日本では「姓」。ラストネーム
profile:username	ユーザー名
profile:gender	性別

video.movie / video.tv_show / video.other

3 つが同じ追加のプロパティを持っています。

property	content
video:actor	俳優
video:actor:role	俳優の役割
video:director	監督
video:writer	作家
video:duration	動画の長さ。秒
video:release_date	公開日
video:tag	タグ（キーワード）

video.episode

上の項目に加えて、次のプロパティを持っています。

property	content
video:series	シリーズ

website

追加プロパティなし。上記プロパティに属さない場合は website とします。

Twitter Card

現在ふうせん🎈 FU-SEN は Twitter を一切使用していません。
そのため、ここでは最小限で触れておきます。

ツイートをカードで最適化する | Twitter Developer

Twitter では Twitter Card が存在します。別途 meta タグが定義されています。
基本的には Open Graph protocol と一緒に指定する事が多いです。

name	content
twitter:card	カードタイプ。`summary` `summary_large_image` `app` `player`
twitter:site	フッタに表示する `@ユーザー`
twitter:creator	製作者 `@ユーザー`

その他 Open Graph protocol を継承し、
og:～ を twitter:～ に置き換えたプロパティを使用できますが、
実際に設定されているのは次の項目だけです。

name	content
twitter:description	説明
twitter:image	画像ファイル URL
twitter:title	タイトル
twitter:url	URL。通常はこのページの URL そのものです

Twitter Card 関連は Open Graph protocol と同じ項目に加えて
twitter:card で summary_large_image を指定する事が多いでしょう。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="説明ページ">
<meta name="twitter:description" content="Open Graph protocol (OGP) について。">
<meta name="twitter:image" content="https://example.net.eu.org/balloon/balloon.jpg">
<meta name="twitter:url" content="https://example.net.eu.org/balloon/index.html" />

Twitter Card の <meta> タグでは property ではなく name を使用します。

静的サイトジェネレータ

静的サイトジェネレータで考慮されている場合があります。

Hugo

Hugo
🎈 Hugo | ふうせん🎈 FU-SEN

Hugo で Open Graph protocol および Twitter Card の
テンプレートが備わっています。
しかし、テーマによって採用状況が異なっていて、
独自実装しているテーマも見られます。

🎈 Hugo OGP を加えたいのですが？ | ふうせん🎈 FU-SEN

Jekyll

GitHub Pages で採用されている静的サイトジェネレータなので、
GitHub Pages で使用できます。

GitHub Pages
🎈 GitHub Pages | ふうせん🎈 FU-SEN

Jekyll SEO Tag が対応しています。これに対応しているテーマがあります。

jekyll/jekyll-seo-tag | GitHub

Open Graph protocol

目次

公式サイト

プロパティ