WordPressでFacebookのOGP(Open Graph Protocol)を設定する~事前準備編~

Facebookが日に日にユーザー数を増やしている昨今、ブログ記事に「いいね!」ボタンを設置している人は少なくありません。しかし、ただ単に「いいね!」ボタンを設置しただけでは、ブログのFacebook対応は不完全です。OGP(Open Graph Protocol)の設定が不可欠なのです。今回はWordpressでのOGPの設定方法をご紹介いたします。

1.何故OGPを設定しなければいけないのか

「OGPの設定?なんかめんどくさそう」という理由で、もしくはただ単にその存在を知らずにOGPを設定していない人がいるかもしれません。そんな方には、今すぐにOGPを設定することをおすすめいたします。

それは何故か・・・自サイトへのアクセスに少なからず影響を与えるためです。

現在WEBサイトを運営するにあたって、ソーシャルメディア経由のアクセスは決して無視をすることが出来ません。とりわけTwitterFacebookはその2強と言ってもよいでしょう。そして、OGPを設定することは、そのうちのひとつ、Facebook経由のアクセス数増加に大きく寄与するのです。

OGPの設定のメリット

OGPを設定することのメリットは以下の2点です。

  1. ブログで「いいね」を押してくれた人の友だちに記事の情報が流れる
    ※OGPを設定していない場合、押してくれた人のタイムラインにはフィードが流れますが、その友だちのタイムラインには何も流れません。
  2. 「1.」において流れるニュースフィードの内容を指定できる
    ※指定できるのは、タイトル、リンク先、サムネイル、概要文です。

「いいね」を押してくれた人の友だちのタイムラインにフィードが流れ、しかもそのフィードの内容を指定することが出来れば、アクセスに良い影響を与えることは容易に想像出来るでしょう。

では、次の章から実際の設定方法を見ていきましょう。

2.Facebook内での下準備

自分のブログでOGPを設定するにあたっては、まずFacebook内で下準備を済ませておく必要があります。

2-1.アプリIDを取得する

OGPを設定するにはFacebookのアプリIDが必要になります。そのため、下記のリンクより新たなアプリを作成する必要があります。

Create New App

ここで、「App Name」に自分のブログのタイトルを入力して「続行」をクリックしてください。

Facebookアプリの基本設定

「アプリの表示名」、「連絡先メールアドレス」を入力し、「アプリをFacebookに結合する方法」として「ウェブサイト」にチェックを入れ、保存してください。その際、赤枠で囲った「App ID」をメモすることを忘れずに!

2-2.「いいね」ボタンの作成・設置

App IDを取得したら、次は「いいね」ボタンを作成しましょう。まず、下記のリンクへ行って下さい。

「いいね」ボタンの作成

ここで入力する項目は下記のとおりです。

  1. URL to Like:
    ここには設置するページのURLを入力します。
    ※Wordpressの場合「」を入力することが正しいのですが、それを入力してしまうとエラーが出てしまうので、この段階ではサイトのURLを入れて、後にコードを取得した後に該当箇所を変更します。
  2. Send Button (XFBML Only):
    ここにチェックを入れるとボタンデザインに「送る」が追加されます。
  3. Layout Style:
    ここでボタンのレイアウトを選択します。
  4. Width:
    ボタンの横幅を設定します。
  5. Show Faces:
    ボタンの下にアイコンの画像を表示するかどうか選択します。
  6. Verb to display:
    「いいね」か「おすすめ」か、どちらのボタンにするか選択できます。
  7. Color Scheme:
    ボタンの色合いを明るくするか暗くするか選択できます。
  8. Font:
    フォントのサイズを選択できます。

上記項目全て入力し終わったら、Get Codeをクリックしてください。

いいねボタンのコード

これでコード取得作業は完了です。「HTML5」、「XFBML」、「IFRAME」から任意のものを選んでください。

2-3.OGPタグの作成

続いてOGPタグの作成をします。「いいね」ボタンの作成ページを下に進むと「Step 2 – Get Open Graph Tags」というセクションが出てきます。

OGPタグの作成

しかしここでは、「Type」「blog」を選択し、「Admin」に数字が入っていることだけ確認し、「Get Tags」をクリックしちゃいましょう。このOGPタグにはWordpressのテンプレートタグを設定する必要があるのですが、ここで入力してもエラーがでてしまうので、ここではまず下記のように空のタグだけ出力させて、別途入力するのが良いと思います。

OGPタグ

出力させたコードは下記です。

<meta property="og:title" content="" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="" />
<meta property="fb:admins" content="youradmins" />

これで、Facebookでの下準備は終了です。次回の記事では、作成・取得したコードをWordpress仕様に変更して、実際にサイトに埋め込む工程をご紹介いたします。

  

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Back To The Top