SEOの2倍アクセスを稼ぐFacebook活用術　「いいね！」ボタンと「OGP」の設定方法を超解説

Blogや自社サイトに、「いいね！」ボタンを設置しているみなさん、「超重要」なOGP(Open Graph Protocol)の設定は出来てますか？　

これは、ある記事の参照元の計測データです。アクセスを牽引しているのは、「はてなブックマーク」でも「twitter」でも「Google」でもなく、『Facebook』です。OGPを設定するだけで「必ず」Facebookからの流入数が増加します。増加率はサイトによっては2倍どころではありません。今回は、流入数が増加する理由とそのための設定方手順をご説明します。

※かなり長い記事になりますが、いつの日にか必要になる設定手順を超詳しく解説しています。ぜひブックマークしておいてください！

1. 最初に種明かし、「必ず」Facebookからの流入数が増加する理由

OGPを設定すると友達のニュースフィードに「いいね！」が飛ぶ。
皆さん、ブログでもニュースサイトでも「いいね！」ボタンを見ますよね？ 実はこの使い方、クリックして貰って数字を出すだけではないのです。
ラボでは、昨年の下旬あたりに”OGPを設定すると友達のニュースフィードに「いいね！」が飛ぶ”という事に気付いてすぐに設置していました。もちろん、誰かが「いいね！」を押してくれる事が前提条件になりますが、この設定によって確実にアクセスが増加します。

※補足※
記事公開から日が立っていくと、だんだんとGoogle経由でのアクセスが増えていきます。Facebookは初速でのアクセス増加に貢献し、Googleは中期的なアクセス増加に貢献していきます。

ここまでで、OGPがアクセス増加のカギになりそうだ、というのは何となくご理解頂けたかと思います。次に、「そもそもOGPとは何か？」についてご説明します。
　

2. OGPとはなにか？

OGPとは、「外部サイトをまるでFacebookページのように見せかけられるhtml記述のルール」です。このルール通りにhtmlを書かないと、Facebookのシステムが外部ページの情報を上手く理解できません。「いいね！」情報が友達のニュースフィードに飛ばないなど、色々と不都合が生じてしまいます。

設定方法の詳細は後述しますが、Facebookが指定する「xmlns属性」と「meta情報」を記述する必要があります。

　▼OGP設定に必要な記述
　　1. xmlns属性　…「xmlns:og=”http://ogp.me/ns#”」etc
　　2. meta情報　…「」etc

また、xmlns属性・meta情報をご存じない方はこちらをご参照頂くと分かると思います。

xmlns属性とは？

XHTML（というよりXML）では、1つの文書の中でXHTMLをはじめ、他に定義されたマークアップ言語を複数使用することができます。複数のマークアップ言語を使用する場合、それら複数のマークアップ言語の中で同じ名前のタグが使用されていた場合に衝突が起こる問題が生じます。
例えば、現在、MathMLという数式用のマークアップ言語がありますが、このMathMLで＜a＞タグが数値を表すと定義されていたとすると、XHTMLの＜a＞タグと衝突してしまいます。
こういった衝突を防ぐために、XHTMLでは、どのDTDのタグと属性を参照するかを指定するxmlns属性（XMLネームスペース）が用意されています。XHTML文書を作成する場合は、通常、このxmlns属性をに記述しておき、値に「http://www.w3.org/TR/xhtml1」を記述します。
　引用元：WebDesignLesson

meta情報とは？

タグはその文書に関する情報（メタ情報）を指定して、 ブラウザや検索ロボットに知らせるためのタグです。
　引用元：クイック レファレンス

　　　

3. OGPを設定したほうが良い3つの理由

「OGP」を設定すると何が良いのか？
冒頭でご説明した『友達のニュースフィードに飛ぶ』というのも含め、3つの理由があります。

　▼OGPを設定したほうが良い3つの理由
　理由１．「いいね！」を押した情報が友達に飛ぶ（設定しないと飛ばない！）
　理由２．ニュースフィードでの表示内容を指定できる。
　理由３．「いいね！」を押してくれたユーザーにアップデート情報を送れる。

それぞれ、詳しくご説明します。
　

理由1. 「いいね！」を押した情報が友達に飛ぶ（設定しないと飛ばない！）

これがOGPを設定すべき最大の理由です。設定すれば、「いいね！」を押したユーザーの友達のニュースフィードに情報が飛びます。

※注意※OGPを設定しなくとも、自分のプロフィールページにはアクティビティとして表示されます。が、実はここに表示されても友達のニュースフィードには飛んでいません。
　

理由2. ニュースフィードでの表示内容を指定できる。

せっかく、OGPを設定して友達のニュースフィードに表示されるようになったとしても、ヘンテコな情報が表示されたり、見せたい情報が表示されなかったりしたらもったいないです。色々な種類のmeta情報を付加できるので、しっかり設定しましょう。

※指定しない場合は、Facebookのシステムが判断した情報が表示されてしまいます。

＜まず設定すべき7種類のmeta情報＞
OGPでは、「＜meta property=”og:▲▲” content=”●●”＞」という形式で、様々な情報を付加できます。設定しようと思えば本当にたくさんの種類がありますが、「必須のもの」と「表示による効果が出やすいもの」として、こちらの7種類だけ設定すれば問題ありません。
　
1.og:title（ページタイトル）

2.og:image（ページ画像）

3.og:url（ページURL）

4.og:site_name （ページが属するサイト名）
（※ニュースフィードには表示されません。）

5.og:description（ページの説明文）

6.fb:app_id
「OGPを設定する」＝「Facebookページに見せかける」のですが、そのFacebookページの管理者をアプリIDで指定します。（※ニュースフィードには表示されません。）

7.og:type（ページタイプ）
これはOpen Graph typesのリストから選ぶ必要があります。ニュースフィードには表示されません。
The Open Graph Protocolから抜粋したtypeが下記になります。typeの種類は変わる可能性がありますので、設定するタイミングでThe Open Graph Protocol（英語）サイトをご確認下さい。
　

・Activities
　activity
　sport

・Businesses
　bar
　company
　cafe
　hotel
　restaurant

・Groups
　cause
　sports_league
　sports_team

・Organizations
　band
　government
　non_profit
　school
　university

・People
　actor
　athlete
　author
　director
　musician
　politician
　profile
　public_figure

・Places
　city
　country
　landmark
　state_province

・Products and Entertainment
　album
　book
　drink
　food
　game
　movie
　product
　song
　tv_show

・Websites
　article
　blog
　website

　　

理由3. 「いいね！」を押してくれたユーザーにアップデート情報を送信できる。

意外と気付いていない方が多いのがここではないでしょうか。

冒頭で「外部ページをFacebookページに見せかけられる」と書きましたが、実はOGPを設定すると普通のFacebookページとは別に「外部ページ用のFacebookページ」が生成されています。この「外部ページ用のFacebookページ」のウォールにコメント・URL等を投稿する事で、そのページで「いいね！」を押した人のニュースフィードに、アップデート通知を送信できるのです。
　

「外部ページ用のFacebookページ」にはどうやって行くの？

この画面には、外部サイトの「いいね！」ボタンの横についている「管理者用ページ」というリンクから行けます。OGPを設定したら、ぜひ行ってみて下さい！（
このリンクは、管理者にしか表示されません。）

　
以上が、そもそもOGPとは何か、OGPを設定するとどんな良い事があるか、の説明です。以降で具体的な設定方法について見ていきましょう。
　

3. 「いいね！」ボタン、「OGP」の具体的な設定方法（livedoor Blog編）

具体的な設定対象を挙げたほうが分かりやすいかと思いますので、ラボでも利用しているlivedoorBlogを例に、「いいね！」ボタン、「OGP」の設定手順をご紹介します。「いいね！」ボタンの設置方法は、「iframe」と「XFBML」の2種類があります。今回は設定が分かりやすい「iframe」版のご紹介をします。
　

「アプリID」を取得する。

まずは、Facebookデベロッパーズサイトのアプリ作成画面にアクセスします。
アプリ作成画面： http://developers.facebook.com/setup/

表示された画面で、OGPを設置したサイト名・URLを入力。次画面ではセキュリティチェックの単語入力を行います。
　

「Create an App」というアプリIDの作成完了画面が表示されます。この画面の「アプリID」をOGP設定時に使いますので、メモしておいて下さい。
　

「いいね！」ボタンを設置する。

次に「いいね！」ボタンを設置するためのコードを発行します。まずは、Facebookデベロッパーズのプラグイン発行画面にアクセスしましょう。
プラグイン発行画面： http://developers.facebook.com/docs/plugins/

「Like Button」を選択します。

「Step 1 – Get Like Button Code」の設定欄で、それぞれ下記のように設定します。

・「URL to Like」欄　：「123」と記入
　　→後で、livedoor Blogのパーマリンクの独自タグに書き換えます。ここで<$ArticlePermalink$>を入力すると、コード生成のタイミングで誤変換されてエラーになります。

　・「Layout Style」欄　：「standard」のまま
　　→「いいね！」ボタンの形を3パターンから好みで選べます。

　・「Show Faces」欄　：「チェック」を付けたまま
　　→「いいね！」した友達の写真を表示するかどうか選べます。若干表示速度が遅くなりますが、写真を出す事によりそれ以上の効果があるので表示します。

　・「Width」欄　：設置先の横幅に合わせて記入

　・「Verb to display」欄　：「like」のまま
　　→「like」と「recommend」のどちらかを選べます。

　・「Font」欄　：そのまま

　・「Color Scheme」欄　：そのまま

URLを書き換えます。生成したコードの「123」の部分を、＜$ArticlePermalink$＞に変更しましょう。このコードは、livedoorBlogの管理画面に貼りつけるので、保存しておいて下さい。
　

＜$ArticlePermalink$＞とは？
livedoorBlogの独自タグで、記事ごとのパーマリンクを自動で挿入させるようにする記述方法です。他にも色々ありますので、ご興味ある方はこちらをご覧下さい。
　独自タグ一覧／livedoor BlogのデザインをカスタマイズするWiki
　デザインテンプレート/タグ一覧／livedoor Blog まとめサイト

　

livedoorBlogの管理画面で貼りつける。

livedoorBlogのデザインカスタマイズページを開きましょう。

「個別記事ページ」の編集画面で、＜$ArticleBody$＞の下にコードを貼りつけます。
次にOGPの設定に入ります。念のため、ここで保存しておいて下さい。
　

「OGP」を設置する。

次にOGPの設置をします。まずは「いいね！」ボタンのコードを生成した「いいね！」ボタン発行画面にもう一度アクセスして、「Step 2 – Get Open Graph Tags」と書かれた部分を開いて下さい。
　
「OGP」のタグを発行する。

「Step 2 – Get Open Graph Tags」の設定欄で、それぞれ下記のように設定し、「Get Tags」をクリックします。
　
　・「title」欄　：未記入
　　→ここで独自タグを記入すると誤変換でエラーになるため。

　・「Type」欄　：「blog」に設定

　・「URL」欄　：未記入
　　→ここで独自タグを記入すると誤変換でエラーになるため。

　・「Image」欄　：未記入
　　→ここで独自タグを記入すると誤変換でエラーになるため。

　・「Site name」欄　：ブログタイトルを記入

　・「Admin」欄　：「111」と記入

Get Tagsをクリックすると、このような画面が開かれます。未記入だった「og:tilte」「og:url」「og:image」に、livedoorBlogの独自タグを記入します。

　
　・＜meta property=”og:title” content=”” /＞
　　→「””」の間に、<$ArticleTitle ESCAPE$>と記入
　　→これは、そのページのタイトルを勝手に挿入してくれる独自タグです。

　・＜meta property=”og:url” content=”” /＞
　　→「””」の間に、<$ArticlePermalink$>と記入

　・＜meta property=”og:image” content=”” /＞
　　→「””」の間に、<$ArticleFirstImage$>と記入
　　→これは、記事の最初の画像を勝手に挿入してくれる独自タグです。
　
「111」と記入した「og:admin」の欄を、下記のように書き換えます。

　　[変更前]
　　　＜meta property=”fb:admins” content=”111” /＞
　　[変更後]
　　　＜meta property=”fb:app_id” content=”最初に取得したアプリIDと記入” /＞

この画面では、「og:description」の設定が入ってません。ですので、自分で＜meta property=”og:description” content=”＜$ArticleBody ESCAPE$＞”/＞を追加しましょう。

　・＜meta property=”og:description” content=”＜$ArticleBody ESCAPE$＞”/＞
　　→＜$ArticleBody ESCAPE$＞というのは、livedoorBlogの独自タグで、そのページのテキストを勝手に持って来てくれます。

終わったらlivedoorブログの管理画面に貼りつけるので保存しておきます。
　

livedoorBlogの管理画面で貼りつける。

　
まず、「いいね！」ボタンのコードを貼った「個別記事ページ」の編集画面を開いて下さい。こちらの2つのxmlns属性を追加しましょう。
　

　・xmlns:og=”http://ogp.me/ns#”
　・xmlns:fb=”http://www.facebook.com/2008/fbml”

　

用意していたOGPを、との間に追加して保存しましょう。
　

URLリンターで、ミスが無いか確認。

最後に、Facebookが用意する「URLリンター」を使ってミスが無いか確認しましょう。使い方は、記事URLをフォームにコピペして「Lint」を押すだけです。
URLリンター：　http://developers.facebook.com/tools/lint

これで、問題が無ければ設置完了です。問題がある場合は、下記のように「ご注意」や「エラー」と言った表記と、その理由が表示されます。それをご覧頂ければ、簡単に間違い修正できるかと思います。

　
Giax ソーシャルメディア ラボ
http://blog.livedoor.jp/gx_socialmedia_lab/
Giax ソーシャルメディア ラボのFacebookページ
http://www.facebook.com/socialmedia.gaiax
公式Twitterアカウント　@GX_SocialMedia
　
※画像は『Facebook』から引用されています。