Facebook・TwitterのOGP設定方法まとめ

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
※事前にFacebookログインが必要

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

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

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

Facebookのタイムラインを見ていると、同じようにリンクをシェアしているのに表示が違うことはないでしょうか。これはシェアされた時の表示方法を指定できるOGP（Open Graph protocol）の設定によるものです。 Facebook Debugger（Facebook デバッガー）はOGPが正しく設定できているのかをチェックできるサービスで、使わないと意図したとおりの表示にならない可能性があります。 そこで今回は、Facebook Debuggerの使い方についてご紹介します。

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

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

OGP設定をFacebookが反映してくれない場合は、Facebook側がもっているキャッシュ（一度設定された情報を保存して、次回からは保存された情報から表示させる仕組み）を更新する（クリアする）必要があります。

頻繁に仕様が変更されるFacebook Debuggerですが、現在はデバックをおこなっただけではキャッシュは更新されません。最新のFacebook Debuggerの画面キャプチャを用いてキャッシュの更新方法を解説しています。

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

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

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

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

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