Open Graph protocol (OGP)

使用例

使用方法は、実際の使用例を確認するのが早いです。

Facebook

https://www.facebook.com/では、HTMLのソースから関係する部分だけを抜粋すると

<!DOCTYPE html>
<html lang="en" id="facebook" class="no_js">
<head>
    <meta property="og:site_name" content="Facebook" />
    <meta property="og:url" content="https://www.facebook.com/" />
    <meta property="og:image" content="https://www.facebook.com/images/fb_icon_325x325.png" />
    <meta property="og:locale" content="en_US" />

となっています。一方でhttps://developers.facebook.com/では、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="en"
  lang="en"
  id="facebook"
  class="no_js"
  xmlns:fb="http://ogp.me/ns/fb#"
  xmlns:og="http://ogp.me/ns#">
<head>
    <meta property="og:site_name" content="Facebook Developers" />
    <meta property="og:title" content="Facebook Developers" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://developers.facebook.com/" />
    <meta property="og:image" content="https://developers.facebook.com/images/devsite/developers_og_image.png" />
    <meta property="og:description" content="Grow your app with Facebook. Facebook enables anyone to build social apps on Facebook, mobile, and the web." />

となっています。大きな相違は前者はHTML5で、後者はXHTML 1.0である点です。後者ではそれにともない、XML名前空間で「og」を定義しています。

その他

https://www.yahoo.co.jp/では次のようになっています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
    <meta property="og:title" content="Yahoo! JAPAN">
    <meta property="og:type" content="article">
    <meta property="og:url" content="http://www.yahoo.co.jp/">
    <meta property="og:image" content="http://k.yimg.jp/images/top/ogp/fb_y_1500px.png">
    <meta property="og:description" content="日本最大級のポータルサイト。検索、オークション、ニュース、天気、スポーツ、メール、ショッピングなど多数のサービスを展開。あなたの生活をより豊かにする「課題解決エンジン」を目指していきます。">
    <meta property="og:site_name" content="Yahoo! JAPAN">

構文

正式には、

<head prefix="og: http://ogp.me/ns#">
  <meta property="og:title" content="Hello World" />
</head>

のように名前空間の「og」を定義すべきですが、Facebookではこれを省いても解釈できるとされています。

プロパティ

プロパティ 説明
og:site_name サイトの名前
og:url ページの正式なURL
og:title ページのタイトル
og:type ページの種類
og:description ページの概要や説明
og:image ページに関係する画像
(Facebookの場合、200×200ピクセル以上、5MB以下)

og:type

<meta property="og:type" content="type" />
種類  
music.song  
music.album  
music.playlist  
music.radio_station  
video.movie  
video.episode  
video.tv_show  
video.other  
article article | Facebook Developers
book  
profile  
website website | Facebook Developers
Open Graph Object Types | Facebook Developers

参考

確認

Debugger | Facebook Developersで、設置したタグの確認をできます。

参考