tchikuba's blog

クリエイティブが輝ける組織をエンジニアリングする

Octopressでfacebook用OGPを設定する方法

Octopressでfacebook用OGPを設定する際、意外と引っ掛かるところがあったので手順をまとめておきます。

OctopressでOGP設定する際に参考にしたサイト

手順

1. facebookのapp_idを取得する

まずfacebookアプリのapp_idを取得します。 取得方法はfacebookのOGP設定について等を参照すると良いかと。

  • facebookアプリの設定でApp Domainsを指定しないとJSエラー発生が発生するのでご注意を。
  • +Add Platformをクリックしてウェブサイトを選択してサイトURL``Mobile Site URLを設定してからApp Domainsを入力しないと順序が逆だとfacebook側で警告が出ますのでご注意を。

2. OGP用の画像をアップロードする

OGPのog:imageプロパティに指定する画像をアップロードします。

3. _config.ymlを編集する

facebook_app_id, facebook_locale, default_ogp_imageをセットします。

_config.yml
1
2
3

facebook_app_id: app_id ←手順1で取得したapp_id
facebook_locale: ja_JP
default_ogp_image: /images/xxx.jpg ←手順2でアップロードした画像の相対パス

4. source/_includes/facebook_like.htmlを編集する

以下のように手順3でセットしたfacebook_localeとfacebook_app_idを動的になるよう修正します。

source/_includes/facebook_like.html
1
2
3
4
5
6
7
8
9
10

{% if site.facebook_like %}
<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/{{ site.facebook_locale }}/all.js#appId={{ site.facebook_app_id }}&xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
{% endif %}

5. source/_includes/custom/facebook_ogp.htmlを編集する

以下のようなOGPをセットします。

source/_includes/custom/facebook_ogp.html
1
2
3
4
5
6
7
8
9

<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="{{ site.url }}{% if page.ogp_image %}{{ page.ogp_image }}{% else %}{{ 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="{{ site.facebook_app_id }}" />
  • og:imageはフルパスで指定

6. source/_includes/head.htmlを編集する

上記facebook_ogp.htmlをインクルードする記述を</head>の直前に追加します。

source/_includes/head.html
1
2
3

  (略)
  {% include custom/facebook_ogp.html %}
</head>

また、”authorに関するOGPが設定不十分だよ”という以下の警告が出ます。

“The meta tag on the page was specified with name ‘author’, which matches a configured property of this object type. It will be ignored unless specified with the meta property attribute instead of the meta name attribute.”

これを解消する為には以下のmetaタグを削除します。

source/_includes/head.html
1

  <meta name="author" content="{{ site.author }}">

以下参考記事です。

7. 記事をアップしてOGPデバッガーで確認する

facebookが提供しているOGPデバッガーで OGPが意図するように設定されているか確認します。

以下はデバッガーで確認するとよく出る警告です。

“og:image should be larger. Provided og:image is not big enough. Please use an image that’s at least 200x200 and preferably 1500x1500.”

以上