パイルリンクは中小企業のシステム化を
支援するITコンサルティング会社です
PILELINK
03-5809-2298
受付時間 平日10:00~18:00

Facebookで効果的な
サムネイルを表示する方法

当ページの概要

FacebookをはじめとしたSNSでホームページのリンクを貼るという機会が増えています。
知り合いが見ることが多い為、そもそもクリックしてもらえる確率は高いですが、
より効果的にする為に「サムネイル」を工夫しましょう。

当ページでは、特定の画像をFacebookのサムネイルとして表示する方法
2014年8月時点でFacebookにおける最適なサムネイルの大きさについて
検証・解説しています。

特定の画像をFacebookのサムネイルとして表示する方法

Facebookで記事を投稿する際に、URLを記述する(貼り付ける)と
そのページのタイトルやサムネイル等が表示されます。

Facebookを利用している人ならば、よく分からないサムネイルが表示されている投稿を
見たことがあると思います。

多くの場合、Facebookは、そのホームページの中で
大きめの画像を認識してサムネイル候補として挙げているだけです。
その為、人の目から見たら、抽象的な画像であったり、
Facebookで表示するには相応しくない形であったりします。

そこで、相応しい特定の画像をFacebookのサムネイルとして表示する方法ですが、
OGP設定と言われるものが必要になります。

OGP設定とは、
「外部サイト(Facebook等)では、このホームページをこのように紹介してね」
ということを予めHTMLに記述したものになります。
サムネイル以外にも色々と指定できますが、ここでは触れません。

具体例を挙げますが、当ページではサムネイル表示について、
HTMLで以下のように<meta>タグを設定しています。
<head>
 :
<meta property="og:image" content="http://pilelink.co.jp/img/sns_img.png" />
 :
</head>
上記は、当ページのリンクを外部サイト(Facebook等)に貼った時、
サムネイルを表示するならば「http://pilelink.co.jp/img/sns_img.png」
という場所に置いてある画像ファイルを使って下さい、というものになります。
(尚、「/img/sns_img.png」のようなパス指定で書くと表示されません。)

ちなみに、「sns_img.png」という画像ファイルは、当ページの中で表示していません
当ページに興味を持ってもらえるような画像をFacebook等に表示させる為に作成しています。
つまり、OGP設定を利用して広告に特化させることも可能なのです。
point
ここがポイント!
  • <head>タグ内に表示したい画像ファイルの置き場所をURLで記述する

Facebookで表示されるサムネイルの最適な大きさについて

実は、Facebookの公式ページで推奨の画像ファイルの大きさが書いています。
2014年8月現在は以下の通りです。
  • 正方形の場合、横幅600px × 高さ600px。
  • 横長の場合、横幅1200px × 高さ630px。
px(ピクセル)という単位だと少し分かりづらいですが、
拡大も縮小もしないで表示した場合、タブレットPCだと画面いっぱい、
スマホだとはみ出し過ぎて何の画像かよく把握できないくらいの大きさです。

ただでさえ大きいのですが、さらに大きくても構わないそうです。
ちなみに小さすぎると表示されません。
横長の場合の辺の長さの比率は「横幅:高さ=1.91:1」とのことです。

実際、Facebookにおける画像表示にはさらに細かい条件があるようです。
しかし、Facebookの為だけにそこまで気にするのはどうかと思いますし、
いつFacebookの仕様が変わるかも分かりませんので、ここには書きません。

Facebookにおける正方形のサムネイル表示

それでは、実際にFacebookで表示されたサムネイルを確認してみましょう。

まずは正方形の場合です。

Facebookの推奨である「横幅600px × 高さ600px」と
小さめの「横幅200px × 高さ200px」を比較してみます。
(どちらも画像を濃い青線で囲っています。見えなければ見切れているということになります。)

600x600の画像におけるFacebookのニュースフィードのパソコン表示 200x200の画像におけるFacebookのニュースフィードのパソコン表示

[ニュースフィードのパソコン表示]


600x600の画像におけるFacebookのタイムラインのパソコン表示 200x200の画像におけるFacebookのタイムラインのパソコン表示

[タイムラインのパソコン表示]


60x600の画像におけるFacebookのニュースフィード及びタイムラインのスマホ表示 200x200の画像におけるFacebookのニュースフィード及びタイムラインのスマホ表示

[ニュースフィード及びタイムラインのスマホ表示]


最も人目に付くであろうニュースフィードで
大きめの正方形の画像は、サムネイルが大きくなる半面、上下が見切れます
point
ここがポイント!
  • 正方形の画像は、大きめならば、上下が見切れても大丈夫なものにする
  • 正方形の画像は、小さめならば、どの画面でも見切れることなく表示される

Facebookにおける長方形(横長)のサムネイル表示

次に長方形(横長)の場合です。

Facebookの推奨である「横幅1200px × 高さ630px」と
小さめで横に長くした「横幅600px × 高さ200px」を比較してみます。
(どちらも画像を濃い青線で囲っています。見えなければ見切れているということになります。)

1200x630の画像におけるFacebookのニュースフィードのパソコン表示 600x200の画像におけるFacebookのニュースフィードのパソコン表示

[ニュースフィードのパソコン表示]


1200x630の画像におけるFacebookのタイムラインのパソコン表示 600x200の画像におけるFacebookのタイムラインのパソコン表示

[タイムラインのパソコン表示]


1200x630の画像におけるFacebookのニュースフィード及びタイムラインのスマホ表示 600x200の画像におけるFacebookのニュースフィード及びタイムラインのスマホ表示

[ニュースフィード及びタイムラインのスマホ表示]


タイムラインのパソコン表示は必ず正方形のサムネイルが表示されるので左右が見切れますが、
大きめの長方形(横長)の画像は、それ以外で見切れることなく大きなサムネイルが表示されます。

尚、横に長くした画像は必ず左右が見切れてしまっています。
point
ここがポイント!
  • 長方形(横長)の画像は、Facebook推奨サイズ(1200x630)がお勧め
  • 横幅と高さの比率(1.91:1)が重要

ちょっと使ってみたくなる長方形(縦長)のサムネイル表示

ホームページにおいて、あまり縦長の画像は多くないのですが、
実はサムネイルに効果的なサイズがありました

少し大きめで辺の長さの比率を「横幅:高さ=1:1.5」とします。
今回は「横幅600px × 高さ900px」とします。
(どちらも画像を濃い青線で囲っています。見えなければ見切れているということになります。)

600x900の画像におけるFacebookのニュースフィードのパソコン表示 600x900の画像におけるFacebookのニュースフィード及びタイムラインのスマホ表示

[ニュースフィードのパソコン(左)、スマホ(右)表示]


タイムラインのパソコン表示は必ず正方形のサムネイルが表示されるので見切れますが、
それ以外で見切れることなくやや大きなサムネイルが表示されます。

横長の大きな画像は、タイトルの上にドーンと表示されるのでかなり目立ちますが
内容によっては鬱陶しいと思われてしまうかもしれません。

縦長の大きな画像にすることで、正方形よりも多い情報量を持たせることが可能で、
かつ、主張し過ぎない控えめな表示
とすることができます。
point
ここがポイント!
  • 長方形(縦長)の画像は、正方形と長方形(横長)の間の情報量が表示できる
  • 横幅と高さの比率(1:1.5)が重要
合同会社パイルリンク Facebook公式ページ
Copyright 2010-2015 PILELINK LLC.
All Rights Reserved.