Facebookの「いいね!」ボタンの盲点。ボタンを設置するだけでは、押しても情報は広まらない。→OGPに対応しよう!

Posted by localpocky on 29.2011 ブログ作成   1 comments   0 trackback
Tag :Facebook OGP
このブログに Facebook の「いいね!」ボタンを設置 してから、しばらく経ちました。

Facebook の「いいね!」ボタンって、その記事のことをクリックした人の友達にも伝えられるボタンだと思っていました。(Twitter のリツイートのように)

ところが…。
Facebook 内で「いいね!」を押した場合には、確かにその通りに機能するのですが、ブログなどの 「Facebook の外」にあるページでは、「いいね!」ボタンを設置するだけではクリックした人の友達には伝わらないんです。

このことを知ったきっかけは、以下の記事でした。

当ブログでも「いいね!」ボタンを設置してから、Facebook経由のアクセスが増えています。「いいね!」ボタンを押してもらえると、その人のニュースフィード上に表示され、より多くの人の目に触れるからです。

OGP (Open Graph Protocol) のタグをサイトに追加しないと、上記のメリットは得られません。フェイスブックのいいね!をサイトに追加するなら絶対にやるべきです

(日本人のためのフェイスブック入門 - わかったブログ より)


「OGP のタグ」って、一体何だ?!
ということで、ブログの OGP 対応について、調べてみました。


目次


  • OGP とは何か?
  • OGP に対応するメリットは?
  • OGP に対応する方法は?
  • OGP タグが正しく設定されたことを確認するには?
  • まとめ


OGP とは何か?


OGP の正式名称は "Open Graph Protocol" と言います。

OGPとは、「外部サイトをまるでFacebookページのように見せかけれるhtml記述のルール」です。

このルール通りにhtmlを書かないと、Facebookのシステムが外部ページの情報を上手く理解できません。「いいね!」情報が友達のニュースフィードに飛ばないなど、色々と不都合が生じてしまいます。

(<遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね!」ボタンと「OGP」の設定方法、超解説 より)


OGP は、Facebook 専用のルールというわけではなく、mixi チェックなどでも使われているようですが、この説明がいちばん分かりやすかったです。


OGP に対応するメリットは?


2つのメリットがあります。

1つは、ブログなどに設置されている「いいね!」ボタンを押したときに、ボタンを押してくれた人と、その人の友達の「ニュースフィード」(Twitter のタイムラインに相当) 上にもリンクが表示されるようになることです。

これにより、「いいね!」を押してもらったときに、ブログの記事がより多くの人の目に触れるようになります。

逆に言うと、OGP 対応していないページ上の「いいね!」ボタンを押したときは、ボタンを押してくれた人の「プロフィール」(個人のウォール) には表示されるのですが、「ニュースフィード」には表示されません。

「プロフィール」の内容は、友達の「ニュースフィード」には表示されないので、誰かが意図的にプロフィールページを見に行かない限り、その内容には気が付きません。
ですので、せっかく「いいね!」を押してもらっても、他の人の目に触れる機会はかなり少ないと言っていいでしょう。

OGP 対応時と非対応時の動作の違いは、こちら↓のページで図入りで詳しく解説されています。
フェイスブックのいいね!をサイトに追加するならこれはやるべき - ECおもろ!!!


もう1つのメリットは、「いいね!」ボタンを押してもらったときに、「ニュースフィード」上にどのように表示させるかを、自分で制御できることです。

例えば、下の図の赤枠で示している、サムネイル画像、記事のタイトル、サイトの URL、記事の概要を、それぞれ個別に指定することができます。

110529_1a.png

OGP 対応していない場合は、Facebook 側で適当に内容を判断して表示されます。
だから、サムネイル画像のところに、ふさわしくない画像(例えば、ページに貼り付けてある広告などの、記事の内容と関係ない画像)が使われちゃったりすることもあるんですね。


OGP に対応する方法は?


ブログなどの HTML にタグを埋め込むことで、対応できます。
HTML の2箇所に、タグを埋め込みます。

1つは、<html> タグに xmlns 属性を2つ追加します。
赤文字部分が、追加した部分です。

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


もう1つは、<head>~</head> の中に OGP の一連の meta タグを追加します。
以下のような感じの内容です。

<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="article" />
<meta property="og:description" content="記事の要約" />
<meta property="og:url" content="記事のURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="og:locale" content="言語" />
<meta property="fb:app_id" content="取得したFacebookのアプリID" />


(追記 2011/11/14:"og:locale" を追加しました)

ブログの個々の記事に OGP タグを入れる場合は、記事ごとにタグの内容を動的に変えてあげる必要があります。

うちのブログは FC2 ブログなので、FC2 ブログで用意されている独自の変数を使って、以下のようなタグを設定しました。

<!--permanent_area--><!--topentry-->
<meta property="og:title" content="<%topentry_title> - <%blog_name>" />
<meta property="og:type" content="article" />
<meta property="og:description" content="<%topentry_discription>" />
<meta property="og:url" content="<%topentry_link>" />
<meta property="og:image" content="<%image>" />
<meta property="og:site_name" content="<%blog_name>" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />
<!--/topentry--><!--/permanent_area-->


(これは、FC2 ブログの場合の OGP タグの設定例です。その他のブログでは、それぞれのブログに用意されている変数に置き換えてみてください)

FC2 ブログ用の設定は、こちら↓サイトを参考にさせていただきました。
FC2ブログにFacebook用のOGPを設定 - エスニックなベランダ菜園の記録

なお、OGP のタグについての詳細は、こちら↓の Facebook Developers のページに詳しく載っています。(英語)
Open Graph protocol - Facebook開発者


OGP タグが正しく設定されたことを確認するには?


Facebook に用意されている「URLリンター」 というページを使って、OGP タグが正しく認識できるようになっているかを、簡単に確認できます。

(追記:2011/08 頃に「URLリンター」が「デバッガー(Debugger)」という名前に変わりました。機能は一緒みたいです)

110529_4.png

「URLリンター」で、確認したいページの URL を入力すると、下の図のように OGP の各タグにセットされている値が確認できます。

110529_2.png

もし、必須になっている OGP タグがセットされていないと、"Required Property Missing" と警告が表示されます。

110529_3.png


まとめ


  • Facebook の「いいね!」ボタンを設置しても、それだけは情報が拡散しない。(ボタンを押してもらっても、その人の友達には届かない)

  • Web ページを OGP に対応させることで、情報を拡散できるようになる。(ボタンを押してもらったときに、その人の友達にも届く)

  • OGP に対応させるには、HTML に OGP 用のタグを埋め込めばよい。


おわりに


このエントリを書くに当たり、以下のサイトを参考にさせていただきました。
ありがとうございました。


OGP 関連の他の記事


【OGP対応】 OGPタグが認識されない… →「URLリンター」でキャッシュさせよう! - localpocky's reports


【OGP対応】 og:image で画像を指定しても表示されない… →画像サイズを確認しよう! - localpocky's reports


【OGP対応】Facebook のデバッガーで「An internal error occurred while linting the URL.」エラーが発生 (FC2ブログ) - localpocky's reports


FC2ブログに Twitter, Facebook, Evernote のボタンを設置してみた

Posted by localpocky on 07.2011 ブログ作成   0 comments   0 trackback
Tag :Facebook Twitter Evernote
110307_1.png 110307_2.png

どれだけの効果があるのか分かりませんが、ブログに
 Twitter の「ツイートする」ボタン
 Facebook の「いいね!」ボタン
 Evernote の「クリップ」ボタン
を付けてみました。

最近よく見かけますよね、これらのボタン。
うちもちょっと真似してみようと、ただそれだけです。(^^;


Twitter の「ツイートする」ボタン、Facebook の「いいね!」ボタン


自分が使っている FC2 ブログは、なんと公式で Twitter と Facebook のボタンに対応していました。いつの間に…。(2010年10月かららしいです)
環境設定でチェックをオンにするだけで、拍手ボタンの下に2つのボタンが追加されます。こりゃ楽ちん。

110307_3.png

設定方法は、こちら↓をどうぞ。

【ブログの設定】 記事の設定|FC2ブログ公式マニュアル

ところで…。
Facebook の「いいね!」ボタンを設置すること自体は簡単なのですが、ただボタンを設置するだけでは、せっかく「いいね!」ボタンを押してもらっても、その人の友達には情報が伝わりません。
「いいね!」ボタンを設置したら、忘れずに OGP にも対応しましょう。

詳しくはこちら↓の記事をどうぞ。
Facebookの「いいね!」ボタンの盲点。ボタンを設置するだけでは、押しても情報は広まらない。→OGPに対応しよう!


Evernote の「クリップ」ボタン


Evernote のクリップ(サイトメモリー)ボタンの追加には、Evernote と言えばこの人の堀さんのページを参照しました。

あなたのブログに Evernote Site Memory を追加する | Lifehacking.jp

ボタン作成用のページは、上記のページ内に貼られているリンクとは別に、今では日本語版のページが存在するので、こちら↓を使った方が便利だと思います。

サイトメモリーって何? | Evernote Corporation

110307_4.png

ポイントは "Content to clip" の設定でしょうか。
これを設定しないと、Web ページ全体がクリップされてしまいますが、適切な ID を指定することで、ブログの本文のところだけをクリップしてくれるようになります。

自分が使っているテンプレートでは、本文が <div id="main"> ~ </div> というタグで括られていたので、"Content to clip" には "main" と指定しました。これでバッチリ。

110307_5.png


その他


この他に、最近よく見かけるボタンに、mixi の「チェック」と「イイネ!」ボタンがありますね。
これを追加するには、mixi のデベロッパー登録が必要なようです。
氏名、住所、電話番号を入力しなくちゃならないようで、ちょっと面倒臭かったので、こちらは今回はパス!


  

プロフィール

localpocky

Author:localpocky
電車好きを返上して、にわかに興味が出てきたのが野鳥。姿を見たり鳴き声を聞くと和みます。好きな鳥はハクセキレイ。カワセミを一度この目で見てみたいです。
読書は1週間に1冊のペース。図書館も愛用しています。
2007年にMacにスイッチ。iPhoneも活躍中。
ささやかな楽しみは、手挽きのミルで豆を挽いてコーヒーを入れること。自分で入れたコーヒーはおいしい!
ブログの紹介など → こちら

HSタグクラウド

カレンダー

10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

検索フォーム

トラックフィード

track feed リンク元サイト