FacebookのOGP表示確認方法と適正画像サイズ

技術情報
FacebookのOGP表示確認方法と適正画像サイズ

今回はFacebookに表示されるOGP情報の確認方法について説明します。

また、Facebook上できれいに表示される画像サイズについてもご紹介したいと思います。

OGPタグ出力設定の完了したページがありましたら、次のURLに行きます。

https://developers.facebook.com/tools/debug/

英語表記ですが、観るポイントは少ないので大丈夫です。

debugger2

もちろんFacebookに登録済である必要があります。上記の様にログインを求められますので必要情報を入力します。

debugger3

”Debugger”の画面に行きましたら、”Enter a URL, access token, or Open Graph Action ID”と書かれた欄にOGP表示の確認をしたいページのURLを記入します。(ここでは本記事のURLを記入しています)

そして、左下の”Debug”ボタンをクリックします。

debugger4

本記事ページの様に生まれたばかりのURLの場合には上図の様にデータが無いとエラーが出ます。

実はFacebookも検索エンジンの様に世界中のホームページを巡回して情報を集めています。そのときにOGPタグがなければ適当な情報を勝手に登録します。

ですから、勝手な情報を登録させないためにOGPタグを付けるわけです。

強制的に現在のOGPデータを取得させるために、”Fetch new scrape information”ボタンをクリックします。(時間が経てばクロールして更新しますが、まあ待てないですよね)

debugger5

Facebookのクローラーが対象のURLからOGP情報を読み取ります。正しく読み込むとResponse Codeを200にする様です。

下に読み込んだOGP情報が表示されますが、英語圏のサイトですから日本語はここでは正しく表示されません。

debugger6

更に下部に実際の表示が出ます。しかし、ここはサイズなどが正確ではありませんから出ているな程度の確認をします。

取敢えず、FacebookのサーバーはこのURLのOGP情報を正しく解釈したことは確認しました。

次に実際の表示を確認します。

debugger7

実際にFacebookの投稿欄に対象のURLを入力します。ここで表示が意図した通りであれば確認は終了です。

次にFacebookのOGP表示に使用される画像ですが、きれいに枠に入ったり横に小さく表示されたり、物によっては表示すらされなかったりします。

debugger8

上図はFacebookの正式なOGP画像に対するコメントです。いろいろ書いてありますが、要は、横(幅)と縦(高さ)の比を1.91:1にするときれいに表示されますと言ってます。そして具体的には少なくとも600×315ピクセル、1200×630ピクセル以上でもOK(画像容量が5MB以下ならば)だと言っています。このサイズ比を大きく外れるとお任せ表示になります。

また、上図には記述が無いですが、横(幅)の最小値は200ピクセルでそれ以下は表示されない可能性があるようです。

そこでですね、結論としては、FacebookのOGPをきれいに出したいならば600×315ピクセルの画像を使うと覚えたらいかがでしょうか。(このサイズjpgやpngで5MBを超えることはまずありませんから)

お試しください。

«
»
  • LINEで送る

音声ミュートを解除すると軽快な音楽が流れます (^^♪