【ブログ】アイキャッチ画像の最適なサイズとは【1200×630】

【ブログ】アイキャッチ画像の最適なサイズとは【1200x630】ブログ運営
  • ブログのアイキャッチ画像はどれぐらいのサイズが最適かな?
  • なぜそのサイズが最適なのか、その理由も併せて教えて欲しいよ。

この記事では、こういった疑問にお答えします。

 

本記事の内容

  • アイキャッチ画像の最適なサイズは1200×630ピクセル
  • 1200ピクセルがアイキャッチ画像に最適な理由は3つ
  • ブログのアイキャッチ画像を設定する時のポイントは3つ

 

なお、本記事の筆者はブログ歴が12年以上あり、10年近くブログ収益でご飯を食べています。

 

ブログのアイキャッチ画像は何ピクセルで設定すれば良いのかお悩みですか?

この記事では、アイキャッチ画像の最適なサイズや比率、設定する時の注意点を解説します。

スポンサーリンク

アイキャッチ画像の最適なサイズは1200×630ピクセル

結論から言うと、アイキャッチ画像の最適なサイズは「1200px(横) × 630px(縦)」です。

なお、画像の比率は「1:1.91(縦:横)」になります。

  • 画像のサイズ → 1200px(横) × 630px(縦)
  • 画像の比率 → 1:1.91(縦:横)

アイキャッチ画像を設定する場合、上記のサイズ、あるいは上記の比率でアイキャッチ画像を設定するのがおすすめです。

 

1200ピクセルがアイキャッチ画像に最適な理由は3つ

1200ピクセルがアイキャッチ画像に最適な理由は3つあります。

  • SNSでシェアされた時にピッタリ表示されるサイズだから
  • AMP推奨サイズだから
  • 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.

出典:Summary Card with Large Image Twitter Developer

 

とはいえ、わずか15pxの事ですので、以下のような感じで、ほぼほぼピッタリ表示されます。

Twitterでシェアされた時のアイキャッチ画像の確認方法

TwitterのCard validatorという機能を使うと、Twitterでシェアされた時、アイキャッチ画像がどのように表示されるのかを事前に確認できます。

公式サイト:Card Validator | Twitter Developers

 

使い方は簡単で、URLを入力するだけでアイキャッチ画像が表示されます(要ログイン)。

 

Facebookの場合

Facebookの場合、1200ピクセルを推奨している訳ではありませんが、1.91:1の比率を推奨しています。

Open Graphストーリー以外の画像は長方形で表示されます。1.91:1の画像比(600 x 314ピクセルなど)を使用してください。

出典:ベストプラクティス – シェア機能 – ドキュメンテーション – Facebook for Developers

 

1200 x 630pxの画像の比率は「1.91:1」です。
ですので、1200 x 630pxの画像を使っておけば問題ありません。

Facebookでシェアされた時のアイキャッチ画像の確認方法

Facebookのシェアデバッカーを使うと、Facebookでシェアされると、アイキャッチ画像がどのように表示されるのかを確認できます。

公式サイト:シェアデバッガー – Facebook for Developers

使い方は簡単で、記事のURLを入力するだけです(要ログイン)。

 

ちなみに、公式ツールではありませんが「OGP画像シミュレータ」というWebツールを使うと、画像をドラッグ&ドロップでアップロードするだけで、アイキャッチ画像を確認できます。

OGP画像シミュレータ:http://ogimage.tsmallfield.com/

AMP推奨サイズだから

Googleデベロッパーのガイドラインでは、AMPの画像は1,200ピクセル以上が推奨サイズとなっています。

画像の幅は 1,200 ピクセル以上にする必要があります。

出典:記事 | Google 検索セントラル | Google Developers

 

ちなみに、縦のサイズや比率に関する指定はありませんので、横幅1,200ピクセル以上あれば問題ありません。

Google Discoverの推奨サイズだから

Google Discover(Googleディスカバー)は、ユーザーに合うコンテンツをトップページに「おすすめの記事」として表示するニュース配信機能のことを言います(「Google砲」とも呼ばれてます)。

スマホのGoogle Chromeのトップに自動的に表示されるコンテンツがあると思いますが、あれがGoogleディスカバーです。

 

Googleディスカバーに表示されるようになるのは簡単な事ではありませんが、アイキャッチ画像が1,200ピクセル以上が推奨されています。

魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。

出典:Discover にコンテンツを掲載する | Google 検索セントラル

 

もちろん、アイキャッチ画像を推奨サイズにしたからといって、Googleディスカバーに表示される訳ではありません。

でも、1,200ピクセル以上の画像を設定しておかないと、そもそも選別のチャンスすら巡ってきませんので、アイキャッチ画像は1,200ピクセル以上の画像を設定しましょう。

 

ブログのアイキャッチ画像を設定する時のポイントは3つ

ブログのアイキャッチ画像を設定する時のポイントは3つあります。

  • テキストを入れる時はテキストを中央に寄せて作る
  • アイキャッチ画像のサイズを統一する
  • 圧縮してからアップロードする

上記のとおりです。

テキストを入れる時はテキストを中央に寄せて作る

アイキャッチ画像にテキストを入れる時は、テキストを中央に寄せて作るのがおすすめです。

基本的に、「1200 × 630px」で作っておけばSNSでピッタリ表示されますが、下記の場合、画像が正方形で表示されるため、両端がカットされ、全ての画像が表示されません。

  • 検索結果にアイキャッチが表示された時
  • Googleディスカバーに表示された時

 

しかし、下図のようにテキストを中央に寄せておけば、全てのテキストが表示されますので、なるべく、中央に寄せると良いです。

ちなみに、1200×630pxでアイキャッチ画像を作る場合、画像中央の600 × 600pxの範囲内にテキストを入れると、両端をカットされてもテキストが表示されます。

アイキャッチ画像のサイズを統一する

アイキャッチ画像のサイズを統一すると、下図のように統一感が出て見栄えが良いです。

アイキャッチ画像のサイズがバラバラだと、下図のように統一感が出ませんし、サムネイル画像を並べて表表すると、サイズの違いによるすき間が目立ちます。

あまり見栄えの良い物ではありませんので、アイキャッチ画像のサイズは統一した方が良いです。

圧縮してからアップロードする

横幅1,200ピクセル以上の画像をそのままアップロードして使用すると画像のデータ容量が大きいため、読み込みが遅くなります。

読み込みが遅くなれば、ページの表示速度が遅くなり、SEO的に悪影響を受けます。

必ず、データ容量を圧縮してからアイキャッチ画像を設定するようにしましょう。

 

なお、ページの表示速度が及ぼす悪影響の詳しい解説は「【SEO】ページの表示速度が遅いのは致命的!測定方法や改善方法を解説」をどうぞ。

画像データを軽量化するWebツール「TinyPNG」

「TinyPNG」というWebツールを使うと、画像をアップロードするだけで簡単に軽量化できます。

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

 

TinyPNGに画像をアップロードするだけで、6~7割程度、画像データを圧縮できるのでおすすめです。

 

ブログのアイキャッチ画像を作れるおすすめなツール2選

最後に、ブログのアイキャッチ画像を作れるおすすめなツールを2つ紹介します。

  • Canva(キャンバ)
  • Googleスライド

上記のとおりです。

Canva(キャンバ)

Canvaは、無料から使えるデザインツールです。

参考リンク:Canva(キャンバ)

 

ちなみに、このブログのアイキャッチ画像の9割はCanvaで作成してます。

最初に、サイズ指定でアイキャッチ画像を作れば、後はテンプレートしてテキストを変更するだけで使いまわせるので便利です。

無料で多くのデザインが使えますし、1つの素材単位で画像素材を購入する事もできるので、使い勝手が良いです。

【無料】画像編集ツール「Canva(キャンバ)」でおしゃれなデザインを作成
簡単におしゃれなデザインを作れる画像編集ツールをお探しの方向け。 画像デザインや、文字を入れ編集ができるツールは有料・無料を合わせると沢山のツールがあります。 この記事では、インストール不要(ブラウザで使える)で、無料でパソコン初心...

Googleスライド

Googleスライドはシンプルで使いやすく、画像にテキストを挿入するのも簡単なので、アイキャッチ画像作成に向いてます。

Google スライド - オンラインでプレゼンテーションを作成、編集できる無料サービス
新しいプレゼンテーションを作成して、他のユーザーと同時に編集。インターネットに接続していなくても作業を継続でき、PowerPoint ファイルも編集できる、Google の無料サービスです。

 

Googleスライドも、1度、サイズ指定してスライドを作れば、テキストを変えるだけで使いまわせるので、使いやすいです。

 

Canvaのように素材は用意されていないので、画像素材サイトやパワーポイントテンプレートサイト等で素材を用意する必要があります。

 

まとめ

以上、ブログのアイキャッチ画像に最適なサイズと比率を解説しました。

アイキャッチ画像の最適なサイズは「1200 x 630px」です。

このサイズでアイキャッチ画像を設定すれば、SNSでシェアされた時にピッタリ表示されますし、AMPでエラーが出る心配もありません。

Googleディスカバーに表示される可能性も出てきますので、アイキャッチ画像を作る時は1200 x 630pxのサイズで作るのがおすすめです。

 

 

人気記事【デザイン初心者向け】バナー作成ツールおすすめ4選【画像素材つき】

人気記事【SEO】検索順位チェックツールおすすめ比較【無料試用あり】

トップへ戻る
タイトルとURLをコピーしました