ABOUT

TwitterやFacebookでシェアされたときに、アイキャッチ画像がどんなサイズでどう表示されるのかをまとめてチェックできるツールです。「文字がはみ出てしまわないか」「意図せず一部が切れてしまわないか」などを確認するためにご活用ください(表示は2018年7月時点のものです)。

TwitterのOGP

Twitterカード:Large Summaryを設定時の表示イメージsaruwakakun.com

Twitterカード:Summaryタイプを設定時の表示saruwakakun.com

Twitterのアイキャッチ画像

ブログやWebメディアの場合、Twitterカードの表示形式は主に次の2種類を使うことが多いかと思います。アイキャッチ画像が大きく表示される「Summary with Large Image」と、小さめの「Summary」のカードです。

どちらを表示させるかは自分で決めることができます。詳しくは、こちらの記事をどうぞ。

【2018年版】Twitterカードとは?使い方と設定方法まとめ

Twitterカードとは?使い方と設定方法まとめ

Twitterカードは設定をしていないと表示されないので、ご注意ください(未設定だと、通常のテキストだけのTweetになります)。なお、ツイート済のアイキャッチ画像の変更を反映される方法は下の記事でまとめています。

ツイートのサムネイル画像やタイトル変更が反映されない時の対処法

ツイートのサムネイル画像やタイトル変更を反映させる

FacebookのOGP

アイキャッチ画像チェッカー:Facebookの表示の場合 saruwakakun.com

画像サイズが小さいと横長になることあり 画像が小さいときのみコレsaruwakakun.com

Facebookのアイキャッチ画像

Facebookではアイキャッチ画像のサイズによって表示が異なります。

「高さ315px」×「幅600px」以下の画像をアイキャッチに設定しているときには横長に小さく表示されるようになります(上の2つめの方です)。アイキャッチ画像を大きく表示させたい場合にはこれ以上のサイズにしましょう。大きめにアイキャッチ画像が表示させるときの縦横比は1:1.9です。はみ出る部分は画像の中心で切り抜かれるので注意しましょう。例えば「630px」×「1200px」などのサイズにするかと良いかと思います。

B! はてなブックマーク

5234 USERS

はてブでホットエントリ入りするとこんな表示に…

モバイルブラウザからはてブを見るとこんな表示に…

5234 users

スマホなどからはてブを見ると、表示されるアイキャッチ画像のサイズが若干異なってきます。

はてブアイキャッチ画像

はてブの場合「閲覧デバイス」や「はてブ内のどこに表示されるか」によって表示がまちまちです。上の2つはホットエントリ入りしたときのデスクトップとモバイル表示の一例です。

ホットエントリの中でも表示位置によってサイズが異なるので、あくまでも参考程度に留めておくのが良いかと思います。
また、はてブの場合、画像のど真ん中では無く、左上から切り取られる場合があるようです。つまり、縦長のアイキャッチ画像を使うと、画像の上の部分しか表示されない…なんてことになり兼ねないわけですね。
とはいえ、個人的にははてなブックマークに載ることを意識して、わざわざサイズを調整する必要はないのではないかと思っています…。

はてな・ライブドアブログのサムネイル画像

はてな/ライブドアブログの画像について

こちらは、はてなブログやライブドアブログの関連記事表示などで使われる正方形のアイキャッチ画像です。画像のど真ん中からトリミングされます。

その他のサイズでチェック

px × 高さpx

WordPressなどでは…

例えば、WordPressだと記事一覧などで表示させるアイキャッチ画像の大きさを自分で決めることができます。上のボックスに画像サイズを入力することで、様々なサイズでの表示をチェックできます。

シェア

B!
Follow Me

ホームへ