TOP » Blog

« ソーシャルブックマークボタン(AddThis)の設置 | Monthly List | タイトルバナー画像のランダム表示 »

FacebookのOpen Graph protocol対応

2011/07/15 : Blog Web

open_graph_protocol_logo.png

ソーシャルブックマークボタン(AddThis)の設置で勢いがついて、今度はFacebook, mixi, GREEなどで使われているOpen Graph protocol (OGP)対応をすることにしました。

この対応をするとFacebookなどでBlog記事がシェアされた際、こちら(Blog作者)の意図通りにFacebookなどのSNS上に表示されるというメリットがあります。

参考にしたのは、以下のFacebook開発者ページ。


で、ジェネレータの力を借りつつ見よう見まねで作ってみたのが以下のタグです。
これを記事の個別ページのヘッダに埋め込みます。

<meta property="og:title" content="<$MTEntryTitle$>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="<$MTEntryPermalink$>" />
<meta property="og:site_name" content="<$MTBlogName encode_html="1" trim_to="19"$>" />
<meta property="og:description" content="<$MTEntryExcerpt$>">
<meta property="fb:admins" content="100000028796766" />

以下、それぞれのタグを簡単に解説。

og:title
記事タイトル。このBlogを構築しているMovableTypeには<$MTEntryTitle$>というタグがあるので、これを使用。
og:type
対象となるサイト/ページのタイプを記載。タイプについてはhttp://developers.facebook.com/docs/opengraph/#typesに列挙してありますが、ここは無難に「blog」を選択。
og:url
ページのURL。これもMoVableTypeの<$MTEntryPermalink$>タグを利用。
og:site_name
サイト名。サイト名を変えることはないと思いますが、全ページのテンプレートで<$MTEntryBlogName$>タグを使用しているので、ここでも例外なく同様に。
og:description
記事概要。同じく<$MTEntryExcerpt$>タグを利用。
fb:admins
FacebookのIDを記載することで、自分の記事がどれだけFacebookでシェアされたかトラックできるとのこと。自分のFacebook IDを記載。

あとog:imageというタグがあり、サムネイル画像を設定できるとのことだったのですが、実際にFacebookで試してみたら無くても支障なさそうだったので割愛。

タグの挿入が終わったらページを再構築して、Facebookが提供しているURL Linterでチェック。
全てのページを再構築すると大変なので、適当なエントリーを一つだけ選んでやればよいかと。

あと忘れがちなのが、以下のタグをhtmlタグに埋め込むこと。

<html xmlns:og="http://ogp.me/ns#">

実際にFacebookで投稿してみたら思い通りに行きました。

個人のサイトではあまり必要ないかもしれませんが、Facebookを使って発信した情報シェアしていきたい、という方にはお勧めかと。

Bookmark and Share

Update 2014/07/18

トラックバック

トラックバックURL:


sakura