2011 年 10 月 2 日

OGPメタタグを書いてインサイトを見る

OGP

既存のウェブサイトに加えてFacebookページを持たれている方も多いですが、保守するページが増えますし、「いいね!」の数が分散してしまいます。

既存のウェブサイトにOGP(Open Graph Protocol)のメタタグを記述して、「いいね!」を押すと、自分のフェイスブックアカウントに新たに管理用ページが追加されます。

このページは管理者以外には見えません。この管理者ページでウェブサイトのインサイトを見ることができます。

最初にhtmlタグにOGP用のネームスペースを追加します。

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:og="http://ogp.me/ns#"
  xmlns:fb="http://www.facebook.com/2008/fbml"
  xmlns:og="http://opengraphprotocol.org/schema/"
  xml:lang="ja" lang="ja">

次にサイトの情報を記述します。
og:typeはwebsiteとしますが、これはトップページのみに記述します。その他ページはarticleとします。

このサイトはWordPressを利用しているので、以下のように記述しています。

<meta property="fb:admins"      content="管理者のフェイスブックID" />
<meta property="og:locale"      content="ja_JP" />
<?php if (is_home()) { ?>
<meta property="og:type"        content="website" />
<?php } else { ?>
<meta property="og:type"        content="article" />
<?php } ?>
<meta property="og:url"         content="http://notice.co.jp/" />
<meta property="og:title"       content="<?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:image"       content="http://notice.co.jp/wp-content/images/notice.png" />

このようにサイトやページの説明をMETAタグで記述しておくと、フェイスブックで「いいね!」されたときの表示内容を予め指定することができます。

og:imageにそれぞれの記事の画像を指定できるようにプログラムしておくと、「いいね!」されたときに、その画像が引用されます。WordPressのようなCMSを使っていて、自分でプログラミング可能な人は簡単に実装できます。

METAタグの記述が正しいかどうかは、フェイスブックのデバッガで見ることができます。

正しく記述できていたら、「いいね!」してみてください。そして、自分のフェイスブックページに管理者用ページが追加されているはずです。

OGPを設定するWordPressのプラグインもありますが、フェイスブックのOGPの仕様も変わることがあるので、すばやく対応するには、自分で設置するのがよいかもしれません。