手順
- 管理画面「テンプレート › HTML の編集」を開く。
- 「ウィジェットのテンプレートを展開」のチェックボックスをクリックする。
- <html>タグの属性に「xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'」を追加する。
こうなります。<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'> - <head>タグ内にOGP用の<meta>タグを追加する。
<!-- OGP -->
<!-- 記事 -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<!-- ホーム -->
<b:if cond='data:blog.pageType == "index"'>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
</b:if>
<!-- アーカイブ -->
<b:if cond='data:blog.pageType == "archive"'>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
</b:if>
<!-- 全てに適用 -->
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ja_JP' property='og:locale'/>
<!-- /OGP -->
必要なものだけ追加しました。 - 「テンプレートを保存」をクリックする
つぎに、Facebookにどのように解釈されるか、確認するツールがあるので、そのページで確認します。
http://developers.facebook.com/tools/debug
URLを入れて「debug」ボタンを押すと、チェック開始です。結果が表示されたら下の方にある「Object Properties」の項目が希望通りの内容になっているか確認します。
最後に、記事の書き方についての注意点です。
- OGPに表示したい画像を、記事の上に貼り付ける。
- OGPに表示したいdescriptionを、記事の「検索向け説明」欄に書く。
これで、いい感じにfacebookに表示されると思います。
「知っておきたいFacebookのOGPをBloggerに対応させる活用法」を参考にしました。
