【2015年最新版】FacebookのOGP設定がわかるサイト6選＋1

【最新版】FacebookのOGP設定がわかるサイト6選＋1

Ferretエンジニアの柿崎です。

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

本記事では、最新のFacebookの仕様に準ずるOGPの設定や確認方法、注意点について参考になるホームページやブログを集めました。

・OGPの設定方法
・メタタグの「og:image」に設定する画像（OGP画像）のサイズ
・メタタグの「fb:admins」「fb:app_id」に設定するadminID、appIDの取得方法
・OGP設定が正しいかを確認できるツール
・OGP設定のキャッシュを更新する方法
・OGP設定のタイトルが変更できなくなる場合がある
・番外編　Twitter Cardsの設定
・まとめ

１.OGPの設定方法

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

OGPの設定のためのメタタグ（HTMLコード）の記述方法をサンプルつきで解説しています。「The Open Graph protocol」公式サイトやFacebook DevelopersのReferenceの公式情報を元にした最新の仕様でのOGPタグ記述方法を紹介しています。

ポイント

・Prefix属性は<head>内に記述。
・必須プロパティ＋オプションの「og:description」「og:site_name」は必ず設定しましょう。
・アクセス解析ツール「Facebookインサイト」を利用する場合には、「fb:admins」か「fb:app_id」を設定。

２.メタタグの「og:image」に設定する画像（以下「OGP画像」）のサイズ

2014年9月時点でのFacebookの仕様に適応したOGP画像サイズを紹介しています。前回の仕様の適応サイズについても言及しています。

ポイント

・OGP画像は1200ピクセル（横）×630ビクセル（縦）が最適。
・前回の仕様で必要だった上下に余白のある画像作成の必要はなし。

３.メタタグの「fb:admins」「fb:app_id」に設定するadminID、appIDの取得方法

Wordpress＆facebook連携設定① OGP設定方法

「Facebookインサイト」を利用する際に必要な、adminIDやappIDの取得方法を解説しています。Facebookへの開発者登録からアプリの初期設定まで、画面キャプチャを交えてわかりやすく説明しているので、ここの設定でつまずいている方は必見です。

ポイント

・adminIDは特定のURLにアクセスするだけで取得できる。
・appIDの取得にはFacebookへの開発者登録からアプリの初期設定まで必要。

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

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

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

ポイント

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

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

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

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

ポイント

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

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

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

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

ポイント

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

番外編　Twitter Cardsの設定

すぐにできるTwitter Cards設定 - E-riverstyle Vanguard

Twitter CardsとはURLを含んだツイートに、そのページのタイトル・概要・アイキャッチ画像（サムネイル）を表示させる仕組みです。
ここまでFacebookのOGP設定についてのサイトを紹介してきましたが、正しくOGP設定されていれば、メタタグ2行追加＋Twitterへの申請だけでTwitter Cardsの設定ができてしまうので、合わせて設定してしまいましょう。

ポイント

・正しくFacebookのOGPが設定されていれば、メタタグに2行追加するのみ。
・Twitter Cardsの設定（メタタグに2行追加）が本番公開された状態でTwitter側へ申請する必要あり。

まとめ

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

今後Facebookの仕様で変わる事もおおいに考えられますが、最新のFacebook仕様に準ずる設定や確認方法をまとめてみました。
（※2015年1月31日時点の記事になります。）
たまにデバックしてみるとエラーが出るようになっていたりすることもあるので、既にOGP設定済みの方でも定期的にFacebookデバッカーを使い、正しい設定ができてるか確認することをオススメします。