SNSへのリンクの投稿時に、表示される画像のちょうどいいサイズ設定

切り取られて表示された画像とちゃんと表示された画像 クラウド
クラウドWordPress
スポンサーリンク

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)の画像サイズ

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-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表示 1200x630ピクセル

Facebook PCブラウザ

Facebook スマフォ表示 1200x630px

Facebook スマートフォンアプリ

Google+ PCブラウザ 1200x630px

Google+ PCブラウザ

Google+ スマートフォンアプリ 1200x630

Google+ スマートフォンアプリ

Twitter PCブラウザ表示 1200x630

Twitter PCブラウザ表示

Twitter スマートフォンアプリ 1200x630px

Twitter スマートフォンアプリ

ただ、作ってみて分かったのですが、この条件の画像を作るとなると、単純に1200×630ピクセルの画像の中心に、630×630ピクセル画像を入れ込めばよい分けではなく、1200×630ピクセルの画像としても成り立っていないと、上のサンプルの画像のように、明らかに中心を入れ込んだ画像になってしまいます。

簡単に作れる画像サイズとしては「600×315ピクセルの画像を、600×600ピクセルの正方形の画像の中に入れ込む」といった記事がありました。逆転の発想ですね、ちょっと目から鱗でした。

600×315ピクセル画像の表示サンプル

Facebook PCブラウザ 600x600px

Facebook PCブラウザ

Facebook スマートフォンアプリ 600x600px

Facebook スマートフォンアプリ

Google+ PCブラウザ 600x600px

Google+ PCブラウザ

Google+ スマートフォンアプリ 600x600px

Google+ スマートフォンアプリ

Twitter PCブラウザ 600x600px

Twitter PCブラウザ

Twitter スマートフォンアプリ 600x600px

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」タグで指定する。

以上です。

コメント

タイトルとURLをコピーしました