酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

OctopressでFacebookシェア用にOGPを設定する

Where?

OctopressにFacebookシェア用にOGPを設定する方法をまとめました。FacebookのOGPを設定すれば、Facebookでの共有時に適切な情報が表示されるようになり、シェアが広まりやすくなります。ぜひトライしてみて下さい!


ローケルの設定

source/_include/facebook_like.htmlのローケルがen_USとなっていた場合は、ja_JPに修正。

source/_include/facebook_like.html
1
2
3
4
5
6
7
8
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#appId=212934732101925&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

OGPの設定

_config.ymlにFacebook投稿時の画像となるog:imageのデフォルトの画像パスを登録

_config.yml
1
default_ogp_image: 画像のパス

source/_include/custom/facebook_ogp.htmlに次のコードを書く。
(バックスラッシュは取り除いて下さい)

source/_include/custom/facebook_ogp.html
1
2
3
4
5
6
7
8
9
<meta property="og:title" content="\{\{ page.title \}\} - \{\{ site.title \}\}" />
<meta property="og:description" content="\{\{ description | strip_html | condense_spaces | truncate:150 \}\}" />
<meta property="og:url" content="\{\{ canonical \}\}" />
<meta property="og:image" content="\{\{ site.url \}\}\{\{ site.default_ogp_image \}\}" />
<meta property="og:author" content="\{\{ site.author \}\}" />
<meta property="og:site_name" content="\{\{ site.title \}\}" />
<meta property="og:locale" content="\{\{ site.facebook_locale \}\}" />
<meta property="og:type" content="article" />
<meta property="fb:app_id" content="212934732101925" />

設定をFacebookのデバッカでチェック

Facebookが提供しているデバッカを使うと、簡単に設定情報が正しいか確認できます。

デバッガー - Facebook開発者

Special Thanks

おすすめの書籍