[7] The Open Graph protocol (OGP) は、 Facebook 社が定義するメタデータの HTML文書への埋め込みに関する仕様です。 Facebook の他、いくつかの SNS などが一部に対応しています。2011年、2012年頃に流行っていました。
[42] 現在では多くの Webサイトが og:image など OGP
の一部をページに指定しています。
[59]
俗に、
og:image
のことや、
Facebook その他のサイトの og:image などを使った表示のことを
「OGP」
という人もいます。
[29] >>1 が仕様書らしきものですが、2012年11月から更新されていないようです。 >>27 や >>31 には >>1 に含まれていない拡張らしきものも含まれています。 >>18、>>20 に RDF Schema があり、そこには非推奨となったものも含まれています。 これらのいずれも含まれている内容が違っています。
[60] いつからか >>2 は >>1 にリダイレクトされるようになったようです。 >>3 は機能自体が廃止されている旨の説明にかわっています。
[44] OGP は meta 要素の property
属性を使っていますが、これは HTML Standard の一部ではなく、 RDFa の独自拡張です。
[58] og:title (title) や og:description
(<meta name=description>) のように標準の HTML
の機能と重複している機能もあります。
[11] OGP は RDFa を使って HTML文書にメタデータを埋め込む方法と、 そのメタデータのスキーマを定義するものです。
[12] RDFa の支持者からは OGP は RDFa の成功例の筆頭として挙げられていますが、 実際には OGP は RDFa (や RDF) というよりは、独自のデータモデルを RDFa 風に記述するものと捉えた方がよさそうです。
[13] og: などの名前空間接頭辞は、 RDFa 1.0 時代は宣言が必須でしたが、
実際には宣言なしで用いられることがありました。これは RDFa 1.1 で追認されているようです。
[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" />
GREEのサイトの例では、xmlns:og="http://opengraphprotocol.org/schema/" xmlns:gr="http://gree.jp/ns" の二つの名前空間を用いておりました。xmlns:ogに記載されたURIが他と異なり、サイトによってはxmlns:ogを二つとも書いているところもありました。これは衝突にならないのか? また、URIが異なるのは問題ないのか? といった事が勉強不足で分かりませんでした。
[21] >>18, >>20 に公式な RDF Schema があります。
[22] >>19 の履歴を見ると一応メンテナンスはされているようですが、 >>1 の仕様書とはいくつか違いがあります。
og:type によっては指定できる子(?)名前空間の語彙 (music:duration など)
は含まれていません。og:image:url (仕様書によると og:image と同じ) など別名らしきものが
RDF Schema には含まれていません。music
と重複するものや、住所などに関するものが非推奨とされているようです。[10] Facebook は OGP より後に Open Graph と呼ばれる一連の機能を実装しています。 Open Graph 自体はプロトコルや書式ではありませんが、 Web API などと組み合わせて使う文書のメタデータの記述形式に OGP や、 OGP を一般化したような RDFa ベースの書式を採用しています。
[28] >>27 には、 og:restrictions など、 >>1 の OGP 仕様書(?)に含まれていない拡張も掲載されています。
[33] >>31 には、 og:ttl やデータ型の詳細など、 >>1 の OGP 仕様書(?)に含まれていない拡張や詳細も記述されています。
[53] OGP 風で独自の接頭辞の特性が指定されている場合、 Facebook
Open Graph 向けの応用依存の情報かもしれません。
例えば og:type が foo:hoge と指定されている場合、
foo:prop1 や foo:prop2 のような名前の特性を引数のような形で
(Facebookアプリ依存で) 指定することができます。
[50] Facebook 以外も OGP の一部を実装しています。そのような実装のほとんどは、
og:image に対応しています。ほとんどは、
それ以外には対応していません。
[37] mixi と GREE は OGP 対応を謳っていますが、独自に拡張しています。また対応というのも一部だけのようです。
[38] og:title があるのに敢えて mixi:title を追加したり、
ガラケー用 URL の指定が mixi と GREE で違っていたり、
標準化しようという意思は感じられません。
[40] >>39 に OGP の語彙に含まれる特性の一覧があります。 >>1、>>27、>>31 の他 >>5、>>36 の拡張も含まれています。
[52] 何を記述するのが好ましいかは、SNS用のWebページデータを参照してください。
[9] Open Graph protocol - Facebook開発者 ( 版) http://developers.facebook.com/docs/opengraph
[8] The Open Graph Protocol ( 版) http://opengraphprotocol.org/
[2] Platform Updates: New Open Graph Tags for Media Publishers and More- Facebook Developers ( ( 版)) 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開発者 ( ( 版)) https://developers.facebook.com/docs/opengraph/using-objects/
[4] Creating Object Types - Facebook開発者 ( ( 版)) https://developers.facebook.com/docs/opengraph/creating-object-types/#properties
[6] The Open Graph Protocol Design Decisions ( ( 版)) http://ja.scribd.com/doc/30715288/The-Open-Graph-Protocol-Design-Decisions
[19] facebook/open-graph-protocol ( ( 版)) https://github.com/facebook/open-graph-protocol
[41] Documentation – App Links - Link to what you want, wherever you are. ( ( 版)) http://applinks.org/documentation/
[47] Linked Data and a new Browser API event ( 版) https://lists.mozilla.org/pipermail/dev-platform/2015-June/010223.html
[48] 1178484 – [Browser API] Add support for Open Graph meta tags to metachange event ( 版) https://bugzilla.mozilla.org/show_bug.cgi?id=1178484
[49] 「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます - はてなブログ開発ブログ ( 版) http://staff.hatenablog.com/entry/2014/09/05/143600
<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="" />
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">
どうやら「xmlns」の記述はXHTMLで書かれたサイトで利用するもののよう。
じゃあOGP本家やFacebook推奨の「prefix」の記述は何なのかというと、HTML5で書かれたサイトで利用するのがいいみたいです。
実際のところこの辺の記述は実はなくても問題ないようで、metaタグさえ書かれていれば問題ないという意見もありますが、とりあえずHTML5に移行している場合は「prefix」を使い、まだXHTMLで組んでいる場合は「xmlns」を使っておけば、問題ないのかなー、と。
Specifically, we are looking for oEmbed and Twitter Card / Open Graph tags.