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

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

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


目次


公式サイト

 The 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
🎈 GitHub Pages  OGP を追加する | ふうせん🎈 FU-SEN