2021/2/13 情報を更新いたしました。
2021/2/16 情報を更新いたしました。

FacebookであなたのブログやWebサイトがシェア(投稿)された時に、記事タイトルやアイキャッチなどがFacebook上で正しく表示されるためには、Webサイト側でFacebook OGPの設定を行う必要があります。

フェイスブックのOGP

本稿では、Facebook OGPの設定手順を解説します。

OGPとは

OGPとはOpen Graph Protocolの略で、FacebookやTwitterやInstagramなどのSNSで投稿・シェアされた際に表示される規格のことです。

SNS上で画像や記事タイトルなどを綺麗に表示させるには、各SNSに対応したOGPを設定する必要があります。

Facebook OGP設定には、アプリID(app_id)と呼ばれる15桁の数字を使用します。当記事では、このアプリIDの取得方法について解説していきますので、OGP設定をされる方や、シェアデバッガーで下記のエラーメッセージが表示されてお悩みの方は、ぜひ当記事を参考に取得しましょう。

app_idが存在しない場合のエラーメッセージ

FacebookのアプリID(app_id)の取得手順

アプリIDを取得するには、「Facebook for Developers」の登録が必要です。こちらは普段、Facebookアプリ開発に使用しますが、今回はWebサイトのOGP設定のために使用していきます。

全体の流れは下記になります。順番にみていきましょう。

  1. Facebook for Developersに登録
  2. アプリの作成
  3. アプリを設定してID取得

Facebook for Developersの登録には、Facebookアカウントが必要です。先にFacebookでアカウントを作成し、電話番号認証を行っておきましょう。

Facebook for Developersに登録

下記よりアクセスして、画面右上の「スタートガイド」をクリックします。(ログアウトしている方は「ログイン」と表示されます。)

Facebook for Developersのトップページ

Facebook for Developers

下記の画面になるので、「次へ」を押します。電話番号認証がお済みでない方は、SMSまたは電話で電話番号を認証する作業があります。

Facebook for Developersの登録画面

チェックを入れて、「メールアドレスを認証」を選択します。

Facebookのメールアドレス認証

当てはまる役割を選択して「登録完了」を押します。今回は「開発者」を選択しています。

当てはまる役職を選択

アプリを作成する

Facebook for Developersの登録後は、アプリを作成していきます。ここでのアプリは、プロジェクトのようなもので、1つのアカウントで複数作成・削除できます。

「アプリを識別する番号 = アプリID」みたいなものですね。下記の画面が表示されたら「最初のアプリを作成」を押して、アプリを作成していきましょう。

Facebook for Developersのアプリ作成

「アプリを作成」を押します。

アプリを作成

次にアプリタイプを選択していきます。ここで選択するアプリの種類によって、拡張できる機能や権限などが異なりますので、今後の目的に応じて選択します。

今回は、OGP設定用にアプリIDを取得することが目的のため、「他のオプション」を選択しました。(他のオプションは、上記3つの用途に当てはまらない場合に使用します。)

アプリの種類を選択する

アプリの表示名を入力します。OGP設定だけが目的であれば、「サイト名+OGP」が分かりやすくて良いでしょう。入力できたら「アプリを作成」を押します。(表示名はいつでも変更できます。)

表示名を記入してアプリを作成する

セキュリティチェックを実行します。これでアプリを作成できました。

セキュリティチェック

基本的な設定とアプリIDの取得

最後にアプリの基本的な設定を行っていきます。管理画面から「ベーシック」を選択します。

アプリの基本的な設定

アプリに関する設定項目がありますので、「プライバシーポリシーのURL」にプライバシーポリシーページのURLを入力し、当てはまるカテゴリを選択します。

プライバシーポリシーとカテゴリーを埋める

そのまま下にスクロールして、ページ下部にある「プラットフォームを追加」をクリックして、「ウェブサイト」を選択します。

ウェブサイトを選択

ウェブサイトのURLを入力して「変更を保存」をクリックします。

ウェブサイトのURLを入力

最後に作成したアプリを開発中からライブモードに変更します。画面左上の「開発中」を押しましょう。

開発中をクリック

下記の画面が表示されるので、「モード切り替え」を押します。

ライブモードに切り替え

ライブモードにできましたので、アプリID(例:012301230123012)をコピーしましょう。

アプリIDをコピーする

アプリIDを入力してFacebook OGP設定を行う

後は、取得したアプリIDを使って、Facebook OGP設定を行うだけです。

TCDテーマをお使いの方は、テーマオプションの「Facebook OGPの設定」にて、アプリIDを入力し、OGP用画像を選択したら設定完了です。

TCDテーマのFacebook OGP設定画面

また、Facebook OGP設定の次に設定すべきなのが、Twitter Cardsの設定ですね。何それ?って方は下記に詳細を記載しておりますので、合わせてご覧ください。