WordPressでFacebookのOGP（Open Graph Protocol）を設定する～事前準備編～
1.何故OGPを設定しなければいけないのか
「OGPの設定？なんかめんどくさそう」という理由で、もしくはただ単にその存在を知らずにOGPを設定していない人がいるかもしれません。そんな方には、今すぐにOGPを設定することをおすすめいたします。
それは何故か・・・自サイトへのアクセスに少なからず影響を与えるためです。
現在WEBサイトを運営するにあたって、ソーシャルメディア経由のアクセスは決して無視をすることが出来ません。とりわけTwitterとFacebookはその2強と言ってもよいでしょう。そして、OGPを設定することは、そのうちのひとつ、Facebook経由のアクセス数増加に大きく寄与するのです。
OGPの設定のメリット
OGPを設定することのメリットは以下の2点です。
- ブログで「いいね」を押してくれた人の友だちに記事の情報が流れる
※OGPを設定していない場合、押してくれた人のタイムラインにはフィードが流れますが、その友だちのタイムラインには何も流れません。 - 「１．」において流れるニュースフィードの内容を指定できる
※指定できるのは、タイトル、リンク先、サムネイル、概要文です。
「いいね」を押してくれた人の友だちのタイムラインにフィードが流れ、しかもそのフィードの内容を指定することが出来れば、アクセスに良い影響を与えることは容易に想像出来るでしょう。
では、次の章から実際の設定方法を見ていきましょう。
2.Facebook内での下準備
自分のブログでOGPを設定するにあたっては、まずFacebook内で下準備を済ませておく必要があります。
2-1.アプリIDを取得する
OGPを設定するにはFacebookのアプリIDが必要になります。そのため、下記のリンクより新たなアプリを作成する必要があります。
ここで、「App Name」に自分のブログのタイトルを入力して「続行」をクリックしてください。
「アプリの表示名」、「連絡先メールアドレス」を入力し、「アプリをFacebookに結合する方法」として「ウェブサイト」にチェックを入れ、保存してください。その際、赤枠で囲った「App ID」をメモすることを忘れずに！
2-2.「いいね」ボタンの作成・設置
App IDを取得したら、次は「いいね」ボタンを作成しましょう。まず、下記のリンクへ行って下さい。
ここで入力する項目は下記のとおりです。
- URL to Like：
ここには設置するページのURLを入力します。
※Wordpressの場合「」を入力することが正しいのですが、それを入力してしまうとエラーが出てしまうので、この段階ではサイトのURLを入れて、後にコードを取得した後に該当箇所を変更します。 - Send Button (XFBML Only)：
ここにチェックを入れるとボタンデザインに「送る」が追加されます。 - Layout Style：
ここでボタンのレイアウトを選択します。 - Width：
ボタンの横幅を設定します。 - Show Faces：
ボタンの下にアイコンの画像を表示するかどうか選択します。 - Verb to display：
「いいね」か「おすすめ」か、どちらのボタンにするか選択できます。 - Color Scheme：
ボタンの色合いを明るくするか暗くするか選択できます。 - Font：
フォントのサイズを選択できます。
上記項目全て入力し終わったら、Get Codeをクリックしてください。
これでコード取得作業は完了です。「HTML5」、「XFBML」、「IFRAME」から任意のものを選んでください。
2-3.OGPタグの作成
続いてOGPタグの作成をします。「いいね」ボタンの作成ページを下に進むと「Step 2 – Get Open Graph Tags」というセクションが出てきます。
しかしここでは、「Type」で「blog」を選択し、「Admin」に数字が入っていることだけ確認し、「Get Tags」をクリックしちゃいましょう。このOGPタグにはWordpressのテンプレートタグを設定する必要があるのですが、ここで入力してもエラーがでてしまうので、ここではまず下記のように空のタグだけ出力させて、別途入力するのが良いと思います。
出力させたコードは下記です。
<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仕様に変更して、実際にサイトに埋め込む工程をご紹介いたします。
コメント