FacebookのOGP設定で集客を更に加速！

はじめに・・・

ホームページ担当者の皆様、運営しているホームページのOGP設定をおこなっていますか？

OGPとは「Open Graph protocol」の略称です。FacebookやTwitter、Google+、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。

そこで今回は、最新のFacebookの仕様に準ずるOGPの設定や確認方法、注意点などをご紹介します。

OGPとは？

OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。
シェアされたときに、URLだけの場合より目立つためクリック率が上がります

OGPの設定の前に注意事項

WordPressを利用している方で、OGP設定が簡単にできるプラグイン「WP-OGP」「Open Graph Pro」といったものがありますが、デフォルトの状態で、デバッガで確認すると、「解決する必要があるオープングラフの警告」が出るので、
個人的にはオススメしません。

警告が出ない「Facebook」という名称の公式プラグインもありますが、
面倒な設定な設定があるので、やはり推奨しません。

header要素に記述する、といったことがわからない方は利用するのも手ですが、そもそもわからなければ「調べる」または「分かる人」に任せたほうが」よいかと思います。

OGPの設定方法

OGPをの設定方法は極めてシンプルで、<meta>要素にOGPタグを挿入することで完了します。以下順を追って設定方法を説明します。ページ毎に設定が可能です。

1.<html>要素にprefix属性の記述を追加
OGPを使う宣言を行います。最初何のことかわからなくても後で説明しますので大丈夫です。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

1	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

WordPressを利用している方は大半はheader.phpに記述することになるかと思います。

2.プロパティの設定をする。
OGPの設定項目はいくつかありますが、必ず設定をしなければならない項目（プロパティ）があります。
それが「og:title」「og:type」「og:url」「og:image」の4つです。
以下のように設定をします。

<meta property="og:title" content="ここにタイトル" />
<meta property="og:type" content="ここにタイプ" />
<meta property="og:url" content="ここにページのURL" />
<meta property="og:image" content="ここにサムネイル画像のURL" />

以下、各項目の説明をします。

●og:title
名前の通りですが、content属性にそのページのタイトルを記述します。

●og:type
content属性に、オブジェクトタイプを使います。以下のどちらかを使えばよいでしょう。
website:一般的なWebサイトのトップページを表します。
article:記事を表します。ブログなどの記事に対して設定するときはこれを選びましょう。

他にもありますので知りたい方はこちらからどうぞ（英語のサイトです）

●og:url
シェアしたいURLを絶対パスで記述します。指定しないと自動で取得されますが設定しましょう。

●og:image
これも想像の通り、シェアされた時に表示される画像の設定で、画像のあるURLの絶対パスを記述します。
画像のサイズの指定もできます。Facebookでは画像を自動にリサイズしてしまうので、適切なサイズを指定した方が思い通りに表示できるので、可能な限りサイズもしてしましょう。

Facebookでは画像サイズに1200×630pxを推奨しています。（2014年９月からこの仕様）
これは高解像度デバイスで適切に表示するためです。このサイズで画像を指定すると大きく表示されユーザーの講読率は上がるかもしれません。大きいサイズで画像を表示する最低ラインは600×315pxです。これ以下だと表示される画像は小さくなります。小さい画像の最低ラインは200×200pxです。

Facebookでは画像の比率を「1.91:1」を推奨しています。

3.オプションプロパティを設定する
設定が必須ではありませんが、設定した方がよい項目を抜粋して以下の紹介します。

<meta property="og:site_name" content="ここにサイト名" />
<meta property="og:description" content="ここにページのディスクリプション" />

1 2	<meta property="og:site_name" content="ここにサイト名" /> <meta property="og:description" content="ここにページのディスクリプション" />

●og:site_name content属性にはサイト名を入れます。

●og:description ページの説明を記述します。meta descriptionと同じ内容を入れれば問題はないでしょう。

Facebook用のOGP項目

FacebookにOGPを設定するには、上記より更に「fb:admins」または「fb:app_id」というプロパティを追加する必要があります

「fb:admins」と「fb:app_id」はどちらかで構いませんがfb:admins」の場合adminIDという個人の管理用のIDを使うことになるため、個人情報を晒しているようなものです。
従って特別な事情がない限りは「fb:app_id」を使ってください。

「fb:app_id」の設定方法

ページと紐付けたいFacebookのアプリケーションIDで指定する記述です。
fb:app_idで設定する場合は、まずapp_idを取得する必要があります。取得した上で

<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />

1	<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />

と記述してください。

app_idの取得方法はちょっと手間が掛かるので下記サイトを参考に取得してみてください。

app_idの取得の仕方

fb:adminsは私はオススメしませんので紹介はしません。
やり方は同じで、IDの取得、設定を行うという手順になります。

OGP設定が正しいか確認する方法

OGPの設定を確認するためのFacebook公式ツール「Open Graph Debugger」を使います。

Open Graph Debugger – Facebook Developers

通称はFacebookデバッカー。
使い方はOGP設定を確認したいページのURLを入力して「Debug」ボタンを押すだけ（以下「デバック」）。不具合があればエラーの詳細が表示されるので、それを元にOGP設定を見直してみましょう

OGP設定のキャッシュ方法

OGP設定をFacebookが反映してくれない場合は、Facebook側がもっているキャッシュを更新する（クリアする）必要があります。
最新のFacebookデバッカーの画面キャプチャを用いてキャッシュの更新方法を解説していますので以下サイトをご参考ください。

FacebookにキャッシュされたOGP設定を手動・自動でクリアする方法

OGP設定に関するまとめ

OGP設定をすることにより各種SNSのウォールやニュースフィードに「この記事はこういった内容です」と視覚的なわかりやすさやインパクトを与えることができます。
こういったことによりSNS上で拡散されれば、より多くの人の目に触れ、最終的に集客にもつながっていきます。もはやOGP設定はホームページの運営において必須の設定といっても過言はないでしょう。
今後Facebookの仕様で変わる事もおおいに考えられますが、最新のFacebook仕様に準ずる設定や確認方法をまとめてみました。

是非活用してみてください。