ソーシャルでの集客力をアップするOGP設定
OGPという言葉を聞いたことがあるでしょうか。
Open Graph Protocolの略で、htmlのmeta情報にサイトの概要を記述しておくことで、ソーシャルメディアなどの外部サイトにページの概要を伝えることができるという仕組みです。
OGPで何ができるのかというと、一番わかりやすいところでは、Facebookの近況アップデートにURLを打ち込んだ時に以下のようにサイトの概要が表示されるようになります。
単にURLが表示されてリンクされているだけの投稿と比べると視覚的にもわかりやすく、他のユーザーの目に付きやすくなるため、それだけでも集客効果、ブランディング効果はアップします。
ここではFacebookを中心にご説明しますが、OGPに対応したサイトはFacebookだけではありません。
mixiやGREEなどのSNSでもOGPに対応しており、mixiチェックなどを使った場合に効果を発揮します。
Facebookの単純なヴィジェットとしてのLikeボタン(いいねボタン)と、OGPを利用した場合で情報の公開範囲が異なると話題になったこともあり、Webサイト運営者は対応しておきたい内容となります。
(ちなみに、単純なLikeは自分のウォールのみ、OGP利用の場合は友達のニュースフィードにも表示されます)
では、実装方法です。
まず、絶対に忘れてはいけないのが、htmlタグへの名前空間の登録です。
OGPのメタ情報を定義するxmlns:og=”http://ogp.me/ns#”と各ソーシャルで規定された名前空間を定義しておきましょう。
Facebookの場合は、xmlns:fb=”http://www.facebook.com/2008/fbml”、mixiはxmlns:mixi=”http://mixi-platform.com/ns#”、GREEはxmlns:gr=”http://gree.jp/ns”です。
ほぼ、ogとfbのみで足りてしまいますが、後述するmixiやGREE独自のメタ情報を使用する場合は、mixiとgrの名前空間の登録も必要となります。
これら全てを含めたhtmlタグの例を記載しておきます。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:gr="http://gree.jp/ns" xmlns:og="http://ogp.me/ns#" dir="ltr" lang="ja">
次に、サイトの概要を表すmetaタグを記述していきます。
<meta property="og:title" content="ページのタイトル" /> <meta property="og:type" content="blog" /> <meta property="og:url" content="http://example.com/" /> <meta property="og:image" content="画像のURL" /> <meta property="og:site_name" content="サイト名" />
このog:というのが、先ほど定義した名前空間を使っているメタ情報です。
typeは、ウェブの場合はwebsite、blog、articleがありますので、うまく使い分けると良いでしょう。
この他にも、場所や店舗、アクティビティ、製品などを表すタイプが存在します。
URLは、そのページのURL(ソーシャルに投稿された内容からのリンク先)を、imageには画像のURLを記述しておきます。
imageは、多くのSNSが自動的に縮小しますが、正方形で作っておくことがきれいに表示させるコツです。
さらにFacebookの場合は、
<meta property="fb:admins" content="管理者ID" />
のようにfbという名前空間で定義されたadminsという管理者を示すメタ情報を設定しておくことで、Facebookインサイトで情報の拡散状況などを確認することができるようになります。
管理者IDは、Facebookにログインした状態でLike Button – Facebook開発者にアクセスし、STEP2 – Get Open Graph TagsのAdminに表示された内容が自分のIDとなりますので、それを入れてください。
カンマ区切りで複数の管理者を指定することも可能です。
mixiおよびGREEの名前空間にも独自に、画像やフィーチャーフォン(ガラケー)関連のメタ、携帯電話キャリアごとのメタ情報などが定義されています。
OGPが正しく設定できているかどうかは、FacebookのDebuggerを使うと簡単に確認できます。