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に次のコードを書く。
(バックスラッシュは取り除いて下さい)

<meta property="og:title" content="{% if page.title %}\{\{ page.title \}\} - {% endif %}\{\{ 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="{% if page.ogp_image %}\{\{ page.ogp_image \}\}{% else %}\{\{ site.url \}\}\{\{ site.default_ogp_image \}\}{% endif %}" />
<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="{% if page.index %}blog{% else %}article{% endif %}" />
<meta property="fb:app_id" content="212934732101925" />

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

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

デバッガー - Facebook開発者

😀 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)