(cache) html999 » はじめてのOGP設置方法とどこまで設定するかを考える

はじめてのOGP設置方法とどこまで設定するかを考える

2013年5月2日木曜日 - 04:37 - Category: Tips

広告

いまさら感ありますが、はじめてOGPを設定する機会があったのでまとめます。
（薄い知識でお届けします）

そろそろ企業サイト（かため）のようなWebサイトでも、Faviconとセットくらいの感覚で設定するようおすすめした方がよさそうです。

（注意：OGPの仕様がころころかわるので、すぐに間違いになる可能性があります！だいたい2013年の4月頃に調べた内容を元にしています。気づいたところがあれば更新していく予定）

OGPとは

SNS向けの記述で、<head>～</head>内に記述するmeta情報。
facebookなど（他にもmixi、Google＋などが対応しているらしい）で、そのページがシェア（facebookの「いいね！」とか）されたときにSNS上で表示される情報を指定するためのもの。

どんな感じで変わるのか

試しにこのブログに設定してみました！（2013年4月5日頃のキャプチャーです）

OGPの設定前のfacebookタイムライン上の表示

OGPの設定前のfacebookタイムライン上の表示のキャプチャー

サムネイルの画像が、はてブのボタン！？しかも引き伸ばされてる。
このブログではほとんど画像を使用していないのでこんなことになってしまったのですが、かっこわるい感じです。
さらにサイトの説明文はmetaのdescriptionが表示されています。きちんとページごとに設定されている場合はいいのですが、このブログのように適当に全ページ共通でいれてるだけだと、ページの内容がさっぱり伝わらないことに。

OGPの設定後のfacebookタイムライン上の表示

OGPの設定後のfacebookタイムライン上の表示のキャプチャー

（設定前のと違うページでまぎらわしいですが…）
それっぽいサムネイル用画像を準備したことでかなりそれらしくなりました！
説明文は本文から100文字弱を取り出して表示する形にしました。

OGPの設置例（サンプルソース）

こんな感じで<head>～</head>内に記述します。（以下HTML5の場合）

<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta property="og:title" content="ここにタイトル" />
<meta property="og:type" content="ここにタイプ" />
<meta property="og:url" content="ここにページのURL" />
<meta property="og:image" content="ここにサムネイル画像のURL" />
…
</head>
…

基本的なパラメータと注意点など

の形で指定したい設定を記述します。
（<html lang="ja" prefix="og: http://ogp.me/ns#">の部分は後の「名前空間の指定」で）

先ほどのfacebookタイムラインの表示例

OGP設定のfacebookタイムライン上の表示参考

og:title

（必須）個別のページのタイトル。表示例の（1）の部分です。
指定していない場合は<title>～</title>の内容が抜き出されるようです。

og:type

（必須）ページの種類。（けっこうキモになる設定かも）

「website」・・・ウェブサイトのトップページ（ホーム）に指定
「article」・・・下層ページやブログの記事ページに指定
「blog」・・・※ブログのトップページに指定、だったのですが、2013/05/01現在公式サイトから消えています

og:typeの一覧は下記参照。

例えば一般的な企業サイトの場合、メインのトップページ（ホーム）のみ「website」を指定し、それ以外のページは「article」にするという形。

表示例の（2）の部分もここの指定で変わります。

facebookではog:typeによって扱いが変わるっぽいです。下記参照。

また、facebookでは一度指定すると変更できないようなので注意が必要です！

※og:typeの「blog」について。
2013/05/01現在、公式サイト（http://ogp.me/）から消えています。（Open Graph Object Types – Facebook開発者にもない）ということは、ブログの場合でもトップページは「website」が正しい？ということに変更？？
今のところよくわからないので、わかったら追記します。（ブログもウェブサイトなので「website」を指定で間違いではないと思いますが…）

ちなみに、facebookのデバッガーで確認すると、「blog」を指定していても「og:type: article」とでてきます。
ためしにこのブログのトップページを「website」に変更してチェックすると『まえに「article」になってたから「website」に変更できません！ぷんぷん』とエラーがでてしまいました。
しょっちゅう仕様変更になるくせに変更できないなんてひどい＞＜
とりあえず「website」にしたまましばらく放置してみます。

og:image

（必須）サムネイル画像のURLを指定します。表示例の（3）の部分です。
相対やサイトルートだとfacebookのデバッガーでエラーになったので、http://～から始まるURLで指定が必要。

現在のfacebookの推奨サイズは1500×1500pxになっています（でか！）
最低200×200px以上必要（バグの関係で300×300px以上がおすすめ）で、ファイルサイズは5MB以下（mixiは400KB以下のようなので対象に入れる場合は注意）。

本来は各ページごとの画像を指定するのが正しい形ですが、テキストベースのサイトなら全ページで共通の画像でもいいと思います。

facebookでシェアする場合、画像を指定していてもほかに大きめの画像（多分200×200px以上）がページ内に表示されている場合は、サムネイルの候補として表示されるのでユーザーが任意で選択できます。
また、形は横長だと左右がトリミングされるので正方形が無難。

og:url

（必須）ページのURL。
指定していない場合は勝手にとってきてくれます。

og:description

（OGP公式では推奨だが、facebookでは必須）ページの説明。
日本語の場合は80～90文字程度におさめるのがよさそうという情報がありました。

Facebookの新しいTimeline、で、OGPの… | gaspanik weblog

ブログ記事の場合は本文の抜粋が多いようです。
指定していない場合は<meta name="description" content="ここ" /> の内容が抜き出され、metaのdescriptionが指定されていない場合はテキストを最初から120文字程度抜き出して表示するようです。

og:site_name

サイト名を指定します。

ほかにもたくさんありますが、よく使用するのはこのあたり。
その他は必要に応じて。OGP公式サイトを参照。

The Open Graph protocol

facebook専用のパラメータ

fb:admins, fb:page_id, fb:app_id　などがあります。facebookに完璧に対応させたい場合やfacebookページがあるサイト、いいねボタンを設置する場合は指定した方がいい。
下記ページやGoogle先生をご参照ください。

名前空間の指定

<html>タグに入っているprefix="～"は「og:title」などのHTMLの規格で定められたものではない記述を紐付けするための記述です。
（どういうことかについては下記ページが参考になりました）

HTMLの名前空間(namespace)について掘り下げてみる | girigiribauer.com

今のところ、なくてもOGPの設定は認識されるっぽいですが、正式には指定が必要です。

<head>タグに追加するものやいろんな記述方法が出回っていますが、公式サイト等を参考にしたサンプルが下記です。（太字の部分を<html>タグに追加します）
HTML5とXHTMLでは書き方が違うので注意。

HTML5の場合

※「og:」の後の半角スペースをとってはいけない（Validatorエラーになる）らしいので注意

prefix属性でOGPを指定する場合、og:やfb:と名前空間URIの間には半角スペースが必要、ということが分かった。 – E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介

XHTMLの場合

og:～で始まるもの以外も指定する場合は、その種類分だけ名前空間の指定も必要になります。

facebook向けの記述がある場合（fb:admins, fb:page_id, fb:app_idなど）

HTML5
<html lang="ja" prefix="og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml">

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

参考

OGPの記述後もValidなHTML5文書にするマークアップ方法のメモ｜Blog｜Skyward Design

表示の確認

facebookのデバッガーで確認できます。エラーなども教えてくれます。
設定を変更しても、facebook上でキャッシュされていて反映されない場合、デバッガーでチェックすると最新の情報になる。（前はなってたのですが、og:imageは変わらないことがあるかも）

デバッガー – Facebook開発者

どこまで設定するか…

OGPのパラメータにはたくさん種類があるので、CMSだとある程度自動的に書き出すようにできますが、静的ページでページ数が多いサイトだとかなり時間がかかる作業になります。
お仕事だとどこまで設定するかは費用面とスケジュールにより要相談といったところですが、最低限サムネイルの設定だけでもしておくとだいぶ見栄えが違います。

（必須）となっている項目もなければないで、SNS側である程度うまいこととってきてくれるものは省いてもいい気がします（og:title、og:url、og:descriptionなど）。

「いいね！」ボタンを設置している、しっかり設定しておこうという余裕がある、そんなサイトの場合はOGPの基本的なパラメータ＋facebook専用のパラメータ（fb:admins, fb:page_id, fb:app_id　など）を各ページ個別にきちんと。

いろいろな面で余裕があまりない場合は「og:type」、「og:image」だけでも、といった感じでしょうか。

ただし、明日から仕様が変わって、とても変な表示になる危険性もある。とはいえ、現状のようにころころ仕様が変わるなら、きちんと設定していても同じことが言えますね…。

のらりくらりと書いている内に仕様は変わるし、facebookのタイムラインのデザインも変わるし･･･＞＜。
まだまだ、OGPの仕様自体も、実装するSNS側も不安定な感じがします。
そしてふりまわされるWeb制作者たち！！！
ほんと、なるはやでFixお願いしますわ。

広告

FacebookのOGP設定がいつの間にかエラーになっていた | Synapse Diary より:

2013年6月27日 21:40

[...] Facebookでのウケ方が段違い！もはや必須なOGPを設定する方法 | 株式会社LIG html999 » はじめてのOGP設置方法とどこまで設定するかを考える [...]
OGP :::: 管理人”JM”のブログ – TOJIRO:Net ::: より:

2013年7月8日 15:05

[...] はじめてのOGP設置方法とどこまで設定するかを考えるフェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か [...]
facebookのOGP設定とキャッシュのクリア | ウィンドミル　いわしブログより:

2013年7月13日 23:41

[...] html999 » はじめてのOGP設置方法とどこまで設定するかを考える [...]

html999