Edit

Page

Page title:

Page body:

[7] [DFN[[[The Open Graph protocol]]]] ([DFN[[[OGP]]]]) は、 [[Facebook]] 社が定義する[[メタデータ]]の
[[HTML文書]]への埋め込みに関する仕様です。 [[Facebook]] の他、いくつかの [[SNS]]
などが一部に対応しています。2011年、2012年頃に流行っていました。

[42] 現在では多くの [[Webサイト]]が [CODE(HTML)@en[[[og:image]]]] など [[OGP]]
の一部をページに指定しています。

;; [43] [[OGP]] にはたくさんの[[特性]]がありますが、広く用いられ、 [[Facebook]]
以外でも実装されているのは一部に限られているようです。

[59] 
俗に、
[CODE[og:image]]
のことや、
[[Facebook]] その他のサイトの [CODE[og:image]] などを使った表示のことを
「[[OGP]]」
という人もいます。

* 仕様書

[REFS[
- [1] [CITE[The Open Graph protocol]]
( ([TIME[2013-11-12 14:44:05 +09:00]] 版))
<http://ogp.me/>
- [27] [CITE@ja[Open Graph Reference Documentation]] ([TIME[2014-04-30 06:47:35 +09:00]] 版) <https://developers.facebook.com/docs/reference/opengraph>
- [31] [CITE@ja[Creating Custom Stories]] ([TIME[2014-04-30 07:56:21 +09:00]] 版) <https://developers.facebook.com/docs/opengraph/creating-custom-stories/>
]REFS]

[29] >>1 が仕様書らしきものですが、2012年11月から更新されていないようです。 >>27 や >>31 には >>1
に含まれていない拡張らしきものも含まれています。
>>18、>>20 に [[RDF Schema]] があり、そこには非推奨となったものも含まれています。
これらのいずれも含まれている内容が違っています。

;; [32] いずれにせよ現代的な精度の仕様書ではなく、リファレンス程度の品質のものです。

[60] 
いつからか
>>2 は >>1 に[[リダイレクト]]されるようになったようです。
>>3 は機能自体が廃止されている旨の説明にかわっています。
[TIME[2019-10-02T00:16:11.400Z]]

[HISTORY[
[46] 関連仕様として [[App Links]] があり、 [[OGP]] と併用されることがありました。
]HISTORY]

* HTML との関係

[44] [[OGP]] は [CODE(HTMLe)@en[[[meta]]]] [[要素]]の [CODE(HTMLa)@en[[[property]]]]
[[属性]]を使っていますが、これは [[HTML Standard]] の一部ではなく、 [[RDFa]] の独自拡張です。

;; [45] [CODE(HTMLe)@en[[[meta]]]] [[要素]]には [CODE(HTMLa)@en[[[name]]]] [[属性]]などの[[属性]]群のいずれかが必要ですが、
[[OGP]] の [CODE(HTMLe)@en[[[meta]]]] [[要素]]の使い方ではその制約に適合できません。

[58] [CODE[og:title]] ([CODE(HTMLe)@en[title][<title>]]) や [CODE[og:description]]
([CODE(HTML)@en[<meta name=description>]]) のように標準の [[HTML]]
の機能と重複している機能もあります。

* RDFa との関係

[11] [[OGP]] は [[RDFa]] を使って [[HTML文書]]に[[メタデータ]]を埋め込む方法と、
その[[メタデータ]]の[[スキーマ]]を定義するものです。

[12] [[RDFa]] の支持者からは [[OGP]] は [[RDFa]] の成功例の筆頭として挙げられていますが、
実際には [[OGP]] は [[RDFa]] (や [[RDF]]) というよりは、独自のデータモデルを [[RDFa]]
風に記述するものと捉えた方がよさそうです。

[13] [CODE[[[og:]]]] などの[[名前空間接頭辞]]は、 [[RDFa 1.0]] 時代は宣言が必須でしたが、
実際には宣言なしで用いられることがありました。これは [[RDFa 1.1]] で追認されているようです。

;; [14] [[RDFa]] 仕様上は任意の[[名前空間接頭辞]]を使えるはずですが、実装によっては
[CODE[[[og:]]]] に固定されています。

[15] [[OGP]] では [CODE[[[og:image]]]] に対する [CODE[[[og:image:width]]]] のように[[特性名]]に
[CODE[[[:]]]] を含めた階層化を採用していますが、 [[RDFデータモデル]]として適当なモデリングが行われていません。
[CODE[[[og:image]]]] で表されている [[URL]] に対して入れ子に [CODE[width]]
を指定するような形がより “[[RDF]] らしい” 記述方法でしょう。 (記述と実装を単純化するために、
敢えて [[RDF]] らしい方法を採らなかったように見えます。)

[16] [[OGP]] には「[[配列]]」が存在します。 >>1 には次のような例が挙げられていて、
[CODE[width]] や [CODE[height]] はその直前の [CODE[[[og:image]]]] に適用されるとなっています。
[[RDF]] や [[RDFa]] としては、そのような解釈はできない (順序が失われる) はずです。

>
[PRE(XML example code)[
<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />
]PRE]

[17] 次のように [CODE@en[[[og:type]]]] には [[CURIE]] が使えるとされています [SRC[>>1]]。
[[RDFa]] は [CODE(HTMLa)@en[[[content]]]] [[属性]]を [[CURIE]] としておらず、ただの文字列として扱っていますから、
[[RDFa]] ベースの実装は [[RDFa]] としての処理をしてからその文字列が出現した[[要素]]を探し、
独自に[[名前空間接頭辞]]の解決をしなければなりません。なお [[OGP]] の [[RDF Schema]] [SRC[>>18]]
上は単なる [CODE[[[ogc:string]]]] とされており、 [[CURIE]] を使えるとはスキーマ上明記されていません。

>
[PRE(XML example code)[
<head prefix="my_namespace: http://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />
]PRE]

[REFS[
- [34] [CITE@ja[Facebook以外のSNSでのOGPに関する話 : 初心者によるブログの勉強のためのブログ]] ([TIME[2014-04-30 08:36:47 +09:00]] 版) <http://blog.livedoor.jp/kamikaze_cyclone/archives/18972340.html>
]REFS]

>GREEのサイトの例では、xmlns:og="http://opengraphprotocol.org/schema/" xmlns:gr="http://gree.jp/ns" の二つの名前空間を用いておりました。xmlns:ogに記載されたURIが他と異なり、サイトによってはxmlns:ogを二つとも書いているところもありました。これは衝突にならないのか? また、URIが異なるのは問題ないのか? といった事が勉強不足で分かりませんでした。

[35] というように、実際上も[[名前空間接頭辞]]は正しく運用されていないようです。

* RDF Schema

[21] >>18, >>20 に公式な [[RDF Schema]] があります。

[REFS[
- [18] [[Turtle]] ([TIME[2012-11-18 05:16:06 +09:00]] 版) <http://ogp.me/ns/ogp.me.ttl>
- [20] [[RDF/XML]] <http://ogp.me/ns/ogp.me.rdf>
]REFS]

[22] >>19 の履歴を見ると一応メンテナンスはされているようですが、 >>1 の仕様書とはいくつか違いがあります。
- [23] 仕様書上の制約がすべて [[RDF Schema]] で記述されているわけではありません。
- [24] [CODE[[[og:type]]]] によっては指定できる子(?)名前空間の語彙 ([CODE[[[music:duration]]]] など)
は含まれていません。
- [25] [CODE[[[og:image:url]]]] (仕様書によると [CODE[[[og:image]]]] と同じ) など別名らしきものが
[[RDF Schema]] には含まれていません。
- [26] 「非推奨」なものが [[RDF Schema]] には含まれています。子(?)名前空間の [CODE[[[music]]]]
と重複するものや、[[住所]]などに関するものが非推奨とされているようです。

* Open Graph との関係

[10] [[Facebook]] は [[OGP]] より後に [[Open Graph]] と呼ばれる一連の機能を実装しています。
[[Open Graph]] 自体はプロトコルや書式ではありませんが、 [[Web API]] などと組み合わせて使う[[文書]]の[[メタデータ]]の記述形式に
[[OGP]] や、 [[OGP]] を一般化したような [[RDFa]] ベースの書式を採用しています。

;; [30] [[URL]] の中に[[名前空間接頭辞]]が登場するなど、不思議な [[Web API]] となっています。

[28] >>27 には、 [CODE[[[og:restrictions]]]] など、 >>1 の [[OGP]] 仕様書(?)に含まれていない拡張も掲載されています。

[33] >>31 には、 [CODE[[[og:ttl]]]] やデータ型の詳細など、 >>1 の [[OGP]] 仕様書(?)に含まれていない拡張や詳細も記述されています。

[53] [[OGP]] 風で独自の接頭辞の[[特性]]が指定されている場合、 [[Facebook]]
[[Open Graph]] 向けの[[応用]]依存の情報かもしれません。
例えば [CODE[[[og:type]]]] が [CODE['''foo:'''hoge]] と指定されている場合、
[CODE['''foo:'''prop1]] や [CODE['''foo:'''prop2]] のような名前の[[特性]]を[[引数]]のような形で
([[Facebookアプリ]]依存で) 指定することができます。

;; [[Open Graph]] も参照。

* Facebook 以外の実装

[50] [[Facebook]] 以外も [[OGP]] の一部を実装しています。そのような実装のほとんどは、
[CODE(HTML)@en[[[og:image]]]] に対応しています。ほとんどは、
それ以外には対応していません。

;; 詳細は各[[特性]]の項を参照。

* Facebook 以外の独自拡張

[REFS[
- [5] [CITE@ja[技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)]]
( ([TIME[2013-11-29 01:57:33 +09:00]] 版))
<http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check/>
- [36] [CITE@ja[Social Feedback - GREE Developer Center]]
( ([TIME[2014-04-30 08:38:16 +09:00]] 版))
<https://docs.developer.gree.net/ja/platform/connect/socialfeedback>
]REFS]

[37] [[mixi]] と [[GREE]] は [[OGP]] 対応を謳っていますが、独自に拡張しています。また対応というのも一部だけのようです。

[38] [CODE@en[[[og:title]]]] があるのに敢えて [CODE[[[mixi:title]]]] を追加したり、
[[ガラケー]]用 [[URL]] の指定が [[mixi]] と [[GREE]] で違っていたり、
標準化しようという意思は感じられません。

* 語彙

[40] >>39 に [[OGP]] の[[語彙]]に含まれる[[特性]]の一覧があります。 >>1、>>27、>>31 の他 >>5、>>36
の拡張も含まれています。

[REFS[
- [39] [CITE[data-web-defs/data/ogp.json at master · manakai/data-web-defs]] ([TIME[2014-04-30 10:00:01 +09:00]] 版) <https://github.com/manakai/data-web-defs/blob/master/data/ogp.json>
]REFS]

[51] 例えば次のような[[特性]]があります。
[FIG(short list)[
- [CODE(HTML)@en[[[og:title]]]]
- [CODE(HTML)@en[[[og:type]]]]
- [CODE(HTML)@en[[[og:image]]]]
- [CODE(HTML)@en[[[og:description]]]]
]FIG]

[52] 何を記述するのが好ましいかは、[[SNS用のWebページデータ]]を参照してください。

* 歴史

[9] [CITE[Open Graph protocol - Facebook開発者]]
([TIME[2010-06-16 11:39:01 +09:00]] 版)
<http://developers.facebook.com/docs/opengraph>

[8] [CITE[The Open Graph Protocol]]
([TIME[2010-06-16 11:41:16 +09:00]] 版)
<http://opengraphprotocol.org/>

[2] [CITE@ja[Platform Updates: New Open Graph Tags for Media Publishers and More- Facebook Developers]]
( ([TIME[2013-12-11 02:52:52 +09:00]] 版))
<https://developers.facebook.com/blog/post/2013/06/19/platform-updates--new-open-graph-tags-for-media-publishers-and-more/>

[3] [CITE@ja[Using Self-Hosted Objects - Facebook開発者]]
( ([TIME[2013-12-11 02:53:22 +09:00]] 版))
<https://developers.facebook.com/docs/opengraph/using-objects/>

[4] [CITE@ja[Creating Object Types - Facebook開発者]]
( ([TIME[2013-12-11 02:53:50 +09:00]] 版))
<https://developers.facebook.com/docs/opengraph/creating-object-types/#properties>

[6] [CITE@en[The Open Graph Protocol Design Decisions]]
( ([TIME[2014-04-30 03:32:28 +09:00]] 版))
<http://ja.scribd.com/doc/30715288/The-Open-Graph-Protocol-Design-Decisions>

[19] [CITE[facebook/open-graph-protocol]]
( ([TIME[2014-04-30 04:03:51 +09:00]] 版))
<https://github.com/facebook/open-graph-protocol>

[41] [CITE[Documentation – App Links - Link to what you want, wherever you are.]]
( ([TIME[2014-05-09 02:07:42 +09:00]] 版))
<http://applinks.org/documentation/>

[47] [CITE[Linked Data and a new Browser API event]]
([TIME[2015-06-05 02:20:04 +09:00]] 版)
<https://lists.mozilla.org/pipermail/dev-platform/2015-June/010223.html>

[48] [CITE@en[1178484 – ''''''[''''''Browser API'''''']'''''' Add support for Open Graph meta tags to metachange event]]
([TIME[2015-08-20 12:50:27 +09:00]] 版)
<https://bugzilla.mozilla.org/show_bug.cgi?id=1178484>

[49] [CITE@ja[「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます - はてなブログ開発ブログ]]
([TIME[2015-10-27 23:06:00 +09:00]] 版)
<http://staff.hatenablog.com/entry/2014/09/05/143600>

[FIG(quote)[
[FIGCAPTION[
[54] ( ([TIME[2016-06-13 18:25:55 +09:00]]))
<http://www.mdn.co.jp/di/>
]FIGCAPTION]

> 
> 		<meta property="og:title" content="デザインとグラフィックの総合情報サイト - MdN Design Interactive - TOP - MdN Design Interactive" />
> 		<meta property="og:type" content="website" />
> 		<meta property="og:description" content="Webデザインとグラフィックの総合情報サイト。プロのWebデザイナーやグラフィックデザイナーはもちろん、プロを目指す方のための情報を毎日更新。" />
> 		<meta property="og:url" content="http://www.mdn.co.jp/di/" />
> 		<meta property="og:image" content="http://www.mdn.co.jp/di/img/common/img_head_logo.png" />		<meta property="og:site_name" content="MdN Design Interactive" />
> 		<meta property="og:locale" content="ja_JP" />
> 		<meta property="fb:admins" content="" />
> 		<meta property="fb:app_id" content="" />

]FIG]

[FIG(quote)[
[FIGCAPTION[
[55] [CITE[【OGP】prefix?xmlns?どっちを入れればいいのか。 - Qiita]]
([TIME[2016-09-02 14:58:31 +09:00]])
<https://qiita.com/rico/items/9bfddcf3200afcde782c>
]FIGCAPTION]

> prefixもxmlnsも入れてくださいという紹介の仕方をされているサイトを最初に見てしまって、混乱してしまいました。それ以降もprefixが書いてあったり、xmlnsが書いてあったり・・・いったいどっちなんだろうと。
> prefix
> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
> xmlns
> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" lang="ja">
>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[56] [CITE@ja[OGPの記述は、結局「xmlns」か「prefix」かどっちなの | Sunday In The Park]]
([TIME[2016-09-02 14:59:47 +09:00]])
<http://snowadays.jp/2013/08/1762>
]FIGCAPTION]

> どうやら「xmlns」の記述はXHTMLで書かれたサイトで利用するもののよう。
> じゃあOGP本家やFacebook推奨の「prefix」の記述は何なのかというと、HTML5で書かれたサイトで利用するのがいいみたいです。
> 実際のところこの辺の記述は実はなくても問題ないようで、metaタグさえ書かれていれば問題ないという意見もありますが、とりあえずHTML5に移行している場合は「prefix」を使い、まだXHTMLで組んでいる場合は「xmlns」を使っておけば、問題ないのかなー、と。

]FIG]

[FIG(quote)[
[FIGCAPTION[
[57] [CITE@en[Slack Robots | Slack]]
( ([[Slack]]著, [TIME[2017-05-24 15:10:35 +09:00]]))
<https://api.slack.com/robots>
]FIGCAPTION]

> Specifically, we are looking for oEmbed and Twitter Card / Open Graph tags.

]FIG]

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)