結構前から、
FacebookのOGPとやらのワードは知ってはいたものの…。
実際設定の仕方が今一よく分かりませんでした。
そして、
なんのメリットがあるのか否かさえわかりませんでした。
多くのサイトやブログでOGPの設定をされているようですが、
私は、
特に必要ないだろうと考えていましたが、
この度、
なんとなぁく設定できたっぽいので、
備忘録として残しておこうと思います。
ただ単に、
スポンサーリンク
ソースを記述するのみになってしまうと思われます…。
まず、
HTMLソースの一番上の以下の部分に、
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='ja' 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'>
最後に半角スペースの入れて、
以下ソースを追加します。
xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'
その後、
headタグの中に<head>～</head>
以下OGPソースを貼り付けます。
<!-- OGP -->
<!-- 記事 -->
<b:if cond='data:blog.pageType == "item"'>
<meta property='og:type' content='article'/>
<meta property='og:title' expr:content='data:blog.pageName + " | " + data:blog.title'/>
<meta property='og:image' expr:content='"http://bloggerspice.appspot.com/postimage/" + data:blog.url'/>
</b:if>
<!-- ホーム -->
<b:if cond='data:blog.pageType == "index"'>
<meta property='og:type' content='blog'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta property='og:image' content='[ブログの固定画像URLを指定]'/>
</b:if>
<!-- アーカイブ -->
<b:if cond='data:blog.pageType == "archive"'>
<meta property='og:type' content='article'/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:image' content='[ブログの固定画像URLを指定]'/>
</b:if>
<!-- 全てに適用 -->
<meta property='og:url' expr:content='data:blog.url'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='fb:app_id' content='[作成したアプリのApp ID/API Key]'/>
<meta property='og:locale' content='ja_JP'/>
<!-- /OGP -->
そして、
HTML編集画面を保存します。
その後、
以下Facebookページにて、
OGPの確認をしてみます。
≫Debugger - Facebook開発者
それまでは、
画像などが一応取得されていましたが、
今回指定した画像とOGPのタグが確認できます。
設定後デバックしても表示が変わらない場合は、
キャッシュが残っているようなので、
更新してみると…。
ちゃんとOGP設定ができているか否かの確認ができるかと思います。
一応、
私の当ブログにおいても更新してみたところ、
指定の画像が表示されてOGPのmetaタグもできていました。
一応の設定はしてみたものの…。
いまだに良くは分かっていません。
以下OGP確認用のブックマークレットです。
＜参考サイト＞
≫FacebookのOGPをBloggerに対応させる方法 | Will feel Tips
※上記参照URL（サイト）を熟読しなおしてみないとと考えています。
コメント