さー、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" の箇所まで移動します。
入力項目がありますので、それぞれ以下を入力します。
- Title
- Type
- URL
- Image
- Site name
- Admin
ウェブサイトのタイトルを入力します。ブログであれば、ブログのタイトルです。
ここは、名前だけを見ると何を選ぶか迷いますね・・・
ブログのトップページへの設置であれば、"blog" を選びその他ウェブサイトのトップページであれば "website" で OK です。
しかし、注意が必要なのはその中の各記事やブログのページのように複数ページ存在する場合は、"article" を選びます。blog, website は 1つのサイトやドメインにしか対応していませんので各ページに付けてしまうと思うように動作しない場合があります。
ウェブサイトの URL を記入します。
ウェブサイトの顔となる画像の置き場所を URL で記入します。アイコンなどが良いでしょう。
ウェブサイトの名前を記入します。トップページであれば、Title と同じでも OK です。
ここは、[Facebookとブログ連携はじめの一歩！] Webページ・アプリケーションの作成 でアプリケーションを作成し facebook にログインしていれば自動で表示されるはずです。
アプリケーションを作成して 0 と表示される場合は、ログインし直しましょう。
そして、"Get Tags" をクリックして HTML にコピペするコードを入手します。
これを、ウェブサイトやブログの HTMLソースの <head> と
</head> の間にコピペしちゃいましょう。
これで基本的な設定はほぼ終わりなのですが、さらに、補足して変更したり挿入した方が良い OGP のタグがあるので、以下はそれを説明します。
og:description タグを加える
ウェブページの説明を相手に伝えることで、ページを理解してもらえます。また、それにより「いいね！」ボタンもより押してもらえるようになるかもしれませんね。
そのためには、以下のように og:description タグコードを加えます。
<meta property="og:description" content="このサイトは Mac について色んなこと書いてるよ〜">
content の中身はウェブページを紹介する説明内容にします。
利用されているブログによっては、description をウェブページに記載されている最初の100字を入れるといった設定ができます。利用されているブログのヘルプなどを調べてみましょう。
各ブログページや記事に合う値を設定する
上記の "Get Tags" で生成できるコードは、特定のサイトやひとつのウェブページに対するコードです。
ブログや記事を多数扱うサイトでは、それぞれのページで内容を変えてそのページの情報を伝えたいですよね！
そこで、各ウェブページで変えた方が良い OGP タグを以下に記載します。
- Title
- URL
- Image
- Description
これは、各ブログや記事のタイトルを入れた方が良いでしょう。
各ページの URL を記入します。
これも、できれば各ページで使っている画像を使った方がよいでしょう。
前に追加すべきタグとして紹介しましたが、これも各ページにあった内容にしたいものです。
あとは、Type を前に説明したように、個別の記事やブログページでは "article" にしましょう。
でも、ブログや記事を扱うサイトでは、各ページにいちいち設定していくのは面倒ですよねー
そこで、各ブログの運営サイトや WordPress のようなブログソフトウェアではちょっとの設定でこれらを自動入力されるようにすることができます。(できないところもあるようですが・・・)
ライブドアブログの OGPタグの設定方法は以下記事に記載してありますのでご覧ください。
OGPタグが正しく設定されているかどうかを確認する
OGPタグ設定後は、念のため正しく設定されているか確認をしましょう。
確認は、以下の "デバッガー" サイトへ移動します。
そして、テキストボックに調べたいウェブサイトの URL を入力し "デバッグ" ボタンをクリックします。
エラーと警告が表示されず、「情報の収集」ラベルのところで レスポンスコードの200番台が返っていれば OK です。念のため、設定したプロパティが「Object Properties」に表示されていることを確認しましょう。
+++++++++++++++++++++
これで OGPタグの設定と確認は終了です！
次は、ウェブサイトのファンを増やすために Like Box を設置します！
コメント