- ブログのアイキャッチ画像はどれぐらいのサイズが最適かな？
- なぜそのサイズが最適なのか、その理由も併せて教えて欲しいよ。
この記事では、こういった疑問にお答えします。
- アイキャッチ画像の最適なサイズは1200×630ピクセル
- 1200ピクセルがアイキャッチ画像に最適な理由は3つ
- ブログのアイキャッチ画像を設定する時のポイントは3つ
なお、本記事の筆者はブログ歴が14年以上あり、12年近くブログ収益でご飯を食べています。
ブログのアイキャッチ画像は何ピクセルで設定すれば良いのかお悩みですか？
この記事では、アイキャッチ画像の最適なサイズや比率、設定する時の注意点を解説します。
好きなところから読めます
アイキャッチ画像の最適なサイズは1200×630ピクセル
結論から言うと、アイキャッチ画像の最適なサイズは「1200px（横） × 630px（縦）」です。
なお、画像の比率は「1：1.91（縦：横）」になります。
- 画像のサイズ → 1200px（横） × 630px（縦）
- 画像の比率 → 1：1.91（縦：横）
アイキャッチ画像を設定する場合、上記のサイズ、あるいは上記の比率でアイキャッチ画像を設定するのがおすすめです。
1200ピクセルがアイキャッチ画像に最適な理由は3つ
1200ピクセルがアイキャッチ画像に最適な理由は3つあります。
- SNSでシェアされた時にピッタリ表示されるサイズだから
- ＡＭＰ推奨サイズだから
- Google Discoverの推奨サイズだから
上記のとおりです。
SNSでシェアされた時にピッタリ表示されるサイズだから
SNS（TwitterやFacebook）で記事をシェアされると、アイキャッチ画像が表示されますが、1200 x 630ピクセルで設定すると画像がピッタリ表示されます。
なお、各SNSごとに推奨サイズが若干異なりますので、TwitterとFacebookの推奨サイズを個別に解説します。
- Twitterの場合
- Facebookの場合
Twitterの場合
Twitterの場合、記事をシェアされる時に表示されるアイキャッチ画像の比率は「2：1」となっており、実際に表示される画像は1200×600pxとなります。
そのため、上下15pxが切れて表示されます。
Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300×157 or maximum of 4096×4096 pixels.
とはいえ、わずか15pxの事ですので、以下のような感じで、ほぼほぼピッタリ表示されます。
新しい記事を書きました🙂 ⬇【WordPress】ハッキングによるファイル改ざんを検知・駆除するプラグイン「wpdoctor」 https://t.co/WYH3zIiZxT
— たかろぐ (@takashisema) June 19, 2019
Twitterでシェアされた時のアイキャッチ画像の確認方法
TwitterのCard validatorという機能を使うと、Twitterでシェアされた時、アイキャッチ画像がどのように表示されるのかを事前に確認できます。
公式サイト：Card Validator | Twitter Developers
使い方は簡単で、URLを入力するだけでアイキャッチ画像が表示されます（要ログイン）。
Facebookの場合
Facebookの場合、1200ピクセルを推奨している訳ではありませんが、1.91:1の比率を推奨しています。
Open Graphストーリー以外の画像は長方形で表示されます。1.91:1の画像比(600 x 314ピクセルなど)を使用してください。
1200 x 630pxの画像の比率は「1.91:1」です。
ですので、1200 x 630pxの画像を使っておけば問題ありません。
Facebookでシェアされた時のアイキャッチ画像の確認方法
Facebookのシェアデバッカーを使うと、Facebookでシェアされると、アイキャッチ画像がどのように表示されるのかを確認できます。
公式サイト：シェアデバッガー – Facebook for Developers
使い方は簡単で、記事のURLを入力するだけです（要ログイン）。
ちなみに、公式ツールではありませんが「OGP画像シミュレータ」というWebツールを使うと、画像をドラッグ＆ドロップでアップロードするだけで、アイキャッチ画像を確認できます。
OGP画像シミュレータ：http://ogimage.tsmallfield.com/
ＡＭＰ推奨サイズだから
Googleデベロッパーのガイドラインでは、AMPの画像は1,200ピクセル以上が推奨サイズとなっています。
画像の幅は 1,200 ピクセル以上にする必要があります。
ちなみに、縦のサイズや比率に関する指定はありませんので、横幅1,200ピクセル以上あれば問題ありません。
Google Discoverの推奨サイズだから
Google Discover（Googleディスカバー）は、ユーザーに合うコンテンツをトップページに「おすすめの記事」として表示するニュース配信機能のことを言います（「Google砲」とも呼ばれてます）。
Googleディスカバーに表示されるようになるのは簡単な事ではありませんが、アイキャッチ画像が1,200ピクセル以上が推奨されています。
魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。
もちろん、アイキャッチ画像を推奨サイズにしたからといって、Googleディスカバーに表示される訳ではありません。
でも、1,200ピクセル以上の画像を設定しておかないと、そもそも選別のチャンスすら巡ってきませんので、アイキャッチ画像は1,200ピクセル以上の画像を設定しましょう。
ブログのアイキャッチ画像を設定する時のポイントは3つ
ブログのアイキャッチ画像を設定する時のポイントは3つあります。
- テキストを入れる時はテキストを中央に寄せて作る
- アイキャッチ画像のサイズを統一する
- 圧縮してからアップロードする
上記のとおりです。
テキストを入れる時はテキストを中央に寄せて作る
アイキャッチ画像にテキストを入れる時は、テキストを中央に寄せて作るのがおすすめです。
基本的に、「1200 × 630px」で作っておけばSNSでピッタリ表示されますが、下記の場合、画像が正方形で表示されるため、両端がカットされ、全ての画像が表示されません。
- 検索結果にアイキャッチが表示された時
- Googleディスカバーに表示された時
しかし、下図のようにテキストを中央に寄せておけば、全てのテキストが表示されますので、なるべく、中央に寄せると良いです。
ちなみに、1200×630pxでアイキャッチ画像を作る場合、画像中央の600 × 600pxの範囲内にテキストを入れると、両端をカットされてもテキストが表示されます。
アイキャッチ画像のサイズを統一する
アイキャッチ画像のサイズを統一すると、下図のように統一感が出て見栄えが良いです。
アイキャッチ画像のサイズがバラバラだと、下図のように統一感が出ませんし、サムネイル画像を並べて表表すると、サイズの違いによるすき間が目立ちます。
あまり見栄えの良い物ではありませんので、アイキャッチ画像のサイズは統一した方が良いです。
圧縮してからアップロードする
横幅1,200ピクセル以上の画像をそのままアップロードして使用すると画像のデータ容量が大きいため、読み込みが遅くなります。
読み込みが遅くなれば、ページの表示速度が遅くなり、SEO的に悪影響を受けます。
必ず、データ容量を圧縮してからアイキャッチ画像を設定するようにしましょう。
なお、ページの表示速度が及ぼす悪影響の詳しい解説は「【SEO】ページの表示速度が遅いのは致命的！測定方法や改善方法を解説」をどうぞ。
画像データを軽量化するWebツール「TinyPNG」
「TinyPNG」というWebツールを使うと、画像をアップロードするだけで簡単に軽量化できます。
TinyPNGに画像をアップロードするだけで、6～7割程度、画像データを圧縮できるのでおすすめです。
ブログのアイキャッチ画像を作れるおすすめなツール2選
最後に、ブログのアイキャッチ画像を作れるおすすめなツールを2つ紹介します。
- Canva（キャンバ）
- Googleスライド
上記のとおりです。
Canva（キャンバ）
Canvaは、無料から使えるデザインツールです。
参考リンク：Canva（キャンバ）
ちなみに、このブログのアイキャッチ画像の9割はCanvaで作成してます。
最初に、サイズ指定でアイキャッチ画像を作れば、後はテンプレートしてテキストを変更するだけで使いまわせるので便利です。
無料で多くのデザインが使えますし、1つの素材単位で画像素材を購入する事もできるので、使い勝手が良いです。
Googleスライド
Googleスライドはシンプルで使いやすく、画像にテキストを挿入するのも簡単なので、アイキャッチ画像作成に向いてます。
Googleスライドも、1度、サイズ指定してスライドを作れば、テキストを変えるだけで使いまわせるので、使いやすいです。
Canvaのように素材は用意されていないので、画像素材サイトやパワーポイントテンプレートサイト等で素材を用意する必要があります。
まとめ
以上、ブログのアイキャッチ画像に最適なサイズと比率を解説しました。
アイキャッチ画像の最適なサイズは「1200 x 630px」です。
このサイズでアイキャッチ画像を設定すれば、SNSでシェアされた時にピッタリ表示されますし、AMPでエラーが出る心配もありません。
Googleディスカバーに表示される可能性も出てきますので、アイキャッチ画像を作る時は1200 x 630pxのサイズで作るのがおすすめです。
