つわものぶろぐ: BloggerとOGPタグ

2013年9月29日日曜日

BloggerとOGPタグ

Webコンテンツの制作に携わったりする関係で、以前から設置しているFacebookの「いいね」ボタンにからんで1ヶ月ほど前にOGP（Open Graph Protocol）タグの実装をBloggerで試してみたのだが、全部の記事で「いいね」のカウントが同じ数字が出現するようになってしまっていた。（ちなみにOGPってのは「いいね」や「共有」したページの情報を受け渡すための仕様だそうです。）

OPGに対応させること自体は至極簡単で、ヘッダーに指定のメタタグを設置するだけで作業は完了します。うちのサイトだとこんな感じ。

<meta property='og:title' content='Tsuwamono-Blog'/>
<meta property='og:type' content='blog'/>
<meta property='og:url' content='http://tsuwamono.blogspot.jp/'/>
<meta property='og:image' content='[画像URL]'/>
<meta property='og:site_name' content='つわものぶろぐ'/>
<meta property='og:description' content='いろんな意味で、つわものになるための日々鍛錬の備忘録...。'/>
<meta property='og:locale' content='ja_JP'/>

ちなみにFacebookの「いいね」ボタンを記事毎に参照先URLを生成させるためにGoogle Bloggerの流儀どおり、テンプレート上の"href"の指定はドメイン+パスの代わりに

expr:data-href='data:post.url'

というテンプレートタグを使っているので、各ブログの記事毎にちゃんとURLが送信されるようになってます。

だけど、先のOGPタグをヘッダーに直書きしてしまうと"og.url"の値が全てのページの"カノニカルURL"に反映されてしまい、どの記事も同じ「いいね」の数が出現するというマヌケな状態なってしまうのでした。

で、ヘッダーのOGPタグもブログ記事毎に生成されるようにちょっと弄ります。

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta property='og:type' content='blog'/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:description' content='いろんな意味で、つわものになるための日々鍛錬の備忘録...。'/>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta property='og:type' content='article'/>
<meta property='og:title' expr:content='data:blog.pageName + &quot;|&quot; + data:blog.title'/>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>

<meta property='fb:admins' content='[FB管理者ID]'/>
<meta property='fb:app_id' content='[アプリID]'/>
<meta property='og:url' expr:content='data:blog.url'/>
<meta property='og:image' content='[画像URL]'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:locale' content='ja_JP'/>

このブログでは"ホーム"になるページはないのだけれど、最初の"<b:if>"〜"</b:if>"でサイトトップのOGP生成と、2つ目の"<b:if>"〜"</b:if>"でブログ記事毎のOGPを生成させます。

それ以降のメタは全ページ共通の項目です。

（煩雑に見えますが、Blogger(XML?)は特殊文字をそのままテンプレートに記述できないので"""などで記述しているためです）

これでなんとかデバッガーで確認してもちゃんと情報が羅列されるようになりました。
本来であれば、"ホーム"ではなくて、アーカイブページのOGPを生成したいところですが、また今後の課題とします。

あと、Blogger特有の不具合なんだろうけどFacebookのオブジェクトデバッガーで「解決する必要があるオープングラフの警告」が表示される。
これは本来Bloggerのドメインが"[ブログ名].blogspot.com"であるのに、閲覧ユーザー利用している国のトップレベルドメイン（日本からだと".JP"）へリダイレクトされることで起きているような気がするんです。