動作確認の仕方
Facebook デバッガーhttps://developers.facebook.com/tools/debug
ここで確認できます。Facebookアカウントがなくてもログインしてなくても使用できます。
疑問点と僕なりの回答
1.fb:app_idやfb:adminsの設定は必要か？
なくても問題なさそう2.og:imageで記事毎に画像を設定したい
・BloggerのOGPに「og:image」を記事毎に設定できるPHPスクリプト頑張ればできます。
3.og:descriptionを記事毎に設定したい
「og:description」は、敢えて設定しません。Facebookの仕様で、記事の始めの「p」タグで囲ってある部分が概要として認識されるので、記事を書く時は先頭のDescriptionにしたい部分を「p」タグで囲みます。
知っておきたいFacebookのOGPをBloggerに対応させる活用法
結論からいうと、設定しないほうがよいと思う。上記のとおり、記事の最初のpタグで囲まれた部分が自動でog:descriptionと採用されるという仕様を利用したほうがよいでしょう。
<p>表示したい部分</p>
こんな感じですね。過去記事分は、人気のあるものとかそういうのから少しずつ手作業で対応していけばよいかと思います。
pタグなので、段落単位で付けないとレイアウトが崩れると思います。
実際に試してみましたが、現時点でもその仕様で動作してます。
4.OGPなんか設定しなくても問題ないと思うんだけど？！
実は、僕はずーとそう思ってきました。でも、違うみたいなんです（汗）。OGPを設定すると友達のニュースフィードに「いいね！」が飛ぶ。
＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook「OGP」の活用術。
OGPを設定することで、いいね！のクリックへの寄与度が14.8倍に激増した計算になります。なんてこったい。今までどれだけ機会損失をしていたことやら…。
（続報）OGPを設定したらいいね！ボタンの効果が約15倍になった件 - ihayato.書店 | ihayato.書店
Bloggerの設定の仕方
1.headタグを書き換え
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
2.書き込む位置
<b:include data='blog' name='all-head-content'/>
3.貼り付けるコードコード
<!-- 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>
<!-- ページ -->
<b:if cond='data:blog.pageType == "static_page"'>
<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='og:locale' content='ja_JP'/>
<!-- /OGP -->
参考：
・知っておきたいFacebookのOGPをBloggerに対応させる活用法
・[blogger]いいねボタンを置いたらぜひ設定！OGPをHTMLに追加してみました。 - Sunabox
上記の２サイトを参考に、上記のように書いて適用しました。
記事のog:imageには、bloggerspiceという外部サービスを使用してるので気になる人は、固定画像のURLに書き換えてください
index,archive,static_pageがあるわけですが、あまり深い考えなく書いてるだけなので、よく検討してくださいね。
スポンサーリンク
コメントを残す