OGP(Open Graph Protocol)について

OGP(Open Graph Protocol)って?

OGPは"The Open Graph protocol enables any web page to become a rich object in a social graph."(意訳:OGPはどんなウェブページもソーシャルグラフ上のリッチな要素にできるよ!)と説明されるもので、FacebookMixi,新しいもので言えばGREEなどで採用されています。(公式サイト)

Facebookの例で言えば、次のような例があります。 Before

f:id:lmt_swallow:20130704182401p:plain

After

f:id:lmt_swallow:20130704182408p:plain

これは私のサイトの例なのですが、ある程度スッキリしますね。 というより、Beforeの方を見ていると気持ち悪くなりますね…。(AfterはAfterでクソだけど。)

使う

使う際は、まずhtmlタグを編集します。 (HTML 5)

<html lang="ja" prefix="og: http://ogp.me/ns#”>

XHTMLなら xmlns:og="http://ogp.me/ns#" を<html>タグ内に記述すればオッケーです。

そしてココからが重要な要素で、headタグ内に記述します。 (公式サイトでの例)

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

og:title

タイトル指定。そのページのタイトルを記述。

og:type

コンテンツのタイプを指定。website,profile,book,article,video.movie,video,episode,video.tv_show,video.other,music.song,music.album,music.playlist,music.radio_stationといった要素が指定可能。

og:image

SNSなどでサイトのイメージとして表示される画像を指定。

og:url

URLの正答な表記を指定。

ここまでは必須とされているものです。ここからは推奨な要素。

og:audio

音楽ファイルを付属する際に使用。URL指定。

og:description

これはFacebookだと必須だった気がする。ページの紹介を二文で。(公式サイトより引用:A one to two sentence description of your object.)

og:determiner

タイトルの直前に付ける限定詞(この場合は冠詞)。a,an,the,autoのどれか。

og:locale

language_TERRITORY形式で指定。e.g. ja_JP en_US

og:locale:alternate

そのページに用意されている言語を指定(英語ページと日本語ページみたいに)。複数回定義できる。

og:site_name

サイト全体のタイトルを指定。

確認

要素が指定されているかの確認には、Facebook社が提供しているデバッガを利用すると幸せになれます。

f:id:lmt_swallow:20130704182546p:plain

まとめ

基本的にはこんな感じの要素を指定しておけばいいと思います。 その他にもog:email,og:isbnなんていった要素もありまして…興味があったら定義ファイルを覗いていただければオッケーだと思います。RDFで書かれてます。

Bootstrap Quiz を試してみた

Bootstrap Quiz

f:id:lmt_swallow:20130704182735p:plain

Bootstrap Quizとは

「さて、このサイトはBootstrapで作られたでしょうか?」クイズを楽しめる『The Bootstrap Quiz』という記事を偶然見かけまして,デザインの参考に出来たらなーと思ってチャレンジしてみました。

f:id:lmt_swallow:20130704182827p:plain

こんな感じで選択して,

f:id:lmt_swallow:20130704182900p:plain

こんな感じで解答が出ます。ちなみに僕は5/10問正解しました。

以外だったもの

10問の中で一番驚いたのはこのサイト(音量注意)。 Ragechill

f:id:lmt_swallow:20130704182940p:plain

これ,bootstrap必要だったのかな…。

教訓

Bootstrapでも結構なことが出来るのは分かりました。手間を減らすために使うならいいですが,"Bootstrapっぽさをなくす"努力をするよりは"自分で1から書けるようになる"努力をするべきなのかなー,とも思いました…。