Facebookの「OGP」の設定/確認方法をくわしく解説！

「OGP」とは、「Open Graph Protcol」の頭文字をとった略称です。FacebookやTwitterなどのSNSでユーザーがリアクションした場合に、Webページのタイトルやイメージ画像、そのページの詳細などの情報を伝えるために設定するプロトコルの事です。

「OGP」のHTML要素の設定を行うことにより、タイトルや画像、説明文などが表示されるようになりますので、ユーザーにWebページの内容を詳しく正確に伝え、多くの人に自分の記事を見てもらうことにつながります。

Facebookでは、Webページに「いいね!」や「シェア」をした友達とつながりのある友達がそのWebページに興味を持ってくれるという連鎖反応があります。

「OGP」の設定により、Facebookなどのユーザーが「いいね!」や「シェア」した友達などを通じて情報を拡散することができ、新たなフォロワーを獲得することにつながります。

Facebookの「OGP」は、リンク先のWebページ情報を詳しく表示を目立たせる仕組みですので、単なるURLの貼り付けよりもユーザーの興味を惹き付けることができ、クリック率が上昇します。

必然的により多くの人に記事を見てもらうことができ、情報拡散につながります。

「OGP」設定済のWebページと「OGP」の未設定でURLのみを貼り付けだけのWebページでは、Webページの中での目立ち方が全然違います。とりわけマーケティングの世界では「OGP」の重要性は一目瞭然です。

自分や自社のコンテンツや記事を多くの人に閲覧してもらいたいならば、ユーザーの興味を惹く効果的な「OGP」の設定は必須と言えます。

Facebookで「OGP」の設定をするためは、事前準備が必要です。

「OGP」の事前準備として、まだFacebookアカウントを作成していなければアカウント作成は必須です。その後、開発者のコミュニティである「FacebookDeveloper」に登録する事も必須です。

Facebookアカウントを新たに作成したい場合は、Facebookホーム画面よりアカウント登録をします。氏名やメールアドレス、パスワード等の情報を入力します。

入力したメールアドレスまたは電話番号に認証コードがすぐに送信されてきますので確認し、認証コードを画面に入力します。

認証コードを入力するとメールアドレスで登録した場合、すぐにメールに認証完了メールが届きますので、確認します。

Facebookアカウントの認証が完了すると、完了メールが届きます。メールの「スタート」をクリックすると、Facebookを始めることができます。

アカウント作成完了メールの「スタート」をクリックするか、Facebook公式サイトにアクセスするとFacebookのアカウント画面がすぐに起動しますので、登録情報などを確認します。

次に、Facebookの「プライバシーポリシー」画面を開きます。画面上部の検索タブに「プライバシーポリシー」と入力すると画面が開きます。

「プライバシーポリシー」画面左側のメニューの一番下にある「ページを作成」をクリックします。

自分の好きなカテゴリを選択し、新たにページを作成することが事前準備の一つです。

「OGP」設定の別の事前準備として、FacebookDeveloperの登録も行います。FacebookDeveloperの公式サイトにアクセスして、Facebook for Developerアカウントを作成します。

画面の指示に従って、FacebookDeveloperアカウントの認証を実行します。

アカウントの認証の実行が完了したら、事前準備は完了です。FacebookDeveloperの開発者コミュニティに参加することにより、オンラインで共同作業を行うことが可能になるなど、幅広い活躍の場が広がります。

事前準備が済んだら、「OGP」の基本設定を行います。Facebookの「OGP」の基本設定方法とは、HTMLコードをWebサイトやホームページのソースに埋め込むことにより実行する方法です。

「OGP」は、HTMLのmeta必須タグを使用して実装する必要があります。よく使用する必要な「OGP」の必須タグを確認しておく必要があります。Webページを作成する際には、サイト作成と「OGP」を同時設定しておくとよいかもしれません。

ページのタイトルを指定するには、「og:title」に入力します。<meta property = "og:title"content="タイトル名"/>の「タイトル名」の部分に表示したいページのタイトルを入力します。ここに入力したタイトルがSNS上で表示されます。

ページの種類を指定したい場合は、content属性のオブジェクトタイプ「og:type」に入力します。<meta property = "og:type" content = "ページの種類">のように指定します。

Webサイトのトップページに指定したい場合は、最後の方に「"website"」と指定します。トップページではないブログなどその他のページの場合は「"article"」と入力します。

ページのURLを指定したい場合は、「og:url」に入力します。<meta property = "og:url" content = "URL">の「"URL"」の部分に指定したいURLを指定します。注意点として、URLを指定する場合は、必ず絶対パスを使用します。相対パスはNGです。

必須タグ「og:image」に入力することにより、サムネイル画像を指定することが可能です。サムネイル画像を指定するメリットとは、SNS等でシェアされた時に指定した画像が表示されることで、認知度が高まる事です。

サムネイル画像の指定も、相対パスはNGですので、必ず絶対パスで指定するという注意点があります。<meta property = "og:image" content = "http://ferret-plus.com/images/logo.jpg>というような具合です。

ページのディスクリプションの設定もタグを指定することで可能です。ディスクリプションとは、説明文の事です。ページの説明文があるのとないのとでは、ユーザーの興味を惹きつけるかどうかに大きくかかわります。「og:description」に入力します。

必須タグ<meta property = "og:description" content = "説明文">の最後の説明文の部分に、効果的だと思える考え抜いた任意の文章を入力します。

ホームページのタイトル(サイト名)を指定したい場合は、必須タグ「"og:site_neme"」で指定します。<meta property = "og:site_name" content = "ホームページのタイトル名">に入力します。

注意点として、ホームページのタイトル名とページのタイトル名は同じではありません。

Facebookには、「OGP」の専用設定方法があります。この「OGP」専用設定方法には、「fb:app_id」や「fb:admins」という方法があります。どちらを使用するかは、メリットやデメリットを考えて自分で選択することができます。

「fd:app_id」とは、Facebookに「OGP」を表示させるための必須のプロパティです。「fd:app_id」を利用する事により、サイトやブログの管理者をFacebook側が把握することができます。

また、「いいね!」の数や閲覧ユーザーの数、閲覧が多い時間帯などのトラフィック分析を行っている「Facebookインサイト」を利用することができます。

<meta property = "fb:app_id" content = "App-ID">の「"App-ID"」の部分に、15文字の半角数字を設定します。App-IDを発行するためには、事前準備で取得しておいた「FacebookDeveloperアカウント」が必要です。

「FacebookDeveloperアカウント」作成の事前準備が済んでいるのであれば、「Facebook for developers」にアクセスします。画面の中の「マイアプリ」を選択し「アプリの作成」をクリックします。

新しいアプリID作成の画面が表示されたら、表示名に名称を設定します。最初の事前準備で登録しておいた連絡先メールアドレスが表示されていることを確認します。「アプリIDを作成してください」をクリックして、画面の指示に従います。

シナリオの選択画面は、スキップしても大丈夫です。ダッシュボードに「アプリID」が表示されていることを確認したら、このIDが「fb:add_id」に指定する「App-ID」となります。

「OGP」の専用設定方法として、「fb:admins」を利用することもできます。

「fb:admins」を利用する際に用いるのは、「adminID」です。「adminID」とは、Facebookの個人アカウントにリレーションしている個人IDです。この「adminID」は、個人情報が見られる可能性が大きいため非推奨IDで、あまりすすめられていません。

「adminID」を確認したい場合は、Facebookで自分のアカウント画面を開きます。そして、自分のプロフィール写真をクリックします。

拡大写真が表示されたページのURLの最後のように記載されている「&type」の前の15桁の数字が、自分の「adminID」です。この「adminID」は、FacebookのユーザーIDですので、個人情報が漏れる可能性が大ありです。

ですから、使用する際はきちんとデメリットを確認したうえで使用する事が必要です。「adminID」を確認する他の手順方法とは、ツールを利用することです。ツール画面を起動したら、Facebookの個人プロファイルURLを入力して、数値IDを検索します。

Facebookの個人プロファイルURLとは、Facebookホームページの左上にある自分の名前をクリックすると表示されるURLです。

画面上部のURLバーにある右側15桁の数字を確認します。

Facebookの「OGP」設定において画像を指定する場合、画像サイズに注意する必要があります。Facebookに関して言えば、アップロード後の画像ファイルサイズの問題や綺麗さの点から考えると、元の画像を減色処理しておく方がよいようです。

画像が表示されるまでの速度の面から考えても、減色処理はおすすめです。元の画像の良しあしというよりも、シェアされた後の表示される画像のサイズや質などの見栄えにこだわっている人のほうが、アクセス数を伸ばしているようです。

Facebookでは、「OGP」の画像サイズの設定として推奨しているサイズがあります。これは、デバイスの種類を問わずに対応できることなどを前提に推奨されているようです。

「OGP」の画像はユーザーの目に留まりやすく、ユーザーがコンテンツを視聴することを選択する際に大きな役割を果たします。ですから、Facebookの「OGP」推奨サイズ等に合わせた適切な画像サイズを用意することは重要です。

「OGP」の画像サイズに関してFacebookが推奨しているサイズは、縦630px/横1200pxです。これは、スマホの画像解像度が上がってきている事や、Retinaディスプレイの事などを踏まえて推奨しているようです。

しかし注意点として、Facebook側の「OGP」推奨画像サイズをただ単に用意しただけでは、iOS版デバイス、Android版デバイス、PC等様々な端末に対して常に適切な画像を提供することができるとは限りません。その場合は、他の方法を試してみます。

Facebookの「OGP」画像は、必ずといっていいほどトリミングされます。「OGP」のトリミングにより、こちら側の意図していない部分で切られて表示されない事も多々あります。

ですから、「OGP」でトリミングされることを前提とした画像サイズを用意しておくことが必要です。「OGP」画像が正しく表示されない事を防ぐ注意点とは、トリミングされたとしてもこの部分だけは見せたいという範囲を自分で守る必要があります。

そのためのベストな方法とは、正方形の画像の中心に1:1.91の画像を配置し、上下に余白を入れるという方法です。具体的に言えば、600px × 600pxの正方形の画像の中心に600px × 315pxの画像を配置する方法です。

設定した「OGP」画像をシミュレータすることができるという便利なツールがあります。そのツールを利用して「OGP」設定を完了する前に、「OGP」画像サイズが適切かどうかを確認することができます。

「OGP画像シミュレータ」ツールにアクセスして、ドラッグ&ドロップで画像を追加し、「OGP」画像サイズを確認します。

必須タグを指定して「OGP」の設定を完了したら、設定を確認することができます。また、たまにデバックしてみると「OGP」のエラーが出て、表示されないこともまれにあります。

ですから、すでに「OGP」設定を完了して表示していたとしても、定期的に正しく「OGP」設定がなされているかどうかを確認することは、自分のWebページのメンテナンスの一環として必要だと言えます。

「OGP」設定が正しくなされているかどうかを確認することができるツールが、Facebookにより公式に用意されています。「Facebook for developers」のサイトにアクセスします。

このツールを使用するためには、Facebookにログインしておきます。

「Facebook for developers」のサイトにアクセスしたら、「シェアデバッガー」画面を開きます。

「シェアデバッガー」画面を開いたら、「OGP」設定を確認したいページのURLを入力します。

URLを入力したら「デバッグ」をクリックするだけで、すぐに「OGP」設定を確認してくれます。デバッグ後の画面でエラーが出ていないかどうかを確認します。シェアされた際の「OGP」プレビュー画面も表示してくれます。

「OGP」設定が自分の好み通りの表示になっているかどうか、特に画像サイズなどを確認し、意図していないサイズでトリミングされていないかどうかをきちんと確認します。

もしも、「OGP」設定に何か不具合な問題が見つかった場合は、修正する必要があるプロパティの詳細を表示してくれますので、「OGP」必須タグの指定などをもう一度見直す必要があります。

きちんと必須タグを指定して「OGP」設定を完了したにもかかわらず、時には正常に表示されないというトラブルが発生する場合があります。

例えば、画像が正しく意図したとおりに表示されない場合や、エラーの確認後、必須タグを変更しても反映されない場合があります。表示されない原因として考えられるのは、Facebookが「OGP」情報をキャッシュしてしまっていることです。

表示されない原因の場合は、キャッシュを更新することで解決することができます。

「OGP」設定が正しく表示されない場合の対処法の一つとして、キャッシュを更新することができます。キャッシュとは、一度設定された情報を保存して、次回は保存された情報から表示するという仕組みの事です。

このFacebook側が持っているキャッシュの情報をクリアしてみます。キャッシュを更新するには、「Open Graphオブジェクトデバッガー」にアクセスします。そして、キャッシュを更新したいページのURLを入力します。

キャッシュを更新したいページのURLを入力した後、「既存のスクレイピング情報を表示」をクリックします。すると、現在設定されている「OGP」情報を表示します。

表示されない場合の対策でキャッシュを更新したい場合は、「新しいスクレイピング情報を取得」をクリックします。自動でキャッシュしたり、一括でキャッシュしたりする仕組みを作成することも可能です。

Facebookの「OGP」設定をするにあたって、注意点もあります。

幾つかの注意点をきちんと把握しておくことにより、自分の意図したとおりの「OGP」が表示されないという残念な結果を防ぐことができます。また、Webページへのアクセス数を伸ばすことにつながります。

Facebookで「いいね！」が50を超えている場合、Facebook Debuggerでキャッシュの更新をしたとしても、タイトルの変更が不可な場合があるようです。これは、Facebookの公式サイトでも情報が提供されています。

ですから、「OGP」のタイトルを変更したいと思う場合は、「いいね!」が50を超える前に必須タグの指定による変更を行っておく必要があります。

別の注意点は、「OGP」設定はページごとに必要だという点です。まとめて行うことができません。「OGP」指定のページのタイトルやURL、サムネイル画像などは、クリックしたユーザーのニュースフィールドに表示される仕組みになっています。

そこからさらに別のユーザーが「いいね!」をクリックして、ページ情報が拡散していきます。

ですから、ページごとに「OGP」設定は必要だという注意点を意識して、じっくり検討しながら「OGP」設定を行っていけば、ゆくゆくは大きな宣伝効果を期待することができます。