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

Facebookにおいて「OGP」を設定することにより、自分が作成したWebページなどにアクセスしてもらうための大きな宣伝効果を期待することができます。Facebookの「OGP」の事前準備や設定/確認方法、また表示されない場合の注意点等を解説します。

Facebookの「OGP」の設定/確認方法をくわしく解説!のイメージ

目次

  1. 1「OGP」とは
  2. リンク先のページ情報を表示させる仕組み
  3. 2【Facebook】「OGP」を設定するための事前準備
  4. 事前準備
  5. 3【Facebook】「OGP」の基本設定方法
  6. 必須タグ
  7. 4【Facebook】「OGP」の専用設定方法
  8. fb:app_id
  9. fb:admins
  10. 5【Facebook】「OGP」の画像サイズ
  11. 推奨画像サイズ
  12. 画像シミュレータで確認する手順
  13. 6【Facebook】「OGP」の確認方法
  14. 正しく設定されているか確認する方法
  15. 7【Facebook】「OGP」が正常に表示されないときの対処法
  16. キャッシュを更新する手順
  17. 8【Facebook】「OGP」の注意点
  18. 注意点
  19. 合わせて読みたい!Facebookに関する記事一覧

「OGP」とは

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

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

Facebook - ログインまたは登録

リンク先のページ情報を表示させる仕組み

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

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

URLのみよりクリック率が上昇

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

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

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

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

【Facebook】「OGP」を設定するための事前準備

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

‎「Facebook」をApp Storeで
Facebook - Google Play のアプリ

事前準備

アカウント登録をする

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

Facebookアカウントの作成

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

認証コードを入力する

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

「アカウントを認証」をクリックする

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

Facebookを始める

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

アカウント画面で確認する

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

プライバシーポリシーのページを作成

「プライバシーポリシー」画面を開く

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

「ページを作成」をクリックする

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

ページを作成する

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

FacebookDeveloperの登録

FacebookDeveloperアカウントを作成する

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

FacebookDeveloperアカウントの認証を実行する

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

パスワードを入力する

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

Facebook for Developers

【Facebook】「OGP」の基本設定方法

事前準備が済んだら、「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

ページの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 = "ホームページのタイトル名">に入力します。

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

ThumbFacebookとは?何ができるの?Facebookの特徴や基礎知識
みなさんはFacebookとは知っていますか。Facebookは多くの人が利用しているSNS...

【Facebook】「OGP」の専用設定方法

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

fb:app_id

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

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

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

App-IDの発行手順

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

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

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

fb:admins

Admin IDを確認する

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

個人情報が見られる可能性があるため非推奨

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

Admin IDを確認する手順

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

プロフィール写真をクリックする

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

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

名前をクリックする

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

15桁の数字を確認する

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

https://findmyfbid.com/

【Facebook】「OGP」の画像サイズ

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

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

推奨画像サイズ

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

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

縦630px横1200px

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

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

正方形の中に1:1.91の画像を配置する

設定を指定する

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

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

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

画像シミュレータで確認する手順

OGP画像をシミュレータする

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

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

OGP画像シミュレータ | og:image Simulator

【Facebook】「OGP」の確認方法

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

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

正しく設定されているか確認する方法

シェアデバッガーにアクセスする

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

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

https://developers.facebook.com/

facebook for developers シェアデバッガーにアクセス

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

URLを入力しデバッグをクリック

確認したいページのURLを入力する

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

「デバッグ」をクリックする

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

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

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

Thumb【Facebook】プライバシー設定の確認画面を刷新!設定が簡単に!
Facebookでは「プライバシー設定」の確認画面が刷新されました。Facebookが「プラ...

【Facebook】「OGP」が正常に表示されないときの対処法

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

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

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

キャッシュを更新する手順

「Open Graphオブジェクトデバッガー」にアクセスする

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

キャッシュを更新したいURLを入力する

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

現在の「OGP」情報を表示する

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

「新しいスクレイピング情報を取得」をクリック

「新しいスクレイピング情報を取得」をクリックする

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

ThumbFacebookの管理設定方法と使い方まとめ
お友達との情報共有や日常の投稿で便利に利用するFacebook。タイムラインやプロフィールの...

【Facebook】「OGP」の注意点

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

注意点

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

キャッシュの更新をしてもタイトル変更不可な場合がある

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

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

ページごとにOGP設定が必要

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

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

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

合わせて読みたい!Facebookに関する記事一覧

ThumbFacebook共同創設者が「フェイスブックは解体されるべき」と提言!
Facebookの共同創設者であるクリス・ヒューズ氏はFacebookについて解体すべきだと...
Thumb「Instagram/Facebook/Twitter」の違い!3大SNSの特徴も解説!
世界でも莫大なユーザー数を誇る「Instagram」「Facebook」「Twitter」は...
ThumbFacebookの管理設定方法と使い方まとめ
お友達との情報共有や日常の投稿で便利に利用するFacebook。タイムラインやプロフィールの...
ThumbFacebook Messengerで「スター・ウォーズ」のスタンプ/ARエフェクトが利用可能!
Facebook Messengerで「スター・ウォーズ」のスタンプやARエフェクトが無料で...

関連するまとめ

Original
この記事のライター
kittiko
新しい事にチャレンジすることが好きです。

人気の記事

人気のあるまとめランキング
インステ