株式会社コプロシステム

お問い合わせ

2013年9月20日

[Facebook]リンク投稿時のサムネイルサイズの仕様が変更になったので検証してみました(2013年9月)

  • このエントリーをはてなブックマークに追加

こんにちは、コプロシステムWebデザイングループの石川です。


Facebookの仕様変更。
小さなモノから大きなモノまで、世界中で使われているSNSの仕様変更はほぼ毎日繰り返されていて、時にはWebクリエイターたちを混乱に陥れることで有名です。(言い過ぎ?)

そんな中、先週の9月10日(米国時間)に大きな仕様変更がありました。
既にお気づきの方も多いかもしれませんが、FacebookへWebページやブログ記事などのURL(リンク)を投稿した時にニュースフィードに表示されるサムネイルのサイズが大きくなった という仕様変更です。

↑比較してみると一目瞭然ですね。
「サムネイルのサイズが大きくなった」ということはつまり、「ニュースフィードを閲覧している人の目に付きやすく、クリックされやすくなった」ということです。
ただ、このサムネイルのサイズ、すべてのリンク投稿が対象というわけではなく、一定のルールがあるようで、そのルールに則っていないとサムネイルのサイズが小さくなったり、最悪の場合サムネイル自体が表示されなかったりします。

ということで、今回のFacebookの仕様変更を受けて、Facebookへのリンク投稿時に表示されるサムネイルやそのサイズについて検証をし、まとめてみました。
Webクリエーターの方だけでなく、FacebookページやWebサイトのブログを運営されている方々にも参考になると思いますので、是非ご覧ください。

サムネイルに好きな画像を表示するためには、OGP設定をしなければいけない

基本的な部分ですが、念のため簡単に記述します。
ご存知の方は飛ばしてしまって大丈夫な内容です。


OGP設定とは?

私たち人間がウェブサイトやブログを見ている時、

  • そのサイトがなんという名前なのか?
  • どんな種類のサイトなのか?
  • どんな情報が載っているのか?

というのは、我々"人間"であればだいたい理解することができます。

しかし、"プログラム"というものは、ウェブページのコンテンツや文章からだけでは、これらの情報を正確に把握することが難しいため、統一した記述ルール(プロトコル)に則って明示してあげなければいけません。
それは、Facebookという巨大SNSサービスのプログラムも例外ではなく、サイト名/サイトの種類/ページの概要。はたまた、Facebookのウォールやニュースフィード上に表示する時の画像/タイトルテキスト/リンクURLなどを、統一した記述ルール(プロトコル)に則って明示してあげることで、外部のウェブサイトやブログはFacebookというSNSに参加することができるのです。

その「統一した記述ルール(プロトコル)」のことを「OGP(Open Graph Protocol)」と言い、そのOGPをウェブサイトやブログに設定することを「OGP設定」と言います。


OGP設定ってどうやるの?

OGP設定の詳しいやり方については今回の記事のメインではないので割愛しますが、検索エンジンで検索するとたくさん出てきます。
また、2011年の情報ですが私が過去に書いた記事もご参考いただければと思います。
「いいね!」ボタンを設置しただけで大丈夫ですか?~OGP設定の重要性について~


og:imageに指定された画像がFacebook上でサムネイルとして表示される

例えば当記事のog:imageには「http://www.coprosystem.co.jp/tipsblog/img/img_tips_130919-01.png」という画像を指定していて、当記事のリンクをFacebookでシェアしようとするとこの画像がサムネイルとして表示されます。

このog:imageを設定していないと、そのページに存在する画像をFacebookが自動的にピックアップし、ユーザがシェアする時に選択するようになります。

例えば、ポータルサイトのMSNのトップページはog:imageの設定がされていないため、リンクをシェアしようとすると上記のように一見MSNとは無関係っぽいガソリンスタンドの画像が表示され、「3件中1件」と選択できるようになっています。
ただこれだと、そのページやサイトの運営者が意図しない画像がサムネイルとなってしまい、印象が良くないのでニュースフィード上でクリックされない といった可能性もあるので要注意です。

サムネイルのサイズにはいろいろ種類がある

ogp:imageに指定した画像のサイズによって、↓このようにサムネイルのサイズに差が出ます。

サムネイルのサイズについての検証

og:imageに指定した画像のサイズがニュースフィードに表示されるサムネイルのサイズにどのように影響するか、PC版UIのニュースフィードを中心に検証してみました。
※スマホ版(iPhone5)UIのニュースフィードは一部ルールが不明な部分があります。

og:imageに指定した画像のサイズが、幅398px以上 かつ 高208px以上 の場合

サイズが幅398px以上 かつ 高208px以上の画像をog:imageに指定すると、以下のような結果になりました。

og:imageに指定した画像サイズ(幅x高) og:imageに指定した画像アスペクト比 PCフィード上の画像サイズ スマホフィード上の画像サイズ
500px × 500px 1:1 398px × 208px 560px × 292px
500px × 261px 1.91:1
416px × 208px 2:1
400px × 209px 1.91:1
398px × 208px 1.91:1

PC版UIのニュースフィードでは、幅398px 高208pxで表示。
スマホ版(iPhone5)UIのニュースフィードでは、幅560px 高292pxで表示。
PCもスマホ(iPhone5)もサムネイル画像のアスペクト比が「1.91:1」なので、同じ比率の画像をog:imageに指定した方が、切れたりせずにキレイに表示されます。


og:imageに指定した画像のサイズが、幅154px以上~397px以下 または 高154px以上~397px以下 の場合

サイズが幅154px以上~397px以下 または 高154px以上~397px以下の画像をog:imageに指定すると、以下のような結果になりました。

og:imageに指定した画像サイズ(幅x高) og:imageに指定した画像アスペクト比 PCフィード上の画像サイズ スマホフィード上の画像サイズ
414px × 207px 2:1 154px × 154px 560px × 292px
400px × 200px 2:1
397px × 397px 1:1
300px × 157px 1.91:1
154px × 154px 1:1 88px × 88px

PC版UIのニュースフィードでは、幅154px 高154pxで表示。
スマホ版(iPhone5)UIのニュースフィードでは、一部小さくなってしまいました。その点はルールが不明です。


og:imageに指定した画像のサイズが、幅74px以上~153px以下 または 高74px以上~153px以下 の場合

サイズが幅74px以上~153px以下 または 高74px以上~153px以下の画像をog:imageに指定すると、以下のような結果になりました。

og:imageに指定した画像サイズ(幅x高) og:imageに指定した画像アスペクト比 PCフィード上の画像サイズ スマホフィード上の画像サイズ
200px × 104px 1.91:1 90px × 90px 88px × 88px
200px × 100px 2:1
292px × 153px 1.91:1 560px × 292px
100px × 100px 1:1 88px × 88px
74px × 74px 1:1

PC版UIのニュースフィードでは、幅90px 高90pxで表示。
スマホ版(iPhone5)UIのニュースフィードでは、一部大きくなってしまいました。その点はルールが不明です。


og:imageに指定した画像のサイズが、幅73px未満 または 高73px未満 の場合

サイズが幅73px未満 または 高73px未満の画像をog:imageに指定すると、以下のような結果になりました。

og:imageに指定した画像サイズ(幅x高) og:imageに指定した画像アスペクト比 PCフィード上の画像サイズ スマホフィード上の画像サイズ
73px × 73px 1:1 表示されない 表示されない
100px × 52px 1.91:1
100px × 50px 2:1

PC版UI、スマホ版(iPhone5)UI、どちらもサムネイル自体が表示されませんでした。


結論

上記の件をまとめると、

  • OGP設定をする
  • og:imageにサムネイル表示したい画像を指定する
  • og:imageに指定する画像のサイズは、パソコン版UIでもスマホ版UIでも大きく表示されるように、幅398ピクセル かつ 高208ピクセル以上が良い
  • og:imageに指定する画像のアスペクト比は、パソコン版UIでもスマホ版UIでもサムネイルが切れたりすることないように、1.91:1が良い

上記内容を設定すれば、パソコン版UIでもスマホ版UIでもニュースフィード上に大きく表示され、かつ、中途半端な切れ方がしなくて大丈夫そうです。


いつ仕様変更があるか分からない

ただ、Facebookはまたいつ仕様変更があるか分かりません。
これから作成するサイトやブログ記事については設定を行った方がよいと思いますが、過去のものに関してはサムネイルが表示されないなど深刻なもの以外は作業量と相談した方が良いかと思われます。


今回作成したサムネイルサイズ検証用のサンプル

今回のサムネイルサイズ検証用にサンプルをたくさん作りましたので、その一部ですが、もしご覧になりたい方は下記リンクよりご覧ください。
OGP設定画像のサンプル一覧


Android OSではまたちょっと違うとのこと...

弊社のアクセス状況ではiOSが圧倒的に多かったので今回のスマートフォンの検証はiOSアプリでのみ行いましたが、Android OSはまたちょっと違うようです...。(;´Д`)エー

FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。(スマホ対応!最新版) | Sunday In The Park

こちらの記事も是非参考にしてみてください。

参照したサイト



  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Facebook」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP