2013年11月10日

BloggerにOGPを設定する方法

BloggerにOGPを設定する方法です。
最近、FB以外でも利用されるようになったのでうちも導入してみようかな、ということで。調べてみたら意外とサクッとできてしまった感がありますが、一カ所だけ妥協しました。
OGPとは何ぞや、という話は省略して以下、手順など。

…その前に、下準備としてBloggerの設定を変更してmeta descriptionを有効にします。『っけねー! まだしてねーやthpr!』という場合はこちらをどうぞ↓
Bloggerでmeta descriptionを個別に設定する方法|R14

下準備が済んだらテンプレートのHTMLを編集します。まず、

<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'>

の部分を

<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' prefix='og: http://ogp.me/ns#'>

に変更します。
次にホーム、個別記事、共通設定の順にタグを追加していきます。なお、アーカイブについては省略します。本当に必要だと思う方はググってください。

ホーム用タグ
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta property='og:type' content='blog'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta name='description' content='ブログ全体の説明'/>
<meta property='og:description' content='ブログ全体の説明'/>
</b:if>

下準備のところの参考記事で「サイトの説明文は空欄に」と書きましたが、ここでちゃっかり設定しています。こうすることで、ブログのホームを表示させた時にだけ有効になるmeta descriptionができあがります。さらにog:descriptionにもコピペで説明文を持ってくれば大丈夫です。

個別記事用タグ
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta property='og:type' content='article'/>
<meta expr:content='data:blog.pageName + &quot;&#65372;&quot; + data:blog.title' property='og:title'/>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>

個別記事のタイトルをいじってない場合はOGPの設定より前に下の文字列を追加します。(この部分はカスタマイズですので自己判断で)
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/>&#65372;<data:blog.title/></title>
</b:if>
これで記事のタイトルとog:titleがイコールになります。また、最初に書いた下準備が終わっていればog:descriptionはmeta descriptionとイコールになります。

共通タグ
<meta property='og:image' content='画像のURL'/>
<meta property='og:url' expr:content='data:blog.url'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:locale' content='ja_JP'/>

画像については妥協しました。うちの設定だと共通でプロフィールの画像が表示されるようになっています。個別記事毎の画像を持ってくる方法もあるにはあるようですが、外部ツールを利用するみたいなので諦めました。

最後に、ちゃんと設定出来てるかどうかチェックします。こちらのブックマークレットが便利だったので使わせてもらいました。
OGPタグチェックのブックマークレットを作成しました! - SINAPlog