2013/12/09

Facebookのいいね!ボタンを設置したらOGPも設定しよう!

Facebookのいいね!ボタンを設置したらOGPも設定しよう!

TwitterやFacebookのボタンを設置するだけではその力は十分に発揮しきれません。今回はSNSで共通に使用されているOGPについて解説を行います。

目次

OGP(Open Graph Protocol)とは

OGP(Open Graph Protocol)とは、各種SNS(Facebook、Twitter、mixiなど)で使用されている共通の仕様で、そのページで何を説明しているのかを表しています。

表すといっても、普通にページを閲覧しているユーザーには関係の無い情報です。ではいったい誰に対しての情報なのかというと、OGPはFacebookやGoogle+などのSNSに対してウェブページの説明をしているものになります。

<meta property="og:title" content="ウェブページタイトル" />

上記のようにOGPはmetaタグで表記しますので、<head>~</head>内に追記するだけで設定することができます。

各メタタグの紹介

OGPのタグには多くの種類があります。下記の表のようにそれぞれに役割が割り振られていて、これを組み合わせて使用します。

基本的なメタデータ

og:title ウェブページのタイトル
og:type ウェブページが何のページであるか
og:image ウェブページのサムネイル
og:url ウェブページの URL(必須)

この4つのメタデータは必須になります。

オプションのメタデータ

og:audio 音声ファイルのURL
og:description ウェブページの説明
og:determiner オブジェクトのアーティクルを定義
og:locale ウェブページのマークアップ言語
og:site_name サイト名
og:video 動画ファイルのURL
og:email 連絡先(Eメールアドレス)
og:phone_number 連絡先(電話番号)
og:locality 場所
og:latitude、og:longitude 経度緯度での位置情報
og:country-name 国名

音楽のメタデータ

music:duration 曲の長さ(秒)
music:album 曲が収録されているアルバム名
music:album:disc 曲が収録されているアルバム名
music:musician 曲を作ったミュージシャン

動画のメタデータ

video:actor 動画に出演している俳優
video:director 動画の監督
video:duration 動画の長さ(秒)
video:release_date 動画のリリース日

などなど、これ以外にも多くのタグが用意されています。
The Open Graph protocol

サンプルコード

OGPの設定例を以下に置いておきます。必須以外の項目をカスタマイズして、自分のウェブサイトに合わせたOGPのメタタグを生成しましょう。

<meta property="og:title" content="ウェブページのタイトル" />
<meta property="og:type" content="website" />
<meta property="og:description" content="ウェブページの説明" />
<meta property="og:url" content="ウェブページのURL" />
<meta property="og:image" content="サムネイルのURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="言語" />

まとめ

OGPを設定することでSNS上で扱える情報量が増え、よりクリック率を上げる投稿を生み出すことが容易になります。簡単に設定することができますので、まだやってないという方はぜひ検討してみて下さい。