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

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

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


目次


公式サイト

 The Open Graph protocol


プロパティ

次のプロパティを指定できます。

propertycontent
og:audio音声ファイル URL
og:description説明
og:determinerタイトル前に付加する単語。日本語サイトでは不要でしょう
og:image画像ファイル URL
og:localeロケール(言語と地域)。日本語は ja_JP
og:site_nameサイト名
og:titleタイトル
og:type種類。後記する特有のプロパティがなければ website
og:urlURL。通常はこのページの 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:imageog:type を省略している Web サービスが見られ、
Facebook などでこれらも正常に処理されています。

og:image

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

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

og:video

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

propertycontent
og:video:url動画ファイル URL。og:video に同じ
og:video:secure_urlHTTPS を要する場合の代用 URL
og:video:typeMIME-Type
og:video:width横幅。ピクセル
og:video:height縦幅。ピクセル
og:video:alt説明

og:audio

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

propertycontent
og:audio:url音声ファイル URL。og:audio に同じ
og:audio:secure_urlHTTPS を要する場合の代用 URL
og:audio:typeMIME-Type

og:locate

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

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

article

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

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

book

propertycontent
book:author随筆者
book:isbnISBN 番号
book:release_date発売日・公開日
book:tagタグ(キーワード)

music.song

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

music.album

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

music.playlist

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

music.radio_station

propertycontent
music:creator作成者

profile

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

video.movie / video.tv_show / video.other

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

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

video.episode

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

propertycontent
video:seriesシリーズ

website

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


Twitter Card

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

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

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

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

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

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

Twitter Card 関連は Open Graph protocol と同じ項目に加えて
twitter:cardsummary_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