FacebookやGoogle+、TwitterCardsにリンクを投稿すると、リンク先のページで使われている画像を表示してくれます。表示する画像は OGPタグなどで指定できるのですが、適切なサイズの画像を指定しないと、別の画像が表示されたり、意図しないところで画像が切れて表示されてしまいます。そこで、Facebook、Google+、TwitterCardsのリンク投稿に表示される画像のちょうどいいサイズと、画像の指定方法を調べてみました。
※諸々の情報は、2014年9月時点のものです。
Facebookの画像サイズ
https://developers.facebook.com/docs/sharing/best-practices#images
推奨サイズは1200×630ピクセル、最低でも600×315ピクセルの画像を使用するべきとあります。600×315ピクセル以下の画像でも表示されますが、サイズが小さすぎる画像は「og:image」タグで指定していても無視されるようです。また、正方形の画像で表示される場合は、両端が切り取られます。
画像の指定方法
https://developers.facebook.com/docs/sharing/best-practices#tags
「og:image」タグで指定します。
ツール
▽ Open Graph Debugger
https://developers.facebook.com/tools/debug/
Facebookで「og:image」タグで指定した画像がちゃんと表示されるかなど、OGPの設定を確認できます。
▽ OGP画像シミュレータ
http://ogimage.tsmallfield.com
OGP画像をタイムライン上でどう見えるかシミュレートできます。とても便利です。
Google+の画像サイズ
https://developers.google.com/+/web/snippet/?hl=ja#faq-plus-snippet-image
正方形にほど遠くなく、高さが120ピクセル以上であればよいようです。幅が100ピクセル未満の場合は、高さを300ピクセル以下にする必要があるとも書いてありますので、縦横比が3倍以内なら、正方形にはほど遠くないと判断されると考えてよいでしょう。
ただ、実際のリンク投稿では上下が切り取られた、426×255ピクセルの画像が表示されますので、正方形の画像がよいというわけではありません。
画像の指定方法
https://developers.google.com/+/web/snippet/?hl=ja
schema.orgマイクロデータでの指定が推奨されていますが、マイクロデータでの画像指定がなければ、「og:image」タグで指定した画像が使用されます。
ツール
▽ 構造化データテストツール
http://www.google.com/webmasters/tools/richsnippets
指定した画像が、ちゃんと使用されているかなどを確認できます。
TwitterCards（Summary Large Image）の画像サイズ
少なくとも、280×150ピクセル以上であるべきとあります。容量は1MB以下であることが必要です。また、画像の内容は、サイトのロゴなど統括的な画像ではなく、ページの内容を表す画像を使うようにともあります。
少し試してみましたが、TwitterCards（Summary Large Image） は、画像を切り取って表示することが無いようです。ただ、幅が480ピクセル以下の画像は、拡大されることなく小さいまま表示されてしまいますので、画像の幅は480ピクセル以上あったほうが良いでしょう。
画像の指定方法
「twitter:image:src」タグで指定しますが、このタグがなければ「og:image」タグで指定した画像が使用されます。
TwitterCardsは初回のみ、利用申請が必要です。もろもろこちらのサイトを参考にさせて頂きました。
ツール
▽ Card Validator（右側にある「Cards Validator」をクリック）
https://cards-dev.twitter.com/validator
URLをツイートした時にTwitterCardsがどのように表示されるかを確認できます。
各SNS共通で使える画像サイズ
Facebook、Google+、TwitterCards（Summary Large Image）共通で使うことができるリンク投稿の画像サイズは、条件が一番きびしいFacebookにあわせて「1200×630ピクセルで、中心630×630ピクセルに切り取られても、成り立つ画像」であることが必要です。
1200×630ピクセル画像の表示サンプル
Facebook PCブラウザ
Facebook スマートフォンアプリ
Google+ PCブラウザ
Google+ スマートフォンアプリ
Twitter PCブラウザ表示
Twitter スマートフォンアプリ
ただ、作ってみて分かったのですが、この条件の画像を作るとなると、単純に1200×630ピクセルの画像の中心に、630×630ピクセル画像を入れ込めばよい分けではなく、1200×630ピクセルの画像としても成り立っていないと、上のサンプルの画像のように、明らかに中心を入れ込んだ画像になってしまいます。
簡単に作れる画像サイズとしては「600×315ピクセルの画像を、600×600ピクセルの正方形の画像の中に入れ込む」といった記事がありました。逆転の発想ですね、ちょっと目から鱗でした。
600×315ピクセル画像の表示サンプル
Facebook PCブラウザ
Facebook スマートフォンアプリ
Google+ PCブラウザ
Google+ スマートフォンアプリ
Twitter PCブラウザ
Twitter スマートフォンアプリ
Google+のiOSアプリと、TwitterCards（Summary Large Image）では上下の余白が表示されますが、確実に600×315ピクセルの画像を表示することができます。
まとめ
ちょうどいい画像サイズ
・理想
1200×630ピクセルで、中心630×630ピクセルに切り取られても、成り立つ画像
・簡単
600×315ピクセルの画像を、600×600ピクセルの正方形の画像の中に入れ込む
画像の指定方法
基本的には「og:image」タグで指定すればOK
SNS別に画像を指定したい場合は、Google+はschema.orgマイクロデータで指定、TwitterCardsは「twitter:image:src」タグで指定する。
以上です。
コメント