世界最大のSNSであるFacebookはユーザーが実名であることに加えて、「いいね！」や「シェア」による情報拡散力が大きな強みです。FacebookユーザーがWebページをシェアした際、その情報に訴求力があると、さらなるシェアが期待できます。SNSの特性を最大限に活用した情報拡散には、ユーザーからの「いいね！」や「シェア」をいかに有効利用できるかが、重要なポイントです。

今回は、Facebookにユーザーが「いいね！」や「シェア」をした場合の表示設定であるOGPについて解説します。OGPの設定次第で、マーケティングの成果をぐっと高められますので、ぜひご参考ください。

OGPとは

OGPとは、Open Graph Protocol（オープン・グラフ・プロトコル）の略称です。SNSでユーザーがWebページにリアクションをした際に、SNSに情報を伝えるために必要なプロトコルです。OGPの設定によって、Webページのタイトルや画像、説明文がSNS上に表示されるようになり、他のユーザーにとってページ内容がわかりやすくなります。

Facebookの場合、Webページに「いいね！」や「シェア」をしたユーザーとつながりのある友達が、ページに興味を持つ可能性があります。情報の拡散はもちろん、新たなファンの獲得にも関わる重要な要素です。FacebookなどのSNSによる情報の伝播を狙うなら、OGPは必ず設定しておきましょう。

OGP設定の基本設定について

OGPの基本共通設定をご説明します。
まずは、OGPを設定するための宣言が必要です。prefix属性を記述しましょう。

以下が設定するべき、OGPプロパティです。

1.タイトル

ページのタイトルを設定します。ここに設定した内容がシェアされたSNSに表示されます。

<meta property="og:title" content="タイトル" />

2.ページタイプ

ページの種類を指定します。トップページの場合は”website”を指定し、その他のページは”article”を指定します。

<meta property="og:type" content="種類" />

3.ページURL

ページのURLを指定します。絶対パスで指定してください。

<meta property="og:url" content="URL" />

4.サムネイル画像

サムネイルに使用する画像のURLを指定します。こちらも絶対パスです。

<meta property="og:image" content="サムネイルのURL" />

5.ホームページのタイトル

ホームページのタイトルを指定します。ページのタイトルではないので間違えないようにご注意ください。

<meta property="og:site_name" content=“ホームページの名称” />

6.ディスクリプション

ページのディスクリプション（説明文）を設定します。

<meta property="og:description" content="ディスクリプション" />

FacebookのOGP設定

次にFacebookでOGPを使用する際の専用設定をご説明します。以下のどちらかを設定しましょう。

fb:app_id

以下のApp-IDの部分に15文字の半角数字を設定します。

<meta property="fb:app_id" content="App-ID" />

App-IDの発行には開発者アカウントが必要です。まだ取得していない場合は、facebook for developersで取得しておいてください。Facebookの個人アカウントを持っていれば、電話番号を使って認証コードを入手し、すぐにアカウントを発行できます。

1.アプリを作成をクリックする
image9.png

開発者アカウントを持っている状態でfacebook for developersにアクセスし、「マイアプリ」から「アプリの作成」をクリックします。

2. アプリIDを設定する
image8.png

新しいアプリIDを作成する画面が表示されますので、表示名に名称を設定します。連絡先メールアドレスには事前に登録してあるものが表示されています。入力したら、「アプリIDを作成してください」をクリックします。

3.シナリオの選択
image10.png

シナリオの選択をする画面が表示しますが、ヘルプコンテンツの表示なので、これはスキップして構いません。

4.ダッシュボードが表示される（アプリIDをコピーしておく）
image4.png

ダッシュボードにアプリIDが表示されています。「fb:app_id」にはこれを指定しましょう。
そして、次に使用するホームページの設定を行いますので、「設定」の「ベーシック」をクリックしてください。

image3.png

5.設定画面にURLを登録する
ホームページのプライバシーポリシーのURLを入力してください。

image7.png

下にスクロールすると、「＋プラットフォームの追加」があるのでクリックします。

image1.png

ここでは「ウェブサイト」を選択します。

image11.png

上記のようにウェブサイトという項目が表示されます。サイトURLの登録欄がありますので、使用するホームページのURLを入力してください。入力したら、右下の「変更を保存」をクリックします。

6.アプリを公開する
image2.png

ページの上部に表示されているアプリIDの右側には「オフ」とあり「ステータス：開発中」になっているはずです。この「オフ」を「オン」に切り替えます。

7.確認画面を承認する
image6.png

アプリ公開の確認画面が表示されるので、該当するカテゴリを選択して、「承認」をクリックしてください。これでアプリの公開が完了します。

image5.png

先ほど「オフ」になっていたところが緑色に変わり、「オン」「ステータス：ライブ」になっているのを確認できるはずです。これで、OGPが利用できるようになりました。

fb:admins

Facebookの個人アカウントにリレーションしているIDです。以下のadminIDに15文字の半角数字を入力します。個人のものですので、「fb:app_id」を利用する方が無難でしょう。

<meta property="fb:admins" content="adminID" />

「fb:admins」を確認するサービスがありますので、簡単にチェックできます。「fb:app_id」の方が無難と考えますので、URLはここでは掲載しないでおきます。

OGPの画像サイズ（ogp image）

OGPに使用する画像のサイズは縦630px・横1200pxにしておきましょう。このサイズにしておけば、端末を問わず対応できます。OGPの画像はユーザーがコンテンツを視認する際に大きな役割を果たします。適切な画像サイズで用意しましょう。

「いいね！」とOGPにはどんな関係がある？

ユーザーが「いいね！」を押すことで、OGPに設定した情報がどのように影響するのか仕組みを知っておきましょう。OGPに指定したページのタイトルやURL、サムネイル画像は、ユーザーの友達のニュースフィードに表示されます。つまり、ニュースフィードからページ情報を知った友達がさらに「いいね！」を押すことで、ページ情報はさらに拡散されていきます。この影響力は、まさにSNSの強みと言えるでしょう。ページの内容がユーザーに共感できる次第で、大きな宣伝につながりますので、OGPとして表示される情報はじっくり検討する必要があります。

OGPを確認できる？デバッガーの使い方

OGPが正しく設定されているか確認できるツールが、facebook for developersに用意されています。以下のURLにアクセスして、OGPの設定を確認したいページのURLを入力して「デバッグ」をクリックします。設定に問題があれば、どのプロパティを修正する必要があるのか表示してくれるので便利です。

facebook for developers シェアデバッガー

OGPのキャッシュを更新する方法

OGPを設定しても、画像が正しく表示されないことや変更が反映されないことがあります。これはFacebookがOGP情報をキャッシュしていることが原因で発生してしまった可能性が考えられます。早速、キャッシュを更新してみましょう。更新にはOpen Graphオブジェクトデバッガーを使用します。以下にアクセスし、キャッシュを更新したいページのURLを入力しましょう。

Open Graphオブジェクトデバッガー

現状のOGP情報を表示する場合は「既存のスクレイピング情報を表示をクリックします。更新した情報を表示する場合は「新しいスクレイピング情報を取得」をクリックしてください。

まとめ

OGPを適切に設定すると、あらたなユーザーに自社のコンテンツを知ってもらえる確率がアップします。OGPを設定していないページは、思わず見逃してしまいますので、設定しているページとしていないページを比較してみると、重要性を実感できるでしょう。また、OGPは単に設定すればよいというわけではなく、実際にOGPによりシェアされる情報がユーザーの興味を惹くものであるか検討することも必要です。

コンテンツづくりに力を注ぐと同時に、コンテンツとユーザーの出会いをどのように作り出すかを考えなければいけません。Facebookを有効に活用するために、OGPを設定するようにしましょう。