フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

みなさん、こんにちは

お元気ですか？僕は元気です。

さて

最近よく、﹁いいね！﹂ボタンや﹁ミクシィチェック﹂ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。

そんな中で、今後重要になってくるんじゃないかと思われる OGP ︵Open Graph Protocol︶と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。

OGP とは

簡単に言うと﹁このウェブページは何のことを書いているか﹂という情報を、プログラムから読める形で HTML に付加する記述方法のことです。まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別することが難しいのです。なので、決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。

なぜ、これが重要か

﹁いいね！﹂ボタンや﹁チェック﹂ボタンで、ウェブページが紹介されるようになって、ウェブ中の様々なウェブページがどんどん SNS の中に流れ込んでくるようになっているんですね。で、そうすると当然 SNS の中でそのページをどう表現すればいいか︵リンクテキストはどうすべきか、画像はどうすべきか、どこに表示すべきか︶という問題が出てきます。そこで、最近さまざまな SNS サイトで使われるようになった仕様が OGP なんですね。 SNS だけでなく、これからは様々なサイトで﹁ウェブ上に書かれたモノ﹂と﹁人﹂をつないで行く時代になると思います。 OGP も SNS だけに留まらず、そのほかのサイトでもどんどん使われるようになっていくのだと思います。

具体的にはどう書くの？

さて、では具体的にどのように書くのか、その一例を見せたいと思います。たとえば僕のブログのトップページについて OGP で記述すると、以下のようになります。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    <title>IT戦記 - はてなダイアリー</title>
    <meta property="og:title" content="IT戦記">
    <meta property="og:type" content="blog">
    <meta property="og:description" content="IT戦士あまちゃんが、日々思ったことやウェブのことプログラミングのことを書いている日記的なブログです。">
    <meta property="og:url" content="http://d.hatena.ne.jp/amachang/">
    <meta property="og:image" content="http://www.st-hatena.com/users/am/amachang/user.jpg">
    <meta property="og:site_name" content="はてなダイアリー">
    <meta property="og:email" content="seijro@gmail.com">
    <meta property="og:phone_number" content="080-1266-2159">
  </head>
  <body>

簡単に説明すると ●og:type ●このウェブページが何のページであるかを記述︵必須︶ ●og:title ●このウェブページが記述しているモノの名前︵必須︶ ●og:image ●このウェブページが記述しているモノの画像︵必須︶ ●og:url ●このウェブページの正式な URL︵必須︶ ●og:description ●このウェブページの説明 ●og:site_name ●このウェブページが何かのサイトに所属する場合そのサイト名 ●og:email, og:phone_number ●連絡先詳細はThe Open Graph protocol

に記述されています。まあ、要はウェブページの情報を HTML 上の meta 要素として記述するんですね！簡単ですよね！

フェイスブックでの使われ方

ちょっと概要ばっかりだとピンとこないと思うので、具体的にフェイスブックでこの情報がどんな感じで使われるかを見てみましょう。フェイスブックでは、以下の4つの箇所で OGP の情報を使っています。 ●﹁いいね！﹂した人のウォール︵﹁いいね！﹂した瞬間︶ ●﹁シェア﹂した人のウォール ●﹁いいね！﹂した人のプロフィール ●﹁いいね！﹂した人のウォール︵﹁いいね！﹂した後日︶ひとつひとつ具体例を見てます。

「いいね！」した人のウォール（「いいね！」した瞬間）での OGP の使われ方

まずは、﹁いいね！﹂を押した人のウォールに書き込まれる文言についてです。 OGP の情報によって表示されるリンクテキストを変えることができます。たとえば、ちょっとサンプルとして以下のようなウェブページを用意してみました。 http://callee.jp/ogp/003.html このウェブページでは、まったく OGP を使っていません。これを﹁いいね！﹂すると以下のようにウォールに流れます。

こんな感じでドメイン名のトップとタイトルがそれぞれリンクされます。︵場合によっては、ドメイン名の変わりにトップページのタイトルが入ったりします。︶そこで、以下のようにウェブページ og:title と og:site_name という property 属性を持った meta 要素を追加してみます。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    <meta property="og:title" content="タイトルだよ">
    <meta property="og:site_name" content="サイト名だよ">
    ...
  </head>

http://callee.jp/ogp/004.html そうすると、以下のようにリンクテキストをカスタマイズすることが出来ます。

リンクテキストの重要性

リンクテキストはストリーム型の SNS では非常に重要な要素だと思います。
たとえば、以下の二つがウォールに流れてきた場合にどちらをクリックしたくなるでしょうか。
見た目の印象が全然違いますね。
なので、フェイスブックの﹁いいね！﹂をページに置くときは og:title と og:site_name は書いたほうがいいでしょう。

「シェア」した人のウォールでの OGP の使われ方

次は、リンクを﹁シェア﹂した瞬間にその人のウォールに表示される文言や画像についてです。ここでも、 OGP の情報によってリンクテキストや画像や概要の文言を変えることができます。たとえば、以下の URL を﹁いいね！﹂すると http://callee.jp/ogp/007.html 以下の画像のような感じにウォールに表示されます。

﹁画像﹂と﹁ウェブページのタイトル﹂と﹁ドメイン﹂と、場合によっては、﹁概要﹂が挿入されていますね。これを、以下のような meta 要素を挿入すると

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    <meta property="og:title" content="おーじーぴーのテスト">
    <meta property="og:description" content="これは、あまちゃんが Open Graph Protocol の挙動を試すために用意したページです。">
    <meta property="og:image" content="http://callee.jp/ogp/full_moon.jpg">
    ...
  </head>

http://callee.jp/ogp/009.html 以下のように、﹁画像﹂と﹁ウェブページのタイトル﹂と﹁概要﹂をカスタマイズすることが出来ます。

音声や動画を添付する方法
また OGP の情報を使ってシェアされたリンクに音声や動画を添付することが出来ます。
以下は、音声を添付する例です。

<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#"> <head> ... <meta property="og:audio" content="http://callee.jp/ogp/audio.mp3"> <meta property="og:audio:title" content="すごい歌"> <meta property="og:audio:artist" content="すごいバンド"> <meta property="og:audio:album" content="すごいアルバム"> <meta property="og:audio:type" content="application/mp3" /> ... </head>

http://callee.jp/ogp/015.html
添付された音声は、以下のようにウォールに表示されます。
以下は、動画を添付する例です。

<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#"> <head> ... <meta property="og:video" content="http://callee.jp/ogp/movie.flv"> <meta property="og:video:width" content="450"> <meta property="og:video:height" content="390"> <meta property="og:video:type" content="application/x-shockwave-flash" /> ... </head>

ちなみに、動画を添付するには以下のフォームでサイトの審査の申請をする必要があるようです。
http://www.facebook.com/help/contact.php?show_form=video_embed_whitelist

「いいね！」した人のプロフィールでの OGP の使われ方

また、以下のように og:type と fb:admins が設定されていると、

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#"
    xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    ...
    <meta property="og:title" content="おーじーぴー・ザ・ムービー">
    <meta property="og:type" content="movie">
    <meta property="fb:admins" content="amachang">
    <meta property="og:image" content="http://callee.jp/ogp/amachang.gif">
    ...
  </head>

http://callee.jp/ogp/011.html 以下のような感じで og:type で指定した種類のモノとしてプロフィールに登録されます。

ここで、このリンクをクリックすると﹁いいね！﹂したウェブページに飛びます。ただ、ちょっとややこしいんですが、 fb:admins で指定したフェイスブックのユーザーだけは違う挙動をします。 fb:admins で指定したユーザーは、そのページの管理人となります。管理人は、次の項で示すようにそのページを﹁いいね！﹂した人のウォールにあとからお知らせを流すことが出来ます。

「いいね！」した人のウォール（「いいね！」した後日）での OGP の使われ方

前に述べたように、﹁いいね！﹂した人のウォールに後日お知らせを流すことが出来ます。このお知らせは、管理ページ︵ファンページに似たページ︶から流すことが出来ます。管理ページへは、前述した fb:admins で指定されたフェイスブックユーザーで、ウェブページの以下の部分をクリックすることで行くことができます。

管理ページは、以下のようにファンページのような感じです。

ただ、このファンページは管理者からしか見えないファンページで、﹁お知らせを流す用途﹂にだけ使います。たとえば、以下のようにすると

以下のようにウォールにポストされます。

で、この名前の部分をクリックするとまたウェブページに人を呼び戻すことができます。︵ただ、管理者がクリックした場合は、管理ページに飛ばされます。︶つまり、この機能を使うと外部サイトに内部ファンページと同等のユーザーの呼び戻し機能を付加することが出来るということです。これは、非常に有益になってくると思います。重要ですよ！あと、ひとつだけ注意すべきなのは og:type が article なものはこのお知らせの機能は使えません。これは、 article は一時的なものでリアルなモノを指さない︵ブログの記事など、それ自体がファンの対象ではない︶からだそうです。

fb:admins の代わりに fb:app_id を使う
fb:admins を使って、手動でお知らせを流すことが出来るのは良い機能なのですが、一つのサイトにたくさんのウェブページがあって、たくさんの﹁いいね！﹂があった場合は一個一個のページに対して管理していくのは大変ですね。
そんな場合は、 fb:admins の代わりに fb:app_id を使うことで、プログラムからそれらの作業を自動化することが出来ます。
やり方としては、以下のページからお知らせ専用のフェイスブックアプリを作ります。
Facebook for Developers | F8 Facebook開発者向けカンファレンス: 5月1～2日
で、以下のIDを
以下のように fb:app_id として設定します。

<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> ... <meta property="og:title" content="おーじーぴー・ザ・ムービー２"> <meta property="og:type" content="movie"> <meta property="fb:app_id" content="168986543145706"> <meta property="og:image" content="http://callee.jp/ogp/amachang.gif"> ... </head>

http://callee.jp/ogp/012.html
この際、以下のようにアプリケーションの設定でドメインと URL を指定しておく必要があります。
そうしたら、まず access_token ︵アプリケーション自身が、アプリケーションのリソースを自由に使うための認可を示す文字列︶を取得します。
コマンドラインで以下のように叩きます。

# まず、アプリケーションがアプリケーション自身のリソースにアクセスするための認可を取得する curl -F type=client_cred -F client_id=168986543145706 -F client_secret=アプリケーションの秘密鍵https://graph.facebook.com/oauth/access_token # 次に、 URL を指定してお知らせを流す curl -F "access_token=上のコマンドで取得できたaccess_token" -F message="Hey guys" -F id=http://callee.jp/ogp/012.html https://graph.facebook.com/feed

簡単でしょ？
このようにすると、以下のようにストリームに流れるのです。

ミクシィやグリーでの使われ方

ミクシィやグリーでは、主に「いいね！」や「チェック」したときにストリームに流れる情報の以下の三つの指定に使われます。

画像の指定
各デバイスごと（スマートフォン、モバイル、PC）のリンク先の指定
リンクテキストの指定

プロフィールへのプッシュや、あとからお知らせを流したりする機能はないと思います（あったらすみません）

OGP のこれから

このように、大手 SNS がこぞって OGP を採用したことによって、今後ますますウェブページでの OGP の利用が進んでいくのだろうと思っています。とくに、トラフィックの重要度が高いメディアや大手ブログでの OGP の利用が進むのではないでしょうか。︵はてなダイアリーでも、早く対応してくれないとユーザーがスネちゃうぞ＞＜︶また、様々なウェブページの OGP 利用を始めることで、その情報を活用するサイトも増えてくると思います。まず、ソーシャルブックマークサイトや Twib などのように URL に紐づいた情報をたくさん持っているサイトでの活用が思い浮かびます。情報として URL を大量に持っていて、さらに OGP によって﹁URL が何を示すものか﹂が分かるようになる訳ですから﹁URL をブックマークするサイト﹂から﹁リアルオブジェクトをブックマークするサイト﹂に進化することが出来る訳ですね！たとえば、はてなブックマークで考えてみると URL を基にした﹁人気エントリ﹂だけではなく、リアルオブジェクトを基にした﹁人気の本﹂とか﹁人気の映画﹂とか﹁人気のアスリート﹂とか﹁人気の人﹂とか﹁人気の場所﹂とか﹁人気の店﹂とか、色んな切り口で表現できるようになれるわけです。なんかわくわくしますね！

と、いうわけで

今回は OGP ︵Open Graph Protocol︶について紹介いたしました。 OGP、おもしろくないですか？この記事を読んで興味を持った人は、ぜひ自分のウェブページに OGP の情報を付加してみませんか？また、これから何か URL に紐づいたデータを扱うようなサービスを作ろうとしているなら、 OGP の情報を活用してみるとおもしろいのではないでしょうか？ではではーヽ(´ー｀)ノ