• twitter
  • Facebook
  • はてなブックマーク
2012年05月26日(土)

[HTML5] OpenGraphProtocolに関するメモ

OpenGraphProtocolは、facebookがソーシャルグラフ分布図の中で利用するために、各ホームページの機能を明確にするための技術だそうです。metaタグでfacebook専用の値を設定して、ページの詳細データをソーシャルグラフで使えるように伝えて下さいというような主旨だと思います。

[公式サイト] The Open Graph protocol

必要最低限の定義から、movieやカテゴリー分類するような詳細設定の方法もあるようですが、結構ややこしいのでとりあえず最小限の設定だけメモしておきます。(投稿してもらった際にウォールに掲載される情報だけ)ちなみに、Google+でリンク投稿する際にも、OpenGraphicProtocolを解析して反映してくれるようです。Google+専用の定義には、ネームスペースに「itemprop」というものを追加して、metaタグにitemprop属性の含まれるタグを記述します。

HTMLのxmlns属性にogグラフの使用を記述

htmlタグにxmlns属性を追加して、XML文書内でog:が含まれるmetaタグに対するネームスペースを確保しておきます。なくても問題ないようですが同じXML文書内で名前空間の衝突を避けるために、記述しておくほうが良さそうです。
  1. <html xmlns:og="http://ogp.me/ns#">

ウォールに投稿される際に必要なプロパティ

オープングリフの基本書式です。metaタグにpropertyという属性値名を記述し、その中にog:●●●の形式で必要な値を追加します。metaタグに設定する属性値のキーはnameではなく、propertyなので注意します。
  1. <meta property="og:キー" content="値" />
設定すべきキーワードは、type title url image descriptionの5種類です。

各項目は次のように定義されています。

  • title ホームページのタイトル
  • type ホームページの所属するタイプ。’website’や’blog’など。
  • url ページのURL。リンクで使用されます。
  • image キャプチャー画像のURL。httpから始まるフルパスで指定
    (サイズは縦が80px、幅が縦の3倍までのサイズ。一番いいのは正方形の160×160pxの画像)
  • description ページの概要やアウトラインなどの要約文。

  • audio サイトに含まれるaudioなどの情報
  • determiner サイトタイトルの前に付属するtheanなどの接頭語。英語のみ
  • locale サイトに使用されている言語(デフォルトはen_US。日本ならja_JP)
  • locale:alternate もし多言語化されたホームページであれば、対応言語を配列形式(複数行)で設定
  • site_name 大規模なウェブサイトの場合、ホームページの略語として利用されるようなアルファベットの組み合わせを定義。(openGraphProtoculをOGPとするようなかんじ)
  • video サイトコンテンツを補間するための動画の情報

関連投稿記事

Comment: