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はここでは掲載しないでおきます。