ajike switch

ディレクター必見!OGP(Open Graph Protocol)決定版 2013年10月

こんにちは、ディレクターの柴宮です。

今回は、みんな?(ぼくは…)なんとなくわかったつもりでフワッと対応しているOGP(※1)について、自分の中でもまとめを兼ねてブログにしました。
ただ、Facebook, mixiなんかで対応してますが仕様がコロコロ変わってキャッチアップできない&仕様が煩雑すぎてどう対応するのが一番いいのかわからない…ということで2013年10月現在、これで対応しておけば最適!という形でまとめました。
ページの一番下にOGP画像作成用psdと設定項目xlsを置いておきますので、ダウンロードしてお使い下さい。

※1 OGP
「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。

ogimage_min

とはいえ、Web制作担当として内容もわからず使うわけにもいかないので、簡単に内容をば。

OGPの設定項目(必要最低限)一覧です。
<head>〜</head>の中に記載します。
<meta property=”og:site_name”content=”ここにサイトのドメイン名”/>
<meta property=”og:title”content=”ここにタイトル”/>
<meta property=”og:type”content=”ここにページのタイプ”/>
<meta property=”og:url”content=”ここにページのURL”/>
<meta property=”og:disctiption”content=”ここにページの説明”/>
<meta property=”og:image”content=”ここにサムネイル画像のURL”/>

ここからは、各タグについて簡単に説明。
og:site_name
サイトのドメイン名を指定します。

og:title
個別ページのタイトル。指定していない場合は<title>~</title>の内容が抜き出される。

og:type(必須)
ページの種類。
「website」・・・ウェブサイトのトップページ(ホーム)に指定
「article」・・・下層ページやブログの記事ページに指定
「blog」・・・ブログのトップページに指定。

例えば一般的なサイトの場合、TOPページのみ「website」を指定し、それ以外のページは「article」にするという形。

facebookのog:type一覧
https://developers.facebook.com/docs/reference/opengraph/object-type

og:url
ページのURL。指定していない場合は勝手に取ってきてくれます。

og:disctiption
ページの説明。指定してない場合は<discription>〜</discription>から抜き出される。

og:image(推奨)
ページのサムネイル。デバイスによって下記の比率で表示されます。
PCニュースフィード – 1.91:1
PCタイムライン – 正方形
iOS, Androidアプリ – 1.91:1

OGP画像については、下記サイトさんで実際に設定して詳しく調べてくれています。
http://snowadays.jp/2013/09/2106

で、なおかつ最小600×315px〜最大1200×630pxで5MB以内。
facebook debelopers Objedct Properties
https://developers.facebook.com/docs/opengraph/creating-object-types/#properties

オブジェクトデバッガーで確認ができます。
https://developers.facebook.com/tools/debug

ちなみに、FacebookのPC, iPhone, Android(とmixiの400KB以内)のサイズを網羅して作らないとこうなります。
スクリーンショット 2013-10-21 12.09.42

網羅して作ると、どのデバイスでもこう(大っきい画像)。CVRにかなり影響あるみたいです。
スクリーンショット 2013-10-21 12.10.01

他に、ag:audioはそのまま音声を再生できたり、og:videoはムービーを埋め込めたりする(要審査)ようなものもあります。もっと色々ありますが、現状効果のほどはわかりません…気になる方はこちらをどうぞ。
OGP公式サイト(英語)
http://ogp.me/

続いてmixiです。
400KB以内のJPEG, PNG, GIF(アニメーション GIF 除く)のフォーマットで、URL として指定できるのはHTTPのみ(HTTPS未対応)。
mixi DeveloperCenter
http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check/

ここまでで、Facebook(とmixi)は上記設定をしていればまあ大丈夫なのですが、気になるのがTwitterとGoogle+(と、はてブ?)ですね。

各SNSボタンを設置するときにURLとタイトルを入れるリストが下記サイトにまとまってます。
http://design-spice.com/2011/08/09/social-button/

Twitter
デフォルトのツイートボタンが設定されていれば、URLを共有は「ページのURLを使う」で、ツイートテキストは「ページのタイトルを使う」となってますので問題ないかと。
ページ内に複数コンテンツあり、それぞれにツイートボタンを手軽に設定したい場合などURLとテキストを変えたい時は該当のスクリプト内のtext=〜”の間を下記サイトなんかでUTF-8にURLエンコードして差し替えます。
http://www.tagindex.com/tool/url.html

Google+
上記サイトのリストのGoogle+のリンク先で「+1ボタンの対象とするURL」とありますのでそこにURLを入れる、と。ただ「空白の場合はそのページのURLを自動取得します」とありますので、特に設定しなくても問題なさそうですね。
URLを指定したい場合は単純に差し替えればよい、と。
テキスト的なものは変更できなさそうですね。

はてブ
上記サイトのリストのはてブのリンク先でURLとタイトルを指定すれば問題ありませんが、普通にコードの該当部分を差し替えればイケそうですね。

これで、2013年10月においてのOGPの設定は完璧です!が、コロコロ仕様かわるのでこまめにヲチしないといけないですね…

下記、ダウンロードリンクですー。
OGP画像作成用psd MIN
(なお、mixi対応するなら400KB以内、Facebookのみであれば5MB以内)
OGP設定項目一覧xls

細かい部分参考にさせていただいたサイトさんです。
http://html999.sitemix.jp/tips/86.html

追記
上記psdだとRetinaで画像がジャギることを発見しました…1200×1200pxってデカすぎて内容困るかな?と思って600×600pxにしてましたが、iPhone(iPad)用ってことだったんですね。maxサイズのpsdも置いておきます。
OGP画像作成用psd MAX

追記2
metaとogpの内容って結構被ってる部分多いので、metaも含んで一枚のシートで運用できるようにアップデートしました!
meta-ogp.xlsx

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×