優れたソフトウェアと実用的なチュートリアル
導入
オープングラフプロトコルあらゆるウェブページをソーシャルグラフ内のリッチオブジェクトにします。これは例えばFacebookで使用されており、あらゆるウェブページがFacebook上の他のオブジェクトと同じ機能を持つようになります。
様々な技術やパターンが存在し、それらを組み合わせることも可能ですが、ソーシャルグラフ内のあらゆるウェブページを豊かに表現するのに十分な情報を提供する単一の技術は存在しません。Open Graph Protocolは、これらの既存の技術を基盤として、開発者に一つの目標を提供します。開発者にとってのシンプルさはOpen Graph Protocolの重要な目標であり、多くの利点を提供します。技術設計上の決定情報を提供しました。
基本メタデータ
ウェブページをグラフィックオブジェクトに変換するには、基本的なメタデータ私たちはRDFaこれは、追加のラベル。
各ページに必要な 4 つのプロパティは次のとおりです。
og:タイトル
- オブジェクトのタイトルが図に表示されます (例:「The Rock」)。og:タイプ
-物体タイプ(例:"video.movie")。指定するタイプによっては、追加のプロパティが必要になる場合があります。og:画像
- 図内のオブジェクトを表す画像 URL。og:url
- グラフ内の永続 ID として使用されるオブジェクトの正規 URL (例: "https://www.imdb.com/title/tt0117500/")。
例えば、次のIMDBのザ・ロックOpen Graph プロトコル マークアップ:
<html prefix="og: https://ogp.me/ns#"> <head> <title>ザ・ロック(1996)</title> <meta property="og:title" content="ザ・ロック" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html>
オプションのメタデータ
次のプロパティはどのオブジェクトでもオプションですが、一般的に推奨されます。
og:オーディオ
- このオブジェクトに付随するオーディオ ファイルの URL。og:説明
- オブジェクトに関する 1 ~ 2 文の説明。og:決定子
- 文中で目的語のタイトルの前に来る単語。(a、an、the、""、auto)列挙する。もし自動車
選択:データの利用者は「a」または「an」のいずれかを選択します。デフォルト値は「」(空白)です。og:ロケール
- これらのタグはロケールを表します。フォーマットは次のようになります。言語_地域
デフォルトはja_JP
.og:ロケール:代替
-このページはその他のさまざまなロケール。og:サイト名
- オブジェクトが大規模なウェブサイトの一部である場合は、表示名はサイト全体を表すものにしてください。例:"IMDb"og:ビデオ
- このオブジェクトを補足するビデオ ファイルの URL。
たとえば、次のようになります (改行は表示目的のみです)。
<meta property="og:audio" content="https://example.com/bond/theme.mp3" /> <meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." /> <meta property="og:determiner" content="the" /> <meta property="og:locale" content="en_GB" /> <meta property="og:locale:alternate" content="fr_FR" /> <meta property="og:locale:alternate" content="es_ES" /> <meta property="og:site_name" content="IMDb" /> <meta property="og:video" content="https://example.com/bond/trailer.swf" />
RDFスキーマ(カメで)はogp.me/nsで見つかりました。
構造特性
一部のプロパティには追加のメタデータを付加できます。このメタデータは、財産
その他のメタデータはコンテンツ
、しかし財産
追加の:
。
すべきog:画像
オプション属性がいくつかあります構造化財産:
og:画像:url
- 同じog:画像
。og:image:secure_url
- Web ページで HTTPS が必要な場合は、代替 URL を使用します。og:画像:タイプ
- 画像MIME タイプ。og:画像:幅
- ピクセル単位の幅。og:画像:高さ
- ピクセル数が多い。og:画像:alt
- 画像の内容の説明(タイトルではありません)。ページでog:imageが指定されている場合は、og:画像:alt
。
フル画像の例:
すべきog:ビデオ
タグは同じタグを持っていますog:画像
次に例を示します。
すべきog:オーディオ
タグには最初の 3 つの属性のみ使用できます (サウンドの場合、サイズは意味をなさないため)。
配列
ラベルに複数の値を持たせることができる場合は、同じラベルの複数のバージョンをページ上に配置します。競合が発生した場合は、上から下に向かって最初に使用されるラベルが優先されます。
構造属性は、それが宣言されているルートタグの後に配置されます。別のルート要素が解析されるたびに、構造属性は完了したとみなされ、別のルート要素が始まります。
例えば:
ページに3枚の写真があり、最初の写真は300×300
、真ん中のものはサイズが指定されておらず、最後のものは1000
高さ(ピクセル単位)。
オブジェクトタイプ
オブジェクトを図で表現するには、その型を指定する必要があります。これは、次の方法で行います。og:タイプ
完了したプロパティ:
<meta property="og:type" content="website" />
コミュニティが型スキーマに合意すると、それは型のグローバルリストに追加されます。型システム内の他のすべてのオブジェクトは、以下の形式になります。キュリー
グローバル型は垂直にグループ化されます。各垂直には独自の名前空間があります。名前空間の値はog:タイプ
常に名前空間のプレフィックスとそれに続くピリオドが付きます。これは、常にコロンが含まれるユーザー定義の名前空間型との混乱を避けるためです。
音楽
- 名前空間URI:
https://ogp.me/ns/music#
og:タイプ
値:
音楽:長さ
-整数>=1 - 曲の長さ(秒)。音楽:アルバム
- 音楽アルバム 配列 - この曲が収録されているアルバム。音楽:アルバム:ディスク
-整数>=1 - 曲が収録されているアルバムのディスク。音楽:アルバム:トラック
-整数>=1 - これはどの曲ですか?音楽:ミュージシャン
-個人データ 配列- その曲をプロデュースしたミュージシャン。
音楽:歌
- 音楽.歌 - このアルバムからの曲。音楽:曲:ディスク
-整数>=1 - これと同じ音楽:アルバム:ディスク
しかし、その逆です。音楽:曲:トラック
-整数>=1 - これと同じ音楽:アルバム:トラック
しかし、その逆です。音楽:ミュージシャン
-個人データ- その曲を作曲したミュージシャン。音楽:リリース日
-日時- アルバムがリリースされた日。
音楽:歌
- 音楽アルバム付き同じ音楽:曲:ディスク
音楽:曲:トラック
音楽:クリエイター
-個人データ- このプレイリストの作成者。
音楽:クリエイター
-個人データ- サイトの作成者。
ビデオ
- 名前空間URI:
https://ogp.me/ns/video#
og:タイプ
値:
ビデオ:俳優
-個人データ 配列- 映画に出演する俳優たち。ビデオ:俳優:役割
-弦- 彼らが演じる役割。ビデオ:ディレクター
-個人データ 配列- 映画監督。ビデオ:ライター
-個人データ 配列- 映画の脚本家。ビデオ:再生時間
-整数>=1 - ムービーの長さ(秒単位)。ビデオ:リリース日
-日時- 映画が公開された日。ビデオ:タグ
-弦 配列- 映画に関連したタグ。
ビデオ:俳優
- ビデオ・映画付き同じビデオ:俳優:役割
ビデオ:ディレクター
ビデオ:ライター
ビデオ:再生時間
ビデオ:リリース日
ビデオ:タグ
ビデオ:シリーズ
- ビデオ.テレビ番組 - このエピソードがどのシリーズに属するか。
複数のテレビ番組。メタデータとビデオ.映画同じ。
他のカテゴリに属さない動画。メタデータとビデオ.映画同じ。
垂直なし
これらはグローバルに定義されたオブジェクトであり、垂直方向には適合しませんが、広く使用され、合意されています。
og:タイプ
値:
記事
- 名前空間URI:https://ogp.me/ns/article#
記事:公開日時
-日時- 記事が最初に公開されたとき。記事:更新日時
-日時- 記事が最後に変更された日時。記事:有効期限
-日時- 記事の有効期限が切れたとき。記事:著者
-個人データ 配列- 記事の著者。記事:セクション
-弦- 上位レベルのセクション名。例:テクノロジー記事:タグ
-弦 配列- この記事に関連する単語をタグ付けします。
本
- 名前空間URI:https://ogp.me/ns/book#
プロフィール
- 名前空間URI:https://ogp.me/ns/profile#
プロフィール:名
-弦- 通常は両親から個人に付けられた名前、または個人が選んだ名前。プロフィール:姓
-弦- 家族や結婚により受け継がれた、個人がよく知られている名前。プロフィール:ユーザー名
-弦- 識別するために使用される短い一意の文字列。プロフィール:性別
-列挙する(男性、女性) - 性別。
Webサイト
- 名前空間URI:https://ogp.me/ns/website#
基本的な属性以外の帰属表示は禁止されています。帰属表示がされていないウェブページは、og:タイプ
Webサイト。
タイプ
Open Graph プロトコルでプロパティを定義するときには、次のタイプが使用されます。
タイプ | 説明する | 言葉 |
---|---|---|
ブール値 | ブール値は真または偽の値を表します | 真、偽、1、0 |
日付 | DateTime は、日付 (年、月、日) とオプションの時間コンポーネント (時、分) で構成される時間値を表します。 | ISO 8601 |
列挙する | 制限された定数文字列値 (列挙メンバー) のセットで構成される型。 | 列挙メンバーとしての文字列値 |
フロート | 64ビット符号付き浮動小数点数 | 次の形式に一致するすべてのテキスト: 1.234 |
整数 | 32ビット符号付き整数。多くの言語では、32ビットを超える整数は浮動小数点数になるため、多言語での使用を容易にするためにOpen Graphプロトコルを制限しています。 | 次の形式に一致するすべてのテキスト: 1234 |
弦 | Unicode文字シーケンス | エスケープ文字のないすべての Unicode 文字 |
Webサイト | インターネット リソースを識別する Unicode 文字のシーケンス。 | https:// または https:// プロトコルを使用するすべての有効な URL |
ディスカッションとサポート
詳細はFacebookグループをご覧くださいまたは 開発者メーリングリストオープングラフプロトコルについては で議論されています。現在Facebook(ドキュメントを参照)、グーグル(ドキュメントを参照)そして ミクシィ中古品。IMDb、Microsoft、NHL、Posterous、Rotten Tomatoes、TIME、Yelpなど、多くのサイトに掲載されています。
実装
オープンソースコミュニティによって開発されたパーサーやパブリッシングツールは数多くあります。何か素晴らしいものを開発したら、Facebookグループでぜひお知らせください!
- Facebook オブジェクトデバッガー - Facebookの公式パーサーとデバッガー
- Google リッチスニペット テストツール- 特定の業種および検索エンジンでの Open Graph プロトコルのサポート。
- PHP バリデーターとトークナイザー- OGP 2011 PHP5オブジェクトの入力バリデータとトークナイザー
- PHPコンシューマー - PHPでOpen Graph Protocolデータにアクセスするための小さなライブラリ
- PHP の OpenGraphNode - PHP用のシンプルなパーサー
- PyOpenGraph - ウェブサイトからOpen Graphプロトコル情報を解析するためのPythonで書かれたライブラリ
- オープングラフ ルビー - Webページを解析し、Open Graphプロトコルタグを抽出するRuby Gem
- Java用OpenGraph - Open Graphプロトコルを表現するための小さなJavaクラス
- RDF::RDFa::パーサー - Open Graphプロトコルを理解するPerl RDFaパーサー
- WordPressプラグイン- WordPress で動くサイトに Open Graph メタデータを追加する Facebook の公式 WordPress プラグイン。
- 代替WordPress OGPプラグイン- WordPress で動く Web サイトに Open Graph メタデータを追加するシンプルで軽量な WordPress プラグイン。