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


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


🚜 ローケルの設定

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

<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のデフォルトの画像パスを登録

default_ogp_image: 画像のパス

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

"og:title" content="{% if page.title %}\{\{ page.title \}\} - {% endif %}\{\{ site.title \}\}" />
"og:description" content="\{\{ description | strip_html | condense_spaces | truncate:150 \}\}" />
"og:url" content="\{\{ canonical \}\}" />
"og:image" content="{% if page.ogp_image %}\{\{ page.ogp_image \}\}{% else %}\{\{ site.url \}\}\{\{ site.default_ogp_image \}\}{% endif %}" />
"og:author" content="\{\{ site.author \}\}" />
"og:site_name" content="\{\{ site.title \}\}" />
"og:locale" content="\{\{ site.facebook_locale \}\}" />
"og:type" content="{% if page.index %}blog{% else %}article{% endif %}" />
"fb:app_id" content="212934732101925" />

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

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

デバッガー - Facebook開発者

🍮 参考リンク

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍