この記事は2016年12月2日に更新しました。

Web担当者の皆様、運営しているホームページWebサイトのOGP設定は行っていますか?

OGPとは「Open Graph protocol」の略称です。FacebookやTwitterGoogle+、mixiなどのSNSでシェアされた際に、そのページタイトルURL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。

そこで今回は、最新のFacebookの仕様に準ずるOGPの設定や確認方法、注意点などをご紹介します。

OGPとは

OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページタイトルURL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させる仕組みです。

ogp画像.jpg
上の赤枠のように表示を目立たせることが可能で、URLだけの場合より目立つためクリック率が上がります。

OGPの基本設定

OGPは下記コードをWebサイトやホームページのソースに埋め込むことで実装することができます。

<!-- ※基本共通設定 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<title>ページのタイトル</title>
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />

<!-- Facebook用設定 -->
<meta property="fb:app_id" content="App-ID(15文字の半角数字)" />
もしくは
<meta property="fb:admins" content="adminID(15文字の半角数字)" />

<!-- ※Twitter共通設定 -->
<meta name="twitter:card" content="Twitterカードの種類" />

...

</head>

og:title

og:titleにはページタイトルを指定します。タイトルの設定は...で通常行いますが、og:titleに別のタイトルを設定すると、ソーシャルなどでシェアされた際は、そちらが優先して表示されます。設定しない場合は、...が表示されます。

og:type

content属性に、オブジェクトタイプを記述します。

様々なものが選択できます。詳細は以下より確認してください(英語)
http://ogp.me/#types
https://developers.facebook.com/docs/reference/opengraph

▼よく使われるog:type

website

<meta property="og:type" content="website" />

ウェブサイトのTOPページに指定します。

article

<meta property="og:type" content="artcle" />

ウェブサイトやブログのTOPページ以外のときに指定します。

og:url

ページURLを指定します。URLの指定方法は絶対パスで行う必要があります。

▼絶対パス(OK)

<meta property="og:url" content="https://ferret-plus.com/images/">

▼相対パス(NG)

<meta property="og:url" content="/images/">

og:image

og:imageは画像を指定することができます。
画像を指定すると、シェアされたときなどに表示する画像を決めることができます。画像の指定方法は絶対パスで行う必要があります。

▼絶対パス(OK)

<meta property="og:image" content="https://ferret-plus.com/images/logo.jpg">

▼相対パス(NG)

<meta property="og:image" content="/images/logo.jpg">`

Facebookは画像サイズを1200px✕630pxにするように推奨していて、そのサイズにするとキレイに大きなサイズで表示されます。

og:site_name

サイト名を指定します。

og:description

ページの説明を記述します。

Facebook用設定

<meta property="fb:app_id" content="App-ID(15文字の半角数字)" />
もしくは
<meta property="fb:admins" content="adminID(15文字の半角数字)" />

fb:app_id

fb:app_idは、FacebookにOGPを表示させるためには必須のプロパティとなります。
fb:app_id以外にもfb:adminsも使うことができます。ただし、fb:adminsの場合、adminIDという個人IDを使うことになるため、個人情報を晒しているようなものです。出来ればfb:app_idを使うほうが良いです。

app_idの取得方法はちょっと手間が掛かるので下記サイトから確認してみてください。
http://blog.sixapart.jp/2012-04/fb-app-id.html

fb:admins(オススメしません)

ページの管理者をFacebookのユーザーIDをで指定する記述です。fb:adminsで設定する場合は、下記のように設定します。

<meta property="fb:admins" content="adminID(15文字の半角数字)" />

adminIDの取得方法ですが、

1.Facebookで、自分の個人アカウントページを開く
2.自分のプロフィール写真をクリック
3.拡大写真が表示されたページURLの最後の方を確認
4.「.123456789012345&type=1&」の「&type」の前15桁の数字をメモ
引用元:ゆめぴょんの知恵

これが分かりやすいかと思います。

Twitter用設定

<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@[Twitter ID]" />
<meta name="twitter:player" content="@[Twitter ID]" />

Twitter CardsとはURLを含んだツイートに、そのページタイトル・概要・アイキャッチ画像(サムネイル)を表示させる仕組みです。

twitter:card

twitter:cardは、twitterでOGPを表示させるときの表示タイプを指定します。

何も設定しないと下記のようになります。
summary.jpeg

▼content="summary"

summary.jpeg
最も一般的な表示形式です。

▼content="summary_large_image"

summary_large.jpeg
Summaryカードの画像がより大きく表示される、形式的にはFacebookのOGPに近いタイプのカードです。

▼content="photo"

photo.jpeg
画像が優先して表示されるタイプです。画像をクリックするとツイート内容が表示されます。
ビジュアル訴求が重要な業種(アパレルや飲食店等)にオススメです。

▼content="gallery"

gallery.jpeg
一度の投稿で複数枚の画像を表示させることができるカードです。
表示させる画像は最大4枚まで選択することができます。

▼content="app"

app.jpeg
アプリを紹介する際に利用したいカードです。アプリケーションの名前や紹介文、アプリアイコンだけでなく、評価や価格なども表示されます。

OGPのオプション設定

OGPには基本設定以外にも細かく設定することができます。

場所・地域情報

<meta property="og:latitude" content="緯度" />
<meta property="og:longitude" content="経度" />
<meta property="og:street-address" content="住所(番地など)" />
<meta property="og:locality" content="市区町村" />
<meta property="og:region" content="都道府県" />
<meta property="og:postal-code" content="郵便番号" />
<meta property="og:country-name" content="国名" />

連絡先情報

<meta property="og:email" content="メールアドレス" />
<meta property="og:phone_number" content="電話番号" />
<meta property="og:fax_number" content="FAX番号" />

動画

<meta property="og:video" content="動画のファイルパス" />
<meta property="og:video:height" content="動画の高さサイズ" />
<meta property="og:video:width" content="動画の横幅サイズ" />
<meta property="og:video:type" content="動画のファイルタイプ(application/x-shockwave-flashなど)" />

音楽

<meta property="og:audio" content="音楽のファイルパス" />
<meta property="og:audio:title" content="音楽のタイトル" />
<meta property="og:audio:artist" content="音楽のアーティスト名" />
<meta property="og:audio:album" content="音楽のアルバム名" />
<meta property="og:audio:type" content="音楽のファイルタイプ(application/mp3など)" />

その他OGPに使えるサイト

OGP設定が正しいかを確認できるツール

Open Graph Debugger - Facebook Developers

Open Graph Debugger - Facebook Developers
※事前にFacebookログインが必要

OGPの設定を確認するためのFacebook公式ツール「シェアデバッガー」。
通称はFacebook Debugger。一昔前はURLリンターやOpen Graph Debuggerという名前でした。使い方はOGP設定を確認したいページURLを入力して「Debug」ボタンを押すだけ(以下「デバック」)。不具合があればエラーの詳細が表示されるので、それを元にOGP設定を見直してみましょう。

・使い方はURLを入力してデバックするのみ。
・デバック後の結果画面でエラーが出ていないかを確認。
・シェアされたときのプレビューも表示されるので意図した通りに表示されているか確認。特にOGP画像がきれて(意図しないトリミングをされて)いないか。

参考:
クリック率に影響!? OGP設定で欠かせないFacebook Debuggerの使い方

OGP設定のキャッシュを更新する方法

FacebookにキャッシュされたOGP設定を手動・自動でクリアする方法

FacebookにキャッシュされたOGP設定を手動・自動でクリアする方法

OGP設定をFacebookが反映してくれない場合は、Facebook側がもっているキャッシュ(一度設定された情報を保存して、次回からは保存された情報から表示させる仕組み)を更新する(クリアする)必要があります。
頻繁に仕様が変更されるFacebook Debuggerですが、現在はデバックをおこなっただけではキャッシュは更新されません。最新のFacebook Debuggerの画面キャプチャを用いてキャッシュの更新方法を解説しています。

・「Fetch new scrape information」ボタンをクリックすることでキャッシュが更新される。
・仕組みを作れば、自動で又は一括でキャッシュを更新することも可能。

OGP設定のタイトルが変更できなくなる場合がある

FacebookのOGPデバッガーがログイン必須で自動キャッシュクリア不可になって困った | 編集長ブログ―安田英久 | Web担当者Forum

FacebookのOGPデバッガーがログイン必須で自動キャッシュクリア不可になって困った | 編集長ブログ―安田英久 | Web担当者Forum

Facebook公式の情報を元にOGP設定のタイトルが変更できなくなるパターンを紹介。いいね!が50を越えているとFacebook Debuggerでキャッシュを更新してもタイトルが変更できなくなる、という細かな仕様も覚えておいて損はないでしょう。

・OGP設定のタイトルの改善はいいね!が50を越える前に完了させる。

まとめ

OGP設定をすることにより各種SNSのウォールやニュースフィードに「この記事はこういった内容です」と視覚的なわかりやすさやインパクトを与えることができます。
こういったことによりSNS上で拡散されれば、より多くの人の目に触れ、最終的に集客にもつながっていきます。もはやOGP設定はホームページの運営において必須の設定といっても過言はないでしょう。

今後Facebookの仕様で変わる事もおおいに考えられますが、最新のFacebook仕様に準ずる設定や確認方法をまとめました。

たまにデバックしてみるとエラーが出るようになっていたりすることもあるので、既にOGP設定済みの方でも定期的にFacebook Debuggerを使い、正しい設定ができてるか確認することをオススメします。

このニュースを読んだあなたにおすすめ

Facebookページのファンを増やそう
エッジランクとは
Facebookページのキャンペーンとは

この記事に関連するカリキュラム

Facebookページ(フェイスブックページ)カリキュラム

Facebookページ(フェイスブックページ)カリキュラム

近頃、大企業から街角の小さなお店まで幅広く活用しているのがフェイスブックページです。フェイスブックページ開設から運用の際に重要な反響を得やすい投稿のポイントをご説明します。無料で手軽に始められるフェイスブックページは、こちらから始めましょう。