1. ホーム > 
  2. Webサイト集客 > 
  3. Facebookページの作成と運営 > 
  4. OGPの設定方法

OGPの設定方法

OGP(オープングラフプロトコル)とは、そのページにどんな内容が書かれているのかを、そのページの外側にあるプログラムが理解できるようにした約束事です。 OGPを […]

  • 2012/5/4
  • 2012/5/4

OGP(オープングラフプロトコル)とは、そのページにどんな内容が書かれているのかを、そのページの外側にあるプログラムが理解できるようにした約束事です。
OGPをホームページ内の各ページにセットしておくことで、Facebookで誰かが「いいね!」を押した記事が、その人の友達のニュースフィードにも表示されるので、Facebook上でのクチコミが伝播しやすくなるというメリットがあります。

また「いいね!」をクリックした時にFacebookのフィード上に表示される画像や説明文もある程度コントロールする事もできます。
さらにGoogle+もOGPに対応しており設定をしないのは勿体ないので、きちんと設定をしておきましょう。

OGPの設定とは?

OGPは決まったタグに説明文や画像のURLなどの内容を入力して、各ページの<head>〜</head>内に設置するだけです。
Facebookの「いいね!ボタン」プラグインのコード生成ページに、OGPのコード生成用のツールがありますので活用しましょう。

OGPのタグを生成する方法

まずはFacebookにログインした状態で、いいね!ボタンのコード生成ページを開きます。
ページ中段に「Step 2 – Get Open Graph Tags」というコーナーがありますので、必要事項を記入します。

Title
ページのタイトルを入力しておきます。
Type
設置するページの種類を選択します。通常のホームページのTOPページであれば「website」、ブログのTOPなら「blog」、記事ページであれば「article」を選択します。
カテゴリページも「article」でOKです。
URL
ページのURLを入力しておきます。
Image
ニュースフィードなどでページを紹介する時に使用される画像を指定できます。
Site name
そのページのサイト名を入力しておきます。
Admin
Facebookにログインした状態であれば、ここには管理者のFacebookIDが設置されているはずです。そのままでOKです。
このAdminはFacebookのアクセス解析「インサイト」と紐付ける為のIDです。
こちらのブログに詳しく書かれていますので、詳しく知りたい方はどうぞ。
Facebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは – Six Apart ブログ

すべて入力したら「Get Tagsボタン」をクリックします。
表示されたタグをコピーしたら、OGPを設置するホームページの<head>〜</head>内に貼り付けます。

descriptionを追加

このFacebookのツールには設定項目がありませんが、そのページの概要を表す説明文のタグを追加しておきます。
書式は以下のようにすればOKです。

<meta property=”og:description” content=”ページの説明文をここに入力します” />

<html>部分の修正

これでOK!と言いたいところですが、あと一つだけ変えておく必要があるのが、ページの先頭にある<html>です。
ここにxmlns属性の指定を追加しておきます。
と言っても、<html>の部分に決まり文句を追加するだけですので、以下のコードをコピーして<html>を置き換えてください。

<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:og=”http://ogp.me/ns#”
xmlns:fb=”https://www.facebook.com/2008/fbml”>

これでOGPの設定は完了しました。
実際にご自分のアカウントを使って「いいね!ボタン」を押してみて、先ほど設定した画像や説明文がニュースフィードに表示されるかどうか確認してみてください。

参考リンク

Open Graph Protocol – Facebook開発者(英語)

「役にたった」と思ったらシェアお願いします