FacebookのOGPを設定したい！簡単な方法を教えて
RSSやMultiplex広告（アドセンス）の画像が表示されないのでOGPを設定したい
今回ははそんな方のための記事です。
FacebookのアプリIDを取得することでOGPを設定することができます。
- OGPをしっかり設定してアクセスの流入を増やしたい（SNS運用）
- RSSの記事一覧画像が表示されないエラーやアドセンスの「Multiple広告（旧関連コンテンツ）」に画像が表示されずテキストだけになってしまう問題を解決したい
FacebookアプリIDの取得は開発者向けですが、アプリIDを取得するだけなら難しくありません。手順を見ながら設定すれば初心者でもできます。
OGPを設定するためにはFacebookアプリIDが必要です。そのFacebookアプリIDを取得するためにはFacebook developersに登録する必要があります。
この記事では「Facebook developers登録」から「OGP設定まで」の流れを5つの手順で解説します。
Facebook developersの操作画面は度々かわります。この記事は2022年5月時点の最新情報です。
初心者でもわかるように解説していきます。それでは見ていきましょう。
「OGPとは？」できること
OGPとは「Open Graph Protcol」の略で、SNS上でシェアされた時のタイトル、本文、画像、URLを自由に表示させたりできる仕組みです。（HTML要素）
FacebookだけではなくTwitterやインスタグラムにも設定できます。
OGPを設定しないとFacebookやTwitter側の設定でシェアされてしまうことになるので自分の思惑どおりの表示にならない場合があります。これを自分で設定することで、興味を引きやすくなり結果アクセスの流入につながるわけです。
「Facebook developers（Facebookデベロッパー）」とは？
Facebook developersは、Facebookアプリを開発するためのサービスやツールを提供するプラットフォームです。
OGP設定に必要なFacebookアプリID（Facebook app id）を取得するには、Facebook developersに登録する必要があります。
Facebook developersのポイントとOGPを設定するためになぜFacebook developersに登録する必要があるのかという理由をまとめました。
まずはポイントから。
- 開発者向けのプラットフォーム
- Fcebookアプリとは？【Facebook上で動くアプリの総称。Facebook機能を拡張させることができる】
Facebookをより便利に機能を拡張させるために使うのがFacebookアプリと覚えておけばいいでしょう。
そしてOGPを設定するためにFacebook developersを使う理由です。
- 「Facebook developers」に登録すると「Facebookアプリ」が作成できる
- 「FacebookのOGP」を設定するためには「FacebookアプリID」が必要
- 「Facebookアプリ」管理画面から「FacebookアプリID」を確認することができる
まずはこのFacebook developersに登録する必要があるわけですね。
①・②「Facebook developers」登録方法
それではFacebook developers登録からOGPを設定するまでの流れを見ていきましょう。
5つの手順で完了します。
①Facebookアカウントにログイン
まずはFacebookアカウントにログインします。
[Facebookログインページ]⇒ https://www.facebook.com/
Facebook developersを利用するにはFacebookの個人アカウントが必要です。ない場合は作成しておきましょう。
ここではビジネス向けのアカウント、Facebookページをおすすめします。
Facebookページには以下のメリットがあります。
- 完全無料（Facebook広告は有料）
- 複数アカウントを作成できる（上限なし）
- 検索結果に表示される（インデックスされる）
- 複数人で管理できる
- ブランド力の確立
- ユーザーとのコミュニケーションの場が作れる
②「Facebook developers」に登録
まずはFacebook developersにログインします。
「facebook for developers」ログインページ
https://developers.facebook.com/
右上の「スタート」をクリック。
「Facebook for Developersアカウントを作成しよう」という画面に切り替わります。「次へ」をクリック。
「メールアドレスを認証」をクリック。開発者向けのメールを受け取りたいのであればチェックを入れます（任意）
次に、あなたに当てはまるものを選択します。特に当てはまるものがない場合ば「その他」→「登録完了」でいいでしょう。
③「Facebookアプリ」を作成
続いてFacebookアプリの作成です。
Facebook developersに登録したらこのような画面になります。「アプリを作成」をクリック。
アプリのタイプを選択です。
一番下の「なし」から「次へ」を選択しましょう。
「ビジネス」でも作成できるかと思いますが「なし」は、全てのアクセス許可や機能を使用できるタイプです。一度タイプを変更したら、後から変更できないのでここでは「なし」を選択するのがいいと言えます。
次に、基本情報を入力する画面です。
「表示名」は任意のアプリ名です。わかりやすくブログ名などでいいでしょう。
「ビジネスマネージャーアカウントが選択されていません」と表示されていますが、問題はありません。そのまま「アプリを作成」をクリック。
④FacebookアプリIDをコピー
アプリを作成するとこのような画面に切り替わります。
FacebookアプリIDをコピーする前に簡単な設定だけしておきましょう。
「設定」→「ベーシック」をクリック。
次の画面で「プライバシーポリシーのURL」に運営するブログのURLを入力。「カテゴリ」からブログに合うカテゴリを選択します。
そのまま一番下までスクロールします。
すると「＋プラットフォームを追加」がありますので、そちらをクリック。
ここは「Website」を選択「次へ」と進みます。
するとウェブサイトという項目ができるので「サイトURL」にブログURLを入力します。
ブログURLを入力したら「変更を保存」して全ての設定変更を保存します。
続いて上の「開発中」を「ライブモード」に変更します。
「開発中」をクリックすると、このように「ライブモードに切り替えますか？」と表示されるので「モード切り替え」をクリックします。
▼これでライブモードに切り替わりました。
ライブモードにすることで、Facebookアプリが公開されるという認識で合っているかと思います。
くわしくは公式を参考にしてください。
ライブモードに切り替えると「対応が必要です」と表示されますね。これも対応しておきましょう。
データの使用状況の確認とは
Facebookアプリ開発者は、データの使用状況の確認を毎年する必要があるとされています。アプリ内のルールや開発者ポリシーに準拠していることを宣言するものです。
Facebookアプリをしばらく使用してから宣言するでもいいでしょう。ただし、データの使用状況の確認の宣言には期限がありますので忘れずにしておきたいところです。
データの使用状況の確認がとくに必要ないという方は「⑤FacebookアプリIDを貼り付ける」の手順に進みましょう。
参考 : データの使用状況の確認 | Meta for Developers
Facebookアプリをライブモードにするとすぐにポップアップで表示されるので対応しておきましょう。
先ほどの画面から「開始する」をクリックします。
画面が切り替わります。確認したら「開始する」をクリックです。
まず「public_profile」や「email」にチェックを入れます。その下にアプリ内のルールや開発者ポリシーがあるので一応確認しておきましょう。
2つのチェックとアプリ内のルールや開発者ポリシーの確認をしたら「送信」をクリックします。
これでデータの使用状況の確認の宣言が完了です。
⑤FacebookアプリIDを貼り付ける
最後にFacebookアプリIDを貼り付ける手順です。WordPressにOGPを設定するには、FacebookアプリIDを貼り付ける必要があります。
OGPはHTML要素です。メタタグなのでにコードを記述する必要がありますが、知識がないとわからないと思います。
初心者向けで2つの方法がありますが、ここでは①のCocoonを使った方法で解説します。
- WordPressテーマ「Cocoon」から設定する
- WordPressプラグイン「All in One SEOから設定する
cocoonは無料で利用できる高機能なテーマです。当ブログも実際に利用しています。
公式ダウンロードページ⇒ https://wp-cocoon.com/downloads/
CocoonからOGPを設定
それでは早速Cocoonから設定していきましょう。
WordPress管理画面にログイン。左メニューから「Cocoon設定」を開きます。
「OGP」を選択。
「OGPの有効化」はデフォルトでチェックが入っています。「Facebook APP ID」に、さきほど「Facebook developers」で取得したFacebookアプリIDを貼り付けます。
あとは保存して、これで完了です。CocoonはOGPの設定に対応しているのでFacebookアプリIDを入力するだけです。貼り付けは簡単ですね。
まとめ
最後にまとめです。
この記事では以下2つの読者の悩みを解決しました。
アドセンスの「Multiple広告（マルチプレックス）」に画像が表示されない問題はたしかにOGP設定が原因の場合が多くOGPを設定することで解決することが多いです。
ただし、OGPが原因じゃないパターンもあります。直らなかったら他のパターンを試すといいでしょう。
ちなみに広告がテキストだけになってしまうのは以下のような原因が考えられます。こちらでお悩みの方は試してみてください
- SSL化に対応させる
- 画像は1000枚以上あるか
- アナリティクスとアドセンスの連携
- アナリティクスとサーチコンソールの連携
- Multiplexの幅を広くする
- Multiplexをしばらく外す
- テーマを変える
今回の記事は以上になります。ありがとうございました。