「SNSでシェア」が当たり前、WEBサイトに「OGP(Open Graph Protocol)」の設定を!


facebook / Ben Mezrich

最近は、「SNSでシェアする」という行為が当たり前になってきています。

先日、Googleが検索結果に表示するルールを「被リンク数」から「オーサー(著者)重視」に変更すると明言したと話題になりましたが、その真偽はともかくとして、バイラル・マーケティング(SNS等を利用した口コミによるマーケティング)も今年は注目されています。

これからのWEBサイトは、「SNSでシェアする」ことを意識して作成するのがより重要となってきます。

さて、「SNSでシェアする」と、例えば、facebookなら、以下のように表示されます。

6420

この赤い囲いに表示されている画像やタイトル、サイト名などは、プログラムがそのページ内に記載されている情報から自動的に読み取って表示しているものですが、これを、サイト作成者の意図した内容で表示させることが可能です。

そのことを、「OGP(Open Graph Protocol)設定」と言います。

上記画像のサイトはOGPを設定しています。

ワンオラクル | トランプ占い | GoMacho.net
http://www.gomacho.net/divination/oneoracle/index.html

(良かったら遊んでいってください)

■OGP(Open Graph Protocol)とは?

OGP(Open Graph Protocol)とは、facebookmixigoogle+楽天Social Newsなどの「SNSサービス」で使用されている共通の仕様のことで、ページの情報を記述する為の決まり事です。

The Open Graph protocol
http://ogp.me/

これを記述することで、各SNSサービス上でサイト作成者の意図した通りの情報をシェアに表示させることが可能となります。

たまに、あるページをシェアしたときに、概要やタイトル、画像などがおかしな組み合わせになっている場合があったりしますが、それらページはこの「OGP」が設定されていない可能性があります。

設定されていない場合、以下のようになります。

・タイトル: titleタグに設定されたタイトル
・概要: 本文テキストの冒頭
・URL: ページURL
・画像: ページに使われている画像を無作為に抽出

画像が曲者で、広告を掲載しているようなページの場合、画像にその広告画像が使われたりしてしまいます。

SNSでの口コミを期待するのなら、このシェアに表示させる情報がうまく整理できていないというのは、致命的な欠陥だと言えます。この機会に、きちんと設定することを強くオススメします。

■OGPを設定する

OGPの設定は非常に単純で、htmlファイルに以下を記述するだけで実現できます。

[html firstline=”1″ highlight=”2,3,4,5,6,7″ title=””]
<head>
<meta content=”ここにサイト名を記入” property=”og:site_name”>
<meta content=”ここにタイトルを記入” property=”og:title”>
<meta content=”ここにページのURLを記入” property=”og:url”>
<meta content=”ここに画像のURLを記入” property=”og:image”>
<meta content=”ここにページの種類を記入” property=”og:type”>
<meta content=”ここに説明文を記入 “ property=”og:description”>
</head>
[/html]

OGPには他にもたくさんの仕様があります。しかし、その中でWEBサイトに使われているものと言えば、主に上記の6つ程度です。

僅かこれだけをページに記述するだけで、最適なシェアを実現できます。

6420_2

ワンオラクル | トランプ占い | GoMacho.net
http://www.gomacho.net/divination/oneoracle/index.html

[html firstline=”1″ highlight=”6,7,8,9,10,11″ title=”index.html”]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="GoMacho.net" property="og:site_name">
<meta content="ワンオラクル | トランプ占い | GoMacho.net" property="og:title">
<meta content="http://www.gomacho.net/divination/oneoracle/index.html" property="og:url">
<meta content="http://www.gomacho.net/divination/oneoracle/img/ogimg.png" property="og:image">
<meta content="website" property="og:type">
<meta content="悩み・迷い・相談事を頭に思い浮かべて、カードを捲ってください。" property="og:description">
<!–[if lt IE 9]>
<script src="./js/html5shiv.js"></script>
<![endif]–>
<link rel="stylesheet" href="./css/index.css" />
<link rel="icon" href="./img/favicon.ico">
<title>ワンオラクル | トランプ占い | GoMacho.net</title>
</head>
<body>
[/html]

■og:site_name

[html firstline=”1″ highlight=”2″ title=””]
<head>
<meta content=”ここにサイト名を記入” property=”og:site_name”>
</head>
[/html]

ここには「サイト名」を記入します。

■og:title

[html firstline=”1″ highlight=”2″ title=””]
<head>
<meta content=”ここにタイトルを記入” property=”og:title”>
</head>
[/html]

ここには「ページのタイトル」を記入します。

■og:url

[html firstline=”1″ highlight=”2″ title=””]
<head>
<meta content=”ここにページのURLを記入” property=”og:url”>
</head>
[/html]

ここには「ページのURL」を記入します。

■og:description

[html firstline=”1″ highlight=”2″ title=””]
<head>
<meta content=”ここに説明文を記入 “ property=”og:description”>
</head>
[/html]

ここには「ページの概要(説明)」を記入します。

シェアされた人がクリックして本文を読みたくなるような概要を記入するよう心掛けましょう。

■og:image

[html firstline=”1″ highlight=”2″ title=””]
<head>
<meta content=”ここに画像のURLを記入” property=”og:image”>
</head>
[/html]

ここには「画像のURL」を記入します。

相対パスはエラーになるので、「http://~」から始まるURLを記入しなければなりません。

2014年6月17日現在、facebookでは、OGPで指定する画像の推奨サイズを「1200px × 630px以上」としています。最低は「600px × 315px」とも書かれています。

4. Optimize your image sizes to generate great previews
https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#images
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

しかし、これはあくまでもfacebookが推奨しているサイズであって、mixigoogle+、その他SNSサービスでも最適かと問われればそうではありません。また、PC、Android、iPhoneといった環境による違いもあります、すべてにおいて最適を用意するのは難しいと言えるでしょう。

facebookであれば、「og:image Simulator」というOGP画像プレビューツールがありますので、活用してみては如何でしょうか。

前述していますが、この「og:image」を設定していないと、そのページに存在する画像、例えば広告画像などが自動的にピックアップされてしまいますので、必ず設定するようにしましょう。

■og:type

[html firstline=”1″ highlight=”2″ title=””]
<head>
<meta content=”ここにページの種類を記入” property=”og:type”>
</head>
[/html]

ここには「ページの種類」を記入します。

音楽や動画のページなのか、WEBサイトなのか、記事なのか、プロフィールなのか、等を記入します。以下の公式サイトに掲載されています。

The Open Graph protocol
http://ogp.me/#types

WEBサイトであれば、そのまま、「website」となります。

[html firstline=”1″ highlight=”2″ title=”website”]
<head>
<meta property="og:type" content="website">
</head>
[/html]

[html firstline=”1″ highlight=”2,3,4,5,6″ title=”article”]
<head>
<meta property="og:type" content="article">
<meta property="article:published_time" content="2014-04-30">
<meta property="article:author" content="http://www.materialize.jp/profile.html">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="Javascript">
</head>
[/html]

[html firstline=”1″ highlight=”2,3,4,5,6,7,8″ title=”book”]
<head>
<meta property="og:type" content="book">
<meta property="book:author" content="http://www.materialize.jp/profile.html">
<meta property="book:isbn" content="012-3456789012">
<meta property="book:release_date" content="2013-12-27">
<meta property="book:tag" content="Ryu Murakami">
<meta property="book:tag" content="eBook">
<meta property="book:tag" content="Writer">
</head>
[/html]

[html firstline=”1″ highlight=”2,3,4,5,6″ title=”profile”]
<head>
<meta property="og:type" content="profile">
<meta property="profile:first_name" content="Ashibe">
<meta property="profile:last_name" content="Hair">
<meta property="profile:gender" content="male">
<meta property="profile:username" content="Ashibehair">
</head>
[/html]

(平成26年6月17日 アシベズヘア@ashibehair_mfacebooknoteSUZURI

コメントを残す

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