fb_ogp01

さー、Facebook] いいね!ボタンを設置してサイトの情報をみんなに拡げる に続きウェブサイトに OGP タグを設定しますよー


OGP とは Open Graph Protocol の略なわけですが (そんなこと言われてもワケわからん)、これをウェブページに設定すると、そのウェブページのタイトルとか説明文とか URL とかの情報を「いいね!」押してくれた人のやその友達のニュースフィードやタイムラインにきちんと表示させることができるんです!


スポンサーリンク

この OGP を設定しなくても、ウェブページのタイトルや URL はある程度自動的に HTMLソースの <title> タグから引っ張ってくるようですが、きちんと設定したほうが伝えたい情報が伝わらないということを避けれるし、わかりやすい情報をみんなに伝えることができます。


地味に結構重要ですよね。


さっそく、OGP タグの取得方法を見てみましょう。OGP タグの HTMLコードを入手した後に、それをウェブサイトの HTMLコードににコピペするという手順になります。


OGP タグの取得

まず、http://developers.facebook.com/docs/reference/plugins/like/ を開き、ページの真ん中よりちょっと上にある "Step 2 - Get Open Graph Tags" の箇所まで移動します。


入力項目がありますので、それぞれ以下を入力します。


fb_ogp02

  • Title
  • ウェブサイトのタイトルを入力します。ブログであれば、ブログのタイトルです。


  • Type
  • ここは、名前だけを見ると何を選ぶか迷いますね・・・
    ブログのトップページへの設置であれば、"blog" を選びその他ウェブサイトのトップページであれば "website" で OK です。
    しかし、注意が必要なのはその中の各記事やブログのページのように複数ページ存在する場合は、"article" を選びます。blog, website は 1つのサイトやドメインにしか対応していませんので各ページに付けてしまうと思うように動作しない場合があります。


  • URL
  • ウェブサイトの URL を記入します。


  • Image
  • ウェブサイトの顔となる画像の置き場所を URL で記入します。アイコンなどが良いでしょう。


  • Site name
  • ウェブサイトの名前を記入します。トップページであれば、Title と同じでも OK です。


  • Admin
  • ここは、[Facebookとブログ連携はじめの一歩!] Webページ・アプリケーションの作成 でアプリケーションを作成し facebook にログインしていれば自動で表示されるはずです。
    アプリケーションを作成して 0 と表示される場合は、ログインし直しましょう。


そして、"Get Tags" をクリックして HTML にコピペするコードを入手します。


fb_ogp03

これを、ウェブサイトやブログの HTMLソースの <head> と 
</head> の間にコピペしちゃいましょう。


これで基本的な設定はほぼ終わりなのですが、さらに、補足して変更したり挿入した方が良い OGP のタグがあるので、以下はそれを説明します。


og:description タグを加える

ウェブページの説明を相手に伝えることで、ページを理解してもらえます。また、それにより「いいね!」ボタンもより押してもらえるようになるかもしれませんね。


そのためには、以下のように og:description タグコードを加えます。

<meta property="og:description" content="このサイトは Mac について色んなこと書いてるよ〜">

content の中身はウェブページを紹介する説明内容にします。


利用されているブログによっては、description をウェブページに記載されている最初の100字を入れるといった設定ができます。利用されているブログのヘルプなどを調べてみましょう。


各ブログページや記事に合う値を設定する

上記の "Get Tags" で生成できるコードは、特定のサイトやひとつのウェブページに対するコードです。


ブログや記事を多数扱うサイトでは、それぞれのページで内容を変えてそのページの情報を伝えたいですよね!


そこで、各ウェブページで変えた方が良い OGP タグを以下に記載します。

  • Title
  • これは、各ブログや記事のタイトルを入れた方が良いでしょう。


  • URL
  • 各ページの URL を記入します。


  • Image
  • これも、できれば各ページで使っている画像を使った方がよいでしょう。


  • Description
  • 前に追加すべきタグとして紹介しましたが、これも各ページにあった内容にしたいものです。

あとは、Type を前に説明したように、個別の記事やブログページでは "article" にしましょう。


でも、ブログや記事を扱うサイトでは、各ページにいちいち設定していくのは面倒ですよねー
そこで、各ブログの運営サイトや WordPress のようなブログソフトウェアではちょっとの設定でこれらを自動入力されるようにすることができます。(できないところもあるようですが・・・)


ライブドアブログの OGPタグの設定方法は以下記事に記載してありますのでご覧ください。

ライブドアブログに Facebookパーツを設置する方法 | C-through the Mac


OGPタグが正しく設定されているかどうかを確認する

OGPタグ設定後は、念のため正しく設定されているか確認をしましょう。


確認は、以下の "デバッガー" サイトへ移動します。


デバッガー - Facebook開発者


そして、テキストボックに調べたいウェブサイトの URL を入力し "デバッグ" ボタンをクリックします。


fb_ogp04

エラーと警告が表示されず、「情報の収集」ラベルのところで レスポンスコードの200番台が返っていれば OK です。念のため、設定したプロパティが「Object Properties」に表示されていることを確認しましょう。
 

+++++++++++++++++++++


これで OGPタグの設定と確認は終了です!

次は、ウェブサイトのファンを増やすために Like Box を設置します!


[Facebook] Like Box を設置して ウェブサイトのファンを増やす | C-through the Mac

スポンサーリンク