[7] The Open Graph protocol OGP Facebook 社が定義するメタデータ の
HTML文書 への埋め込みに関する仕様です。 Facebook の他、いくつかの SNS
などが一部に対応しています。2011年、2012年頃に流行っていました。
[42] 現在では多くの Webサイト が og:image OGP
の一部をページに指定しています。
[43] OGP にはたくさんの特性 がありますが、広く用いられ、 Facebook
以外でも実装されているのは一部に限られているようです。[59]
俗に、
og:image
のことや、
Facebook その他のサイトの og:image などを使った表示のことを
「OGP 」
という人もいます。
仕様書 [1] The Open Graph protocol
( (2013-11-12 14:44:05 +09:00 版))
http://ogp.me/ [27] Open Graph Reference Documentation (2014-04-30 06:47:35 +09:00 版) https://developers.facebook.com/docs/reference/opengraph [31] Creating Custom Stories (2014-04-30 07:56:21 +09:00 版) https://developers.facebook.com/docs/opengraph/creating-custom-stories/ [29] >>1 が仕様書らしきものですが、2012年11月から更新されていないようです。 >>27 や >>31 には >>1
に含まれていない拡張らしきものも含まれています。
>>18 、>>20 に RDF Schema があり、そこには非推奨となったものも含まれています。
これらのいずれも含まれている内容が違っています。
[32] いずれにせよ現代的な精度の仕様書ではなく、リファレンス程度の品質のものです。[60]
いつからか
>>2 は >>1 にリダイレクト されるようになったようです。
>>3 は機能自体が廃止されている旨の説明にかわっています。
2019-10-02T00:16:11.400Z
[46] 関連仕様として App Links があり、 OGP と併用されることがありました。
HTML との関係 [44] OGP は meta 要素 の property 属性 を使っていますが、これは HTML Standard の一部ではなく、 RDFa の独自拡張です。
[45] meta 要素 には name 属性 などの属性 群のいずれかが必要ですが、
OGP の meta 要素 の使い方ではその制約に適合できません。[58] og:title (title<title> ) や og:description
(<meta name=description>) のように標準の HTML
の機能と重複している機能もあります。
RDFa との関係 [11] OGP は RDFa を使って HTML文書 にメタデータ を埋め込む方法と、
そのメタデータ のスキーマ を定義するものです。
[12] RDFa の支持者からは OGP は RDFa の成功例の筆頭として挙げられていますが、
実際には OGP は RDFa (や RDF ) というよりは、独自のデータモデルを RDFa
風に記述するものと捉えた方がよさそうです。
[13] og: 名前空間接頭辞 は、 RDFa 1.0 時代は宣言が必須でしたが、
実際には宣言なしで用いられることがありました。これは RDFa 1.1 で追認されているようです。
[14] RDFa 仕様上は任意の名前空間接頭辞 を使えるはずですが、実装によっては
og: [15] OGP では og:image og:image:width 特性名 に
: RDFデータモデル として適当なモデリングが行われていません。
og:image URL に対して入れ子に width
を指定するような形がより “RDF らしい” 記述方法でしょう。 (記述と実装を単純化するために、
敢えて RDF らしい方法を採らなかったように見えます。)
[16] OGP には「配列 」が存在します。 >>1 には次のような例が挙げられていて、
width や height はその直前の og:image RDF や RDFa としては、そのような解釈はできない (順序が失われる) はずです。
<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" /> [17] 次のように og:type CURIE が使えるとされています >>1 RDFa は content 属性 を CURIE としておらず、ただの文字列として扱っていますから、
RDFa ベースの実装は RDFa としての処理をしてからその文字列が出現した要素 を探し、
独自に名前空間接頭辞 の解決をしなければなりません。なお OGP の RDF Schema >>18 ogc:string CURIE を使えるとはスキーマ上明記されていません。
<head prefix="my_namespace: http://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" /> [34] Facebook以外のSNSでのOGPに関する話 : 初心者によるブログの勉強のためのブログ (2014-04-30 08:36:47 +09:00 版) http://blog.livedoor.jp/kamikaze_cyclone/archives/18972340.html 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 があります。
[18] Turtle (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 [22] >>19 の履歴を見ると一応メンテナンスはされているようですが、 >>1 の仕様書とはいくつか違いがあります。
[23] 仕様書上の制約がすべて RDF Schema で記述されているわけではありません。[24] og:type music:duration [25] og:image:url og:image RDF Schema には含まれていません。[26] 「非推奨」なものが RDF Schema には含まれています。子(?)名前空間の music 住所 などに関するものが非推奨とされているようです。Open Graph との関係 [10] Facebook は OGP より後に Open Graph と呼ばれる一連の機能を実装しています。
Open Graph 自体はプロトコルや書式ではありませんが、 Web API などと組み合わせて使う文書 のメタデータ の記述形式に
OGP や、 OGP を一般化したような RDFa ベースの書式を採用しています。
[30] URL の中に名前空間接頭辞 が登場するなど、不思議な Web API となっています。[28] >>27 には、 og:restrictions >>1 の OGP 仕様書(?)に含まれていない拡張も掲載されています。
[33] >>31 には、 og:ttl >>1 の OGP 仕様書(?)に含まれていない拡張や詳細も記述されています。
[53] OGP 風で独自の接頭辞の特性 が指定されている場合、 Facebook
Open Graph 向けの応用 依存の情報かもしれません。
例えば og:type foo: hogefoo: prop1foo: prop2特性 を引数 のような形で
(Facebookアプリ 依存で) 指定することができます。
Open Graph も参照。Facebook 以外の実装 [50] Facebook 以外も OGP の一部を実装しています。そのような実装のほとんどは、
og:image
詳細は各特性 の項を参照。 Facebook 以外の独自拡張 [5] 技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)
( (2013-11-29 01:57:33 +09:00 版))
http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check/ [36] Social Feedback - GREE Developer Center
( (2014-04-30 08:38:16 +09:00 版))
https://docs.developer.gree.net/ja/platform/connect/socialfeedback [37] mixi と GREE は OGP 対応を謳っていますが、独自に拡張しています。また対応というのも一部だけのようです。
[38] og:title mixi:title ガラケー 用 URL の指定が mixi と GREE で違っていたり、
標準化しようという意思は感じられません。
語彙 [40] >>39 に OGP の語彙 に含まれる特性 の一覧があります。 >>1 、>>27 、>>31 の他 >>5 、>>36
の拡張も含まれています。
[39] data-web-defs/data/ogp.json at master · manakai/data-web-defs (2014-04-30 10:00:01 +09:00 版) https://github.com/manakai/data-web-defs/blob/master/data/ogp.json [51] 例えば次のような特性 があります。og:title og:type og:image og:description
[52] 何を記述するのが好ましいかは、SNS用のWebページデータ を参照してください。
歴史 [9] Open Graph protocol - Facebook開発者
(2010-06-16 11:39:01 +09:00 版)
http://developers.facebook.com/docs/opengraph
[8] The Open Graph Protocol
(2010-06-16 11:41:16 +09:00 版)
http://opengraphprotocol.org/
[2] Platform Updates: New Open Graph Tags for Media Publishers and More- Facebook Developers
( (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] Using Self-Hosted Objects - Facebook開発者
( (2013-12-11 02:53:22 +09:00 版))
https://developers.facebook.com/docs/opengraph/using-objects/
[4] Creating Object Types - Facebook開発者
( (2013-12-11 02:53:50 +09:00 版))
https://developers.facebook.com/docs/opengraph/creating-object-types/#properties
[6] The Open Graph Protocol Design Decisions
( (2014-04-30 03:32:28 +09:00 版))
http://ja.scribd.com/doc/30715288/The-Open-Graph-Protocol-Design-Decisions
[19] facebook/open-graph-protocol
( (2014-04-30 04:03:51 +09:00 版))
https://github.com/facebook/open-graph-protocol
[41] Documentation – App Links - Link to what you want, wherever you are.
( (2014-05-09 02:07:42 +09:00 版))
http://applinks.org/documentation/
[47] Linked Data and a new Browser API event
(2015-06-05 02:20:04 +09:00 版)
https://lists.mozilla.org/pipermail/dev-platform/2015-June/010223.html
[48] 1178484 –
(2015-08-20 12:50:27 +09:00 版)
https://bugzilla.mozilla.org/show_bug.cgi?id=1178484
[49] 「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます - はてなブログ開発ブログ
(2015-10-27 23:06:00 +09:00 版)
http://staff.hatenablog.com/entry/2014/09/05/143600
[54] ( (2016-06-13 18:25:55 +09:00 ))
http://www.mdn.co.jp/di/ <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="" />
[55] 【OGP】prefix?xmlns?どっちを入れればいいのか。 - Qiita
(2016-09-02 14:58:31 +09:00 )
https://qiita.com/rico/items/9bfddcf3200afcde782c 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">
[56] OGPの記述は、結局「xmlns」か「prefix」かどっちなの | Sunday In The Park
(2016-09-02 14:59:47 +09:00 )
http://snowadays.jp/2013/08/1762 どうやら「xmlns」の記述はXHTMLで書かれたサイトで利用するもののよう。
じゃあOGP本家やFacebook推奨の「prefix」の記述は何なのかというと、HTML5で書かれたサイトで利用するのがいいみたいです。
実際のところこの辺の記述は実はなくても問題ないようで、metaタグさえ書かれていれば問題ないという意見もありますが、とりあえずHTML5に移行している場合は「prefix」を使い、まだXHTMLで組んでいる場合は「xmlns」を使っておけば、問題ないのかなー、と。
[57] Slack Robots | Slack
( (Slack 著, 2017-05-24 15:10:35 +09:00 ))
https://api.slack.com/robots Specifically, we are looking for oEmbed and Twitter Card / Open Graph tags.