株式会社コプロシステム

お問い合わせ

2011年7月29日

「いいね!」ボタンを設置しただけで大丈夫ですか?~OGP設定の重要性について~

  • このエントリーをはてなブックマークに追加

ここ数年で、ウェブサイトやブログなどで、様々なソーシャルプラグインを見る機会が格段に増えました。

...などなど、種類を挙げたらきりがないほど、本当にいろいろなソーシャルプラグインが出てきています。

ウェブサイトやブログの利用者からすると、友達や同僚などつながりのある他者と簡単に情報をシェアしたり、情報を紹介しあうことができる便利なツールですし、運営サイドからすると、自分たちの存在や発信している情報をソーシャルグラフを通じて広めていってくれるツールです(下図参照)。

しかし、Facebookやmixiのソーシャルプラグインについては、ボタンを設置するだけでは、情報は広がっていかないのです。Facebookを例に挙げて、具体的な解説をしていきます。

情報が拡散していく仕組み「OGP設定」とは?

たとえば、Facebookのプラグインである「いいね!」ボタン。
このボタン、前述の通り、設置する"だけ"ではウェブサイトやブログの利用者が「いいね!」をクリックした時、利用者のウォールには記録されるものの、利用者の友達のニュースフィードには表示されません。つまり、情報が広がっていかないのです。
友達のニュースフィードに表示し、情報が拡散する仕組みを作るためには、「OGPOpen Graph Protocol)」という特有の記述をHTMLに対して設定しなければならないのです。


なぜそのような設定をしなければならないのか?

通常、ウェブサイトやブログを見ている時、そのサイトがなんという名前なのか?どんな種類のサイトなのか?どんな情報が載っているのか?というのは、我々"人間"であればだいたい理解することができます。
しかし、"プログラム"は、ウェブページのコンテンツや文章からだけでは、これらの情報を正確に把握することが難しいため、統一した記述ルール(プロトコル)に則って明示してあげなければいけません。
それは、Facebookのプログラムも例外ではなく、
サイト名/サイトの種類/ページの概要。はたまた、Facebookのウォールやニュースフィード上に表示する時の画像/タイトルテキスト/リンクURLなどを、統一した記述ルール(プロトコル)に則って明示してあげることで、はじめてFacebookというSNSに、外部のウェブサイトやブログは参加することができるのです。

その「統一した記述ルール(プロトコル)」のことを、「OGPOpen Graph Protocol)」と言います。

OGPを設定することのメリット

OGPを設定すると、先に述べたこと以外にもいろいろなメリットがあります。

  1. 友達のニュースフィードに表示される。
  2. ウォールやニュースフィードに表示される情報を指定することができる。
  3. 過去に「いいね!」をしてくれた人に対してアップデート情報を送ることができる。

1.については、先に述べたように、情報を広めていく上でとても重要になりますし、
2.についても、運営側が意図しない画像(広告やメニューボタン)が表示されてしまうことなどを防げます。

OGPの設定方法

大きく分けて2種類の設定があります。

HTMLタグのxmlns属性

一般的には、

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">

までですが、OGP設定を行う時は以下のように追記します。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr" 
xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

metaタグの新規追加

一般的に有名なのは、<meta keywords ...> や <meta description ...> ですが、OGP設定を行う時は、それ以外に以下のようなmetaタグを追記します。
この追記を行うことで、上記で述べた「2.ウォールやニュースフィードに表示される情報を指定」が実現できます。

<meta property="og:type" content="blog" />
<meta property="og:site_name" content="Tips*Blog" />
<meta property="og:description" content="xxxxxxxxxxxxxxx">
<meta property="og:url" content="http://www.xxxxx.co.jp/xxxxx.html" />
<meta property="og:title" content="xxxxxxxxxxxxxxx" />
<meta property="og:image" content="http://www.xxxxx.co.jp/xxxxx.gif" />
<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />

※Facebook公式のFacebook DEVELOPERSに最新の情報が掲載されています。

1. og:type

そのページのタイプです。blog、website、articleなど様々なタイプが用意されていますので、全てをご覧になりたい方は、Facebook公式のFacebook DEVELOPERSでご覧ください。

※Facebook上では、特に表示されません。


2. og:site_name

そのページのサイト名です。

※Facebook上では、特に表示されません。


3. og:description

そのページの概要説明です。Facebook上では、以下の場所に表示されます。


4. og:url

そのページにリンクされるURLです。Facebook上では、以下の場所をクリックするとそのURLが開きます。


5. og:title

そのページのタイトルです。Facebook上では、以下の場所に表示されます。


6. og:image

Facebook上で、以下の場所に表示されるサムネイル画像です。


7. fb:app_id

OGP設定を有効にするために、そのサイトのFacebookのアプリIDを指定します。
アプリIDは、Facebook DEVELOPERSから作成してください。

最後に

現在、世界でのFacebook人口は約7億5,000万人。日本ではまだアクティブ会員数が300~400万人と、世界と比較するとまだまだ少ないですが、その増加数は加速しています。
2,000万強の会員数を有するmixiもまだまだ衰えないと思います。

今後、重要性が増していくこれらソーシャルメディアを活用していく上で、プラグインの設置や、今回ご紹介したOGP設定は外せないものとなってくるでしょう。ご参考になれば幸いです。

  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Facebook」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP