オープングラフプロトコルの設定

  • LINEで送る

OGP (Open Graph Protocol ) の設定

OGP とは、Open Graph Protocol(オープングラフ・プロトコル) の略  自分のサイトが Facebook でシェアされるとき、ウェブサイトで Open Graph タグでマークアップし、コンテンツが Facebook に意図したものに設定できる機能です。

基本的メタデータ

web ページにオープングラフオブジェクトを有効にするためには、基本的なメタデータを追加する必要があります。web ページの <head></head> 内に <meta> タグを追加で配置します。

4つの必須プロパティは

  • og : title – グラフ内に表示されるオブジェクトの「タイトル」
  • og : type – タイプ「video.movie」などのようにオブジェクトの「タイプ」。指定したタイプに応じて他のプロパティも必要になることがあります。
  • og : image – グラフ内にオブジェクトを表示すべき画像の URL
  • og : url – グラフに常置 ID として使用されるオブジェクトの URL

以下は、例としてオープングラフプロトコルのマークアップです。

<meta property="og:title"           content="http://dtiger.wpblog.jp/wp-socialmedia-ogp />

<meta property="og:type"            content="article" />

<meta property="og:title"           content="OGP (Open Graph Protocol)の設定" />

<meta property="og:description"     content="Because it is shared as a URL by Facebook." />

<meta property="og:image"           content="http://dtiger.wpblog.jp/wp-content/uploads/2016/09/75cab2af3babde52b1ffe0e16c7dffeb.png" />

すべての標準オブジェクトプロパティのリストは、Object Properties (オブジェクトプロパティ)のリファレンスに掲載されています。

 

*この screenshot は上のマークアップとは関係ありません

ここでは、初期の基本設定として、

  • Facebook ユーザー ID の設定 : 誰がそのサイトを運営しているかを Facebook に通知する。
  • デフォルト画像の設定     : 記事にアイキャッチ画像が設定されていない時、代わりに表示される画像が設定できる。

Facebook ユーザー ID の設定

ユーザー ID はGraph API Explorer よりアクセスして知ることが出来ます。

まず、「facebook for developers」のツール&サポートの画面が表示されたら、

「トークン」をクリックします。

つづいて、「ユーザーアクセストークンを取得」をクリックします。 すると、下の画面のようなポップアップ画面が出ます。

画面が表示されたら、

左の上方にある  user_about_me  にチェックを入れたら

「アクセストークンを取得 」をクリックします。 すると、下の画面が表示されるので、

最後に「送信」をクリックします。

すると、ID 情報名前が表示されます。”ID” に記載された数字が、ユーザー ID となります。

デフォルト画像の設定

All in One SEO Pack のソーシャルメディアの一般設定

ホームページ設定

画像設定

Facebook 設定

Twitter 設定

All in One SEO Pack での、以上の設定が出来ましたら、投稿編集画面の最下部に「ソーシャル設定」の画面が表示されます。

これで、デフォルト画像の設定が出来ました。この画面の下の部分に下の画面があります。

 

その画面に「Facebook デバッグ」の「この投稿をデバッグ」ボタンをクリックすると、今までの設定の確認ができます。

以上で OGP (Open Graph Protocol )の設定で完了です。

基本的メタデータにおいての、マークアップでのプロパティの、すべての標準オブジェクトプロパティのリストは、「Object Properties (オブジェクトプロパティ)」のリファレンスに掲載されています。

*マークアップがFacebookクローラーにどのように表示されるかを確認するには、URLをシェアデバッガーに入力します。これにより、エラーまたは警告だけでなく、クローラーのスクレイピング対象のメタタグがどれであるかが表示されます。

デバッガーもページのスクレイピングを呼び出します。つまり、HTMLにエラーがある場合は、デバッガーを使ってコンテンツを更新できます。詳しくは、「Updating Objects (オブジェクトの更新)」をご覧ください。

  • LINEで送る

SNSでもご購読できます。