2017年1月5日木曜日

BloggerでOGP設定方法 | 日々のメモ帖 by holidaybuggy1980 holidaybuggy1980
300 300

BloggerでOGP設定方法

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

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

OGPとは

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

OGPの基本情報

 1.og:title
   ページのタイトル情報

 2.og:type
   ページの種類
   一般的に使われるもの
   ・website
     ウェブサイトのトップページに使われる。
   ・article
     ウェブサイトのトップページ以外に使われる。

 3.og:url
   ページのURL(絶対パス)

 4.og:image
   Facebook等でシェアされたときに使用する画像を指定(絶対パス)

 5.og:site_name
   ページのサイト名

 6.og:description
   ページの説明を記述する

設定方法


自分が試行錯誤した結果、Bloggerのメタタグ情報の設定をしている場合、新たに設定しなおす必要がないコードもあったため、不足分だけ設定しました。
  1. テンプレートからHTML編集にて<head>タグを下記に変更
<head>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  1. <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 -->

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

<2017.3.29追記>
デザインを変更


  • このエントリーをはてなブックマークに追加
  • list


ブログランキング・にほんブログ村へ

0 件のコメント:

コメントを投稿

Ads by A8.net