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?)は特殊文字をそのままテンプレートに記述できないので"&quot;"などで記述しているためです)

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

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


各メタタグの要素を"expr:content='data:blog.xxxx'"で取得しているため、どうしても"tsuwamono.blogspot.jp"のドメインで取得されてしまうため、Facebookアプリの設定も全て".jp"で設定してあるのですが、デバッガーの警告が止まらない。


試しにOGPタグの"og:url"を".com"ドメインで設定するとこの警告は止まります。
どうやら"カノニカルURL"にリダイレクト前の".com"ドメインが入ってこないといけないみたい...。
この問題も今回はちょっと時間切れ。もう少し調べてみます。

 【Blogger ヘルプ】

【2013/9/30追記】
ソースを引用符でくくって見やすくしようと努力してみたんですが、やっぱりいまいち見にくいので素直に"SyntaxHighlighter"の力を借りて表示方法を変更しました。ww



0 件のコメント :

コメントを投稿