BloggerにOGPを設定する方法です。
最近、FB以外でも利用されるようになったのでうちも導入してみようかな、ということで。調べてみたら意外とサクッとできてしまった感がありますが、一カ所だけ妥協しました。
OGPとは何ぞや、という話は省略して以下、手順など。
…その前に、下準備としてBloggerの設定を変更してmeta descriptionを有効にします。『っけねー！ まだしてねーやｔｈｐｒ！』という場合はこちらをどうぞ↓
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 == "index"'>
<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 == "item"'>
<meta property='og:type' content='article'/>
<meta expr:content='data:blog.pageName + "｜" + data:blog.title' property='og:title'/>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>
個別記事のタイトルをいじってない場合はOGPの設定より前に下の文字列を追加します。（この部分はカスタマイズですので自己判断で）
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/>｜<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