アイキャッチ画像サイズは幅1200px以下でもOK!WordPressブログは情報配置がより重要

アイキャッチ画像のサイズは1200px以下でもOK

  • アイキャッチ画像は幅1200px以上ないとダメって聞くけど、実際のところどうなの?

すもベビ

その疑問にすもベビが答えます。

 

アイキャッチ画像のサイズが大きいと、ブログの表示速度が遅くなります。

でも、「幅1200px以上ないとダメだ」という情報が出回っているので小さく作るに作れず、画像のサイズと表示速度のバランスで悩む人が少なくありません。

 

また、「おすすめサイズで作ったのにはみ出る」という現象に悩む人も。

 

結論を書くと、WordPressのアイキャッチ画像のサイズは1200px以下でもOKです。

それよりも気をつけたいのは、アイキャッチ画像で意識しておきたいのが「重要な情報は中央に入れる」こと。

せっかくオシャレなアイキャッチ画像を作っても台無しになってしまいます。

 

この記事では、WordPressのアイキャッチ画像のサイズについて解説します。

 

WordPressのアイキャッチ画像サイズのおすすめ

WordPressのアイキャッチ画像サイズ

WordPressの場合、アイキャッチ画像のサイズは幅1200px×高さ630px以上がおすすめです。

 

「冒頭の結論と違うじゃないか。」と思うかもしれませんが、矛盾はしません。

 

  • アイキャッチ画像のサイズは幅1200px×高さ630pxが理想
  • 表示速度が遅くなるなら幅1200px以下でもOK

これが結論です。

 

アイキャッチ画像サイズは幅1200px以上がおすすめな理由

大きく2つあります。

  • Googleが推奨している
  • SNSシェアでキレイに表示される

 

Googleが推奨している

GoogleのSearch Consoleヘルプ「Google Discover」には、次のとおり書かれています。

高画質でサイズの大きい画像(幅が 1,200 ピクセル以上)を使用します。

引用:Search Consoleヘルプ

Google DiscoverというのはGoogleアプリに搭載されている機能です。

Google砲に被弾した場合、記事がGoogle Discoverなどに表示されます。

Google砲を狙う場合は、アイキャッチ画像のサイズを幅1200px以上にしておくことが求められます。

 

すもベビ

AMP化したブログでは幅1200px以下の画像を使う必要があります。

1200px以下の画像を使うと、Search Consoleで「推奨サイズより大きな画像を指定してください」という警告が出ます。

 

SNSシェアでキレイに表示される

ブログ記事がSNSでシェアされたときは、次のような情報が表示されます。

アイキャッチ画像については、各SNSごとに推奨サイズがあります。

FacebookとTwitterの場合は次のとおりです。

SNS 推奨サイズと比率
Facebook 1200px×630px

2020.4現在は1080px以上に変更

比率:正方形または1.91:1の比率

Twitter 1024px×512px

比率:正方形または2:1

 

幅1200px×高さ630pxに設定しておくと、どちらでも見切れる部分が少なくキレイにアイキャッチ画像が表示されます。

 

表示速度が遅くなるなら幅1200px以下でもOK

幅1200pxでアイキャッチ画像を作ると、サイズが大きくなってブログの表示速度が下がることがあります。

画像サイズが原因で表示速度が極端に遅くなっているなら、アイキャッチ画像を1200px以下にしてもOKです。

表示速度が遅すぎるとGoogleのスピードアップデートに引っかかり、検索順位が下がるリスクがあるからです。

 

スピードアップデートとは、「モバイルページの読み込み速度が極端に遅いページに適用されるGoogleのアルゴリズム」です。

読み込み速度が極端に遅いページがアップデートの影響を受ける

参考:Googleウェブマスター向け公式ブログ

 

現状、検索順位を意識したときの重要度は画像サイズ<表示速度です。

そのため、アイキャッチ画像の容量が表示速度を遅らせているなら、サイズを幅1200px以下にして対応しましょう。

 

アイキャッチ画像を幅1200pxにしているブログは多くない

実は、アイキャッチ画像を幅1200pxにしているブログは多くありません。

幅は1200px以上が理想と明言しているブログでも、1200px以下に設定しています。

試しに、自分が参考にしているブログの画像サイズを調べてみてください。

すもベビ

有名なブログでも、幅1200pxのアイキャッチ画像を使っているところはあまり見かけません。

 

アイキャッチ画像のチェック方法は2つあります。

 

検証画面でチェック

  1. Google Chromeでブログを開く
  2. 画像にカーソルを合わせて右クリック
  3. 検証をクリック
  4. <img width=”” height=””>の数値を確認

 

すもブロの画像を調べてみましょう。

【画像にカーソルを合わせて右クリックし、検証をクリック】

アイキャッチ画像サイズの調べ方

 

【<img width=”” height=””>の数値を確認】

アイキャッチ画像サイズの調べ方

すもベビ

画像が小さいですが、<img width=”680″ height=”390″>と表示されています。

 

新しいタブを開いてチェック

  1. Google Chromeでブログを開く
  2. 画像にカーソルを合わせて右クリック
  3. 新しいタブで画像を開くをクリック
  4. 開いたタブにカーソルを合わせる

 

【画像にカーソルを合わせて右クリックし、新しいタブで画像を開く】

アイキャッチ画像サイズの調べ方

 

【開いたタブにカーソルを合わせる】

アイキャッチ画像サイズの調べ方

 

WordPressテーマに合ったアイキャッチ画像サイズ

WordPressテーマと画像サイズ

アイキャッチ画像サイズを幅1200pxにすると、Googleの推奨しているサイズに合致し、SNSのシェアにも適しています。

でも、アイキャッチ画像って本来はWordPressブログの装飾の一つです。

使用しているWordPressテーマで表示できないと意味がありません。

 

無料テーマのアイキャッチ画像サイズ

主な無料テーマのアイキャッチ画像サイズです。

無料テーマ サイズ(幅)
Cocoon 約800px
STINGER 約640px

 

有料テーマのアイキャッチ画像サイズ

おすすめの有料テーマ3つのアイキャッチ画像サイズです。

有料テーマ サイズ
THE THOR 約768px
SANGO 約700px
WING(AFFINGER5) 740~880px

 

MEMO

最近は、横幅が基準より大きい場合は比率を保ったまま縮小する仕様のテーマが増えています。

そのため、アイキャッチ画像が最適なサイズでないからと言って、全く表示されないケースは稀です。

 

ただし、画像が見切れたり適切に表示されなかったりすることは珍しくありません。

幅1200pxでアイキャッチ画像を作ってみてうまく表示されない場合、テーマの幅に合わせて作ってみましょう。

 

アイキャッチ画像は重要な情報を中央に入れる

アイキャッチ画像における重要な情報

アイキャッチ画像を作るときは、「重要な情報を中央に入れる」ことを意識しましょう。

画像の一部が切り抜かれて表示されることがあるからです。

 

アイキャッチ画像を作るときはオシャレ度やサイズに注目しがちです。

でも最も重要なのは、アイキャッチ画像で伝えたい情報が確実に表示されることです。

 

ブログ内で画像が切り抜かれるケース

下の画像はすもブロのトップページです。

アイキャッチ画像のサイズ

記事一覧にはすもベビアイコンを含む画像が全て表示されています。

一方で、サイドバーの最近の投稿欄には画像の中心部分だけが表示され、左右はカットされているのが分かります。

このように、ブログ内でも表示される場所によって画像の一部が切り抜かれることがあるのです。

 

SNSでシェアしたときに切り抜かれるケース

記事がSNSなどでシェアされた場合も、アイキャッチ画像の一部が切り抜かれることがあります。

同じサービスでも、表示する端末や表示される場所によって切り抜かれることがあるので要注意です。

 

例えば、下の画像はnoteに記事を貼り付けた場合です。

アイキャッチ画像

アイコンの一部が見切れています。

FacebookやTwitterでも、アイキャッチ画像のサイズや端末によっては見切れてしまうことがあります。

 

重要な情報は中央に入れる

画像の一部が切り抜かれる場合、両端から一定の部分が切り抜かれます。

そのため、重要な情報は画像の中心に入れておくことが大切です。

基本的には正方形の中に情報を盛り込めばOKです。

 

例えば、幅1200px×高さ630pxでアイキャッチ画像を作成した場合、中心の630px×630pxの範囲に重要な情報を集約させます。

こうすれば、SNSやWordPressテーマによって多少は上下左右が見切れても、重要な部分は常に表示されます。

 

画像で確認しておきましょう。

【テキスト:適切】

アイキャッチ画像のサイズ

 

【テキスト:不適切】

アイキャッチ画像のサイズ

すもベビ

中央だけ表示されるとテキストが読めません。

 

【写真:適切】

アイキャッチ画像のサイズ

 

【写真:不適切】

アイキャッチ画像のサイズ

すもベビ

中央だけ表示されると子供の顔が半分以上見切れてしまいます。

 

SNSでシェアされたときの表示を確認しよう

SNSでシェアされたときのアイキャッチ画像の表示を確認できるツールがあります。

 

アイキャッチ画像のサイズのまとめ

WordPressブログのアイキャッチ画像のサイズは、幅1200px×高さ630pxが適切です。

でも、表示速度が遅くなるなら幅1200px以下でも大きな問題はありません。

 

それよりも、アイキャッチ画像を作るときは重要な情報を中心に配置することを意識すべきです。

せっかくオシャレな画像を作っても、端末や表示される場所によっては見切れてしまいます。

 

最近はアイキャッチにこだわったブログが増えてきましたが、オシャレさだけでなく表示のされ方にも意識しましょう。