BloggerでOGP設定方法

先日、Facebookの「いいね！」ボタンを設置しましたが、Facebookにシェアやいいね！をした情報をもとにブログをたくさんの人に見ていただくためにはOGPを設定しなければならないという情報を検索で見つけました。

自分が実践してみた結果を踏まえて書きたいと思います。

OGPとは

The Open Graph Protocolの略で、SNS（ソーシャルネットワークシステム）とウェブページを連携させるためにコンピュータが解読できるようにしたもの。

OGPの基本情報

　１．og:title

　　　ページのタイトル情報

　２．og:type

　　　ページの種類

　　　一般的に使われるもの

　　　・website

　　　　　ウェブサイトのトップページに使われる。

　　　・article

　　　　　ウェブサイトのトップページ以外に使われる。

　３．og:url

　　　ページのURL（絶対パス）

　４．og:image

　　　Facebook等でシェアされたときに使用する画像を指定（絶対パス）

　５．og:site_name

　　　ページのサイト名

　６．og:description

　　　ページの説明を記述する

設定方法

自分が試行錯誤した結果、Bloggerのメタタグ情報の設定をしている場合、新たに設定しなおす必要がないコードもあったため、不足分だけ設定しました。

テンプレートからHTML編集にて＜head＞タグを下記に変更

<head>

↓

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

<b:include data='blog' name='all-head-content'/>の下に、下記コードを追加
なお、自分の場合トップページを個別ページにして、メールフォームの個別ページで追加したため、一般の方とは異なりました。

<!-- OGP -->
<!-- 投稿ページ -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
</b:if>
<!-- トップ -->
<b:if cond='data:blog.pageId == &quot;（トップページのページID）&quot;'>
<meta content='website' property='og:type'/>
</b:if>
<!-- アーカイブページ -->
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='article' property='og:type'/>
</b:if>
<!-- メールフォーム -->
<b:if cond='data:blog.pageId == &quot;（メールフォームのページID）&quot;'>
<meta content='article' property='og:type'/>
</b:if>
<!-- それ以外 -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageId != &quot;（トップページのページID）&quot;'>
　<b:if cond='data:blog.pageType != &quot;archive&quot;'>
　　<b:if cond='data:blog.pageId != &quot;（メールフォームのページID）&quot;'>
　　 <meta content='article' property='og:type'/>
   </b:if>
  　</b:if>
　</b:if>
</b:if>
<!-- 全てに適用 -->
<meta content='（画像ファイルの絶対パス）' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ja_JP' property='og:locale'/>
<!-- /OGP -->

以上、参考になるかどうかわかりませんがお役に立てれば幸いです。

＜２０１７．３．２９追記＞
デザインを変更