Facebookなどでサイトが共有された時、リッチ表示するOGPの設定

Facebookでシェアされたり、いいねを押すとニュースフィードにWebサイトやブログ記事が表示されます。サイトによっては画像が大きく表示されたり、概要がいい感じで思わずクリックして読んでみたくなるときってないでしょうか？

これは、ブログなどのサイトにOGP（Open Graph protocol）と呼ばれるMetadataが設定されていて、Facebookがそれを認識し表示してくれているからです。

当サイトでのOGPの実装は、WordPressのプラグインの「Open Graph Pro」を使用していましたが、プラグインが更新されていなく、古くなっていたので自分で実装しなおしました。その際にOGPについて調べたことをまとめます。

OGPとは何か？

OGP（Open Graph protocol）は、冒頭で少し述べたようにFacebookやmixiなどのSNSでシェアされたときに、そのページのタイトル・URL・概要・画像を正しく伝えるためのHTMLの<head>…</head>内に含めるmeta情報で<meta>要素を使って記述するものです。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <meta property="fb:app_id" content="123456789012345" />
  <meta property="og:type"   content="article" />
  <meta property="og:url"    content="https://millkeyweb.com/" />
  <meta property="og:title"  content="Sample Article" />
  <meta property="og:image"  content="https://millkeyweb.com/wp-content/uploads/2014/01/MillKeyWeb-logo1.png" />
  <meta property="og:description"  content="Sample Description" />
  <meta property="og:site_name"  content="Mill Key Web" />
  <meta property="article:publisher" content="https://www.facebook.com/millkeyweb" />

このタグを記述すると表示が下図のように変わります。Facebookページでシェアしたサイトの表示の違いを見てください。

OGP設定なしサイト

OGP設定ありサイト

(1)と(2)の画像表示の違い
(1)と(2)で画像の表示に違いがあるのは、「og:image」の指定した画像サイズによるものです。推奨サイズより小さいと表示は(2)のようになります。

prefix属性はなにか？

OGPの古い設定ではxmlnsが使われていたり、html要素に指定していたりしますが、今回はFacebook DevelopersのReferenceを元に<head>内に記述しました。

prefix属性は、簡単に説明すると<meta>要素のproperty属性「og:」「fb:」を使えるようにしますよという呪文のようなものです。

prefix属性の「:」のあとには半角空白文字を入れて指定します。「prefix="og: http://ogp.me/ns#"」

「fb:」はFacebook独自のもので「article:」はOGPのオブジェクトタイプです。この指定がなくても<meta>要素が認識されるようですが、正式には必要なので指定しておきましょう。

基本のメタデータ設定

公式サイト「The Open Graph protocol」では以下の4つが全てのページで必須のプロパティのようです。

必須プロパティ

og:title – ページのタイトル
og:type – ページのタイプ
og:image – ページのサムネイル画像
og:url – ページのURL

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<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" />
...
</head>
...
</html>

必須プロパティの説明と抑えておくポイント

必須プロパティの説明とcontent属性に適切な値いれるポイントを紹介します。

`og:title`

タイトルを記入します。ブログでいう記事タイトルに該当する箇所です。このタイトルにはブランド名を付けず、純粋な記事のタイトルを記入するようにします。

ブログを運営していると記事タイトルのあとにブログタイトルを含めていることがあるかもしれませんが、og:titleにはブログタイトルは含めないようにしましょう。プロパティがない場合<title>…</title>が参照されるようです。

`og:type`

ページのオブジェクトタイプを指定します。このタイプによってFacebookでシェアされた時の表示が変わります。

Object Types

ブログに関係しそうなタイプを抜粋しましたが、この他にもオブジェクトタイプがあります。詳しくは以下のリンク先を参照してください。

ブログの場合記事ページがarticleでそれ以外はwebsiteを指定しておくのが良さそうです。（Matt Cutts氏のブログも確認したところarticleとwebsiteが使われていました。）

オブジェクトタイプを指定していない場合はデフォルトでwebsiteになります。

`og:image`

画像のURLを指定します。URLは絶対パスで指定します。またこのMetadataは複数<head>…</head>内に指定できます。複数指定した場合ユーザーが「いいね！」したときに画像を選択する事ができます。

og:imageにはいくつかのオプションがありこれについては後述します。

Facebookでは画像サイズに1200×630pxを推奨しています。これは高解像度デバイスで適切に表示するためです。このサイズで画像を指定すると大きく表示されユーザーの講読率は上がるかもしれません。大きいサイズで画像を表示する最低ラインは600×315pxです。これ以下だと表示される画像は小さくなります。小さい画像の最低ラインは200×200pxです。

Facebookでは画像の比率を「1.91:1」を推奨しています。

`og:url`

ページのURLを指定します。URLは絶対パスです。このURLには正規のURLを指定してください。URLにユーザー固有のパラメーターなどを付加してはいけません。

オプション Metadata プロパティ

次のプロパティは、任意で付け加えることができます。

og:audio: 音声ファイルのURLを指定します。
og:description: ページの説明を記述します。だいたい二行文ぐらいがベスト
og:determiner: タイトルの前に付く単語（a, an, the, “”, auto）autoをしていするとユーザーが「a」か「an」を選べる。デフォルトでは「””」（空白）
og:locale: ローカル言語の指定です。デフォルトでは「en_US」
og:locale:alternate: 他の言語翻訳を反映させる場合指定します。
og:site_name: サイトの名前です。URLではありません。
og:video: 動画ファイルのURLを指定します。

この中でも「og:description」「og:site_name」がよく使われると思います。

構造化プロパティ

前述した「og:image」で少し触れましたが、他にも「og:video」「og:audio」などはオプションに構造化プロパティをもっています。記述方法は今までと変りなく<meta>タグを使います。property属性に少し付け足すだけです。

og:image:url – 「og:image」と同じです。
og:image:secure_url – WebページがHTTPSを必要とする場合のURL
og:image:type – 画像のMIMEタイプ（image/jpeg, image/gif, image/png, など）
og:image:width – ピクセル幅
og:image:height – ピクセル高さ

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

「og:image:url」は「og:image」と同じなので「og:image」を使っています。他のプロパティのオプションは、公式サイト等で確認してみてください。

画像を複数指定する（配列）

「og:image」は複数指定するすることができます。<meta>タグを複数書き込むことができます。以下に公式サイト「The Open Graph protocol」の例を示します。

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image" content="http://example.com/rock2.jpg" />

オプションも指定した場合の例は

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

このコードでは3つの画像を指定していて、1つ目は300×300、2つ目はサイズ指定なし、3つ目は高さが1000になります。

オブジェクトタイプ

<head>タグに「prefix="article: http://ogp.me/ns/article#"」を明記し「og:type」にarticleを指定するとプロパティに「article:」が使えるようになります。

Facebookでは「article:author」「article:publisher」を指定するとシェアされたニュースフィードの記事にFollowボタンを表示させることができます。

article:author: 記事の著者の指定です。FacebookのプロフィールページURLやID、FacebookページURLを指定できます。FacebookプロフィールURLを指定した場合「Follow」を有効にすればFollowボタンを表示できます。
article:publisher: メディア運営者用のメタタグです。指定できるのはFacebookページURLかIDです。FacebookページのFollowボタンを表示できます。

その他のプロパティはReferenceで確認してみてください。

<meta property="article:publisher" content="https://www.facebook.com/millkeyweb" />

article Open Graph Object Type | Facebook Developers

Facebook独自のプロパティ

「fb:」はFacebook独自のプロパティで以下のようなものがあります。Facebookでは「fb:app_id」か「fb:admins」が必須プロパティのようです。

fb:admins – アプリ管理者のFacebook ID
fb:app_id – FacebookアプリID
fb:profile_id – フォロー可能なFacebook ID

このプロパティを使うと「Facebookインサイト」が使えるようになります。FacebookインサイトはFacebook独自のアクセス解析ツールです。主に以下の様なことが解析できます。

「いいね！」ボタンのCTR
「送る」ボタンのCTR
オーガニックシェア
コメントボックス

「いいね！」ボタンなどを設置しているサイトはどれくらいボタンがクリックされたか、「いいね！」記事への反応はどうか気になると思うので設定しておくとよいでしょう。

「fb:app_id」の指定にはアプリの作成が必要です。アプリの作成は下記リンク先を参考にしてください。

アプリの作成ができたら、Facebookインサイトページを開いて「ウェブサイトのインサイト」をクリックし、ドメインとリンクするアプリを選択したら<meta>タグができます。

サイトの表示速度への影響と対策

HTMLの<head>…</head>内に<meta>タグを書いて指定するので、大量のMetadataを指定するとページの読み込み速度に影響を与えます。

その対策として別URLからMetadataを参照するポインタという方法が使えます。

 <meta property="og:title" content="Austin's Favorite Songs"/>
 <meta property="og:type" content="music.playlist"/>
 <meta property="og:url" content="{}"/>
 <meta property="og:image" content="{}"/>
 <meta property="og:site_name" content="Amazon"/>
 <meta property="fb:app_id" content="{your_app_id}"/>
 <meta property="music:creator" content="http://samples.ogp.me/390580850990722"/>
 <link rel="opengraph" href={DESTINATION_URL}/>

<meta property="og:type" content="metadata"/>
 <link rel="origin" href={SOURCE_URL}/>
 <meta property="music:song" content="http://www.amazon.com/gp/product/B000UBLXG4/ref=dm_dp_trk1">
 <meta property="music:song:track" content="1">     
 <meta property="music:song" content="http://www.amazon.com/gp/product/B000UBLXG4/ref=dm_dp_trk2">
 <meta property="music:song:track" content="2"> 
 ....

ポインタを使うにはいくつかのルールがあります。

基のURLに基本のog:Metadataが書かれている必要があります。
参照先には基のURLに書かれていない<meta>要素を書きます。
ポインタは複数使えますが、参照先URLから下層にポインタをもつことはできません。
ポインタは<link>タグにrel="opengraph"を指定すると参照されます。
```
<link rel="opengraph" href="ポインタ先のURL"/>
```

参照先には2つのタグを書く必要があります。

<meta property="og:type" content="metadata"/>
<link rel="origin" href="基のURL"/>

Facebook developersの以下のページも参考にしてみてください。

ブログの場合だと「タイトル・画像・URL・概要」などの基本的なMetadataで十分だと思うのでポインタを使うことは少ないかもしれません。

Open Graph が適切かの確認方法

FacebookにはOGPが適切に設定されているか確認できる「Open Graph Debugger」というツールがあります。OQPのタグを<head>…</head>内に記述したらそのサイトにエラーがないか確認してみましょう。

Open Graph Debugger の使い方

OGPを記述したページのURLをコピーして、「Open Graph Debugger」を開きます。URLをデバッガーにペースして、デバッグをクリックします。問題なければオブジェクト情報が表示されます。

問題があるときは、「エラー」や「警告」がでます。表示された内容をもとに修正してみてください。

タグは正しいのに認識されない時

認識されていないときは、Facebookクローラーがあなたのサイトを巡回できていないからかもしれません。BASIC認証やIPアドレスの拒否を行っていないでしょうか？

もし、BASIC認証やIPアドレスの拒否をしている場合はFacebookクローラーが巡回できるように許可させる必要があります。以下のリンク先を参考に設定してみてください。

FacebookプロフィールページをFollowできるように設定

「article:author」を設定するには、個人アカウントをFollowできるように設定を変更しなければいけません。デフォルトでは、「友人」までになっているはずです。

設定を変更して、あなたを友人に含めなくてもFollowすることであなたの投稿をFollowしたユーザーのニュースフィードに表示できるようにしましょう。

設定の変更方法

Facebookプロフィールを開いて、「右上のギア」→「設定」→「左サイドバーのフォロワー」と進むと『フォロワー設定』から「フォローを許可する人」を変更できます。

「友人」になっている場合「全員」に変更しましょう。

変更すると更に下記の4つの詳細設定ができます。

フォロワーコメントの許可
フォロワーのお知らせ
ユーザーネーム（ユニークURL）編集
Twitterアカウントをリンク

この辺の設定はお好みでどうぞ、

Best Practices

Metadata多く書きすぎても読み込み速度を下げるのブログやニュースサイトの場合下記のようにするのが良いのではないでしょうか？

Facebookアプリの作成
FacebookプrフィールページのFollow設定

HTMLへのタグ記入
「og:type」は記事ページはarticleそれ以外はwebsiteにする

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <meta property="fb:app_id" content="アプリID" />
  <meta property="og:type"   content="article" />
  <meta property="og:url"    content="ページURL" />
  <meta property="og:title"  content="記事タイトル" />
  <meta property="og:image"  content="サムネイル画像" />
  <meta property="og:description"  content="記事の抜粋" />
  <meta property="og:site_name"  content="サイト名" />
  <meta property="article:publisher" content="FacebookページURL" />

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="fb:app_id" content="アプリIDは">
<meta property="og:type" content="website">
<meta property="og:url" content="https://millkeyweb.com/">
<meta property="og:title" content="ページ名">
<meta property="og:image" content="デフォルト画像">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ブログのdescription">

デバッガーで確認

Work Sessions

WordPressに以下の条件でOGPを実装してみよう。

条件分岐してarticleとwebsiteを分けて出力する
「og:image」にはサムネイル画像を指定、なければコンテンツ内から画像を探す。何もない場合デフォルト画像表示
「og:description」にはコンテンツから80～90文字抜粋する

上記の条件で私なりに実装したものはこちらの記事に書いてみました。

SNSでリッチ表示してくれるOGPをWordPressに、プラグインを使わず設定する

あとがき

WordPressに実装するコードは別の記事に書きます。誰かの参考になれば幸いです。間違いがあったら教えて下さい。

Facebookなどでサイトが共有された時、リッチ表示するOGPの設定

OGPとは何か？

prefix属性はなにか？

基本のメタデータ設定

必須プロパティ

必須プロパティの説明と抑えておくポイント

`og:title`

`og:type`

`og:image`

`og:url`

オプション Metadata プロパティ

構造化プロパティ

画像を複数指定する（配列）

オブジェクトタイプ

Facebook独自のプロパティ

サイトの表示速度への影響と対策

Open Graph が適切かの確認方法

Open Graph Debugger の使い方

タグは正しいのに認識されない時

FacebookプロフィールページをFollowできるように設定

設定の変更方法

Best Practices

Work Sessions

あとがき

関連

関連記事

プロフィール

tadashi1105

認証済みサービス

フォローする

カテゴリー

タグ

OGPとは何か？

prefix属性はなにか？

基本のメタデータ設定

必須プロパティ

必須プロパティの説明と抑えておくポイント

og:title

og:type

og:image

og:url

オプション Metadata プロパティ

構造化プロパティ

画像を複数指定する（配列）

オブジェクトタイプ

Facebook独自のプロパティ

サイトの表示速度への影響と対策

Open Graph が適切かの確認方法

Open Graph Debugger の使い方

タグは正しいのに認識されない時

FacebookプロフィールページをFollowできるように設定

設定の変更方法

Best Practices

Work Sessions

あとがき

記事を共有する

関連

関連記事

プロフィール

tadashi1105

認証済みサービス

フォローする

カテゴリー

タグ

`og:title`

`og:type`

`og:image`

`og:url`