OGP

OGP

[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. 仕様書
  2. HTML との関係
  3. RDFa との関係
  4. RDF Schema
  5. Open Graph との関係
  6. Facebook 以外の実装
  7. Facebook 以外の独自拡張
  8. 語彙
  9. 歴史

仕様書#

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

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

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

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

HTML との関係#

[44] OGPmeta 要素property 属性を使っていますが、これは HTML Standard の一部ではなく、 RDFa の独自拡張です。

[45] meta 要素には name 属性などの属性群のいずれかが必要ですが、 OGPmeta 要素の使い方ではその制約に適合できません。

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

RDFa との関係#

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

[12] RDFa の支持者からは OGPRDFa の成功例の筆頭として挙げられていますが、 実際には OGPRDFa (や 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 には次のような例が挙げられていて、 widthheight はその直前の og:image に適用されるとなっています。 RDFRDFa としては、そのような解釈はできない (順序が失われる) はずです。

<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 が使えるとされています >>1RDFacontent 属性CURIE としておらず、ただの文字列として扱っていますから、 RDFa ベースの実装は RDFa としての処理をしてからその文字列が出現した要素を探し、 独自に名前空間接頭辞の解決をしなければなりません。なお OGPRDF 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が異なるのは問題ないのか? といった事が勉強不足で分かりませんでした。

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

RDF Schema#

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

[22] >>19 の履歴を見ると一応メンテナンスはされているようですが、 >>1 の仕様書とはいくつか違いがあります。

Open Graph との関係#

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

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

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

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

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

Open Graph も参照。

Facebook 以外の実装#

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

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

Facebook 以外の独自拡張#

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

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

語彙#

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

[51] 例えば次のような特性があります。

[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

[54] ( ()) 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 () 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 () http://snowadays.jp/2013/08/1762

どうやら「xmlns」の記述はXHTMLで書かれたサイトで利用するもののよう。

じゃあOGP本家やFacebook推奨の「prefix」の記述は何なのかというと、HTML5で書かれたサイトで利用するのがいいみたいです。

実際のところこの辺の記述は実はなくても問題ないようで、metaタグさえ書かれていれば問題ないという意見もありますが、とりあえずHTML5に移行している場合は「prefix」を使い、まだXHTMLで組んでいる場合は「xmlns」を使っておけば、問題ないのかなー、と。

[57] Slack Robots | Slack ( (Slack著, )) https://api.slack.com/robots

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