【最新】WordPressのアイキャッチ画像のおすすめサイズと比率【ブログ】
※本ページにはプロモーションが含まれている場合があります。
・WordPressのアイキャッチ画像って結局何が正しいの？
・自分のテーマや自分のブログに合った正しいサイズを知りたい！
・SEOにもユーザーにもSNSにも最適なサイズを知りたい！
本記事の内容
- WordPressで最適なアイキャッチ画像のサイズとその理由
- WordPressテーマごとの推奨サイズ
- 記事一覧やブログカードでも途切れないアイキャッチ画像サイズの設定方法
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
本記事を読むと、GoogleやSNSが推奨するサイズや比率だけでなく、自分のブログの「テーマ」や「記事一覧・ブログカードのデザイン」に合わせて、ぴったり綺麗に表示できてSEOにも強い最適な画像サイズが分かります。
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
目次
WordPressにおすすめのアイキャッチ画像サイズ
ブログの記事一覧や内部リンクに表示されたり、SNSでシェアされる時にも表示されるアイキャッチ画像。
このアイキャッチ画像が魅力的かどうかでその記事が読まれるかどうかに大きく影響します。
そして魅力的なアイキャッチに見せるためには、まずはアイキャッチのサイズにこだわる必要があります。
まずはWordPressで最適なアイキャッチ画像のサイズを解説します。
アイキャッチ画像のおすすめサイズ(ピクセルと比率)はこれ
いきなり結論を挙げると、WordPressで最適なアイキャッチ画像のサイズは
幅1200px × 高さ630px
というサイズです。
そしてもう1つ重要なのが、タイトルやキャッチコピーなどの重要なテキストは画像中央の正方形に収めまるようにするということです。
・サイズ：「幅1200px × 高さ630px」
・中央の正方形(630px × 630px)に重要な部分が収まるようにする
上記のサイズが最もおすすめな理由は以下の3つになります。
おすすめサイズの理由
- 理由①：Google推奨の画像サイズが幅1200px以上
- 理由②：TwitterやFacebookに最適な縦横比(アスペクト比)が1.91:1
- 理由③：OGP画像では正方形になる
理由①Google推奨の画像サイズが幅1200px以上
まず1つ目の理由は、Googleが推奨する画像サイズの幅が1200px以上であるということです。
Google検索セントラルにも以下のように、1,200px以上の幅の画像を推奨する記述があります。
画像の幅は 1,200 ピクセル以上にする必要があります。
Google 検索セントラル
これは記事内画像にも当てはまる推奨値です。記事内の画像のおすすめサイズは以下の記事で解説しています。
>> WordPressブログに最適な画像サイズ(ピクセル)の目安とリサイズ方法【2021年】
理由②TwitterやFacebookに最適な縦横比(アスペクト比)が1.91:1
2つ目の理由は、TwitterやFacebookでシェアしたときに綺麗に表示される縦横比が1.91:1であることです。
正確には
- Twitter：「2:1」
- Facebook：「1.91:1」
という比率がそれぞれ推奨されていますが、
1.91:1にすることでTwitterとFacebookの両方で綺麗に表示されることから、1.91:1がベストとされています。
また、Googleは16:9の縦横比を推奨していますが、アイキャッチ画像に関しては
- ブログで綺麗に表示されること
- SNSでシェアしたときに綺麗に表示されること
の2つを考慮して1.91:1の比率が最もおすすめです。
記事内の画像では16:9もとてもおすすめな比率です。
以下の記事で詳しく解説しています。
>> WordPressブログに最適な画像サイズ(ピクセル)の目安とリサイズ方法【2021年】
理由③OGP画像では正方形になる
3つ目の理由は、
SNSでシェアされる際に表示されるOGP画像では、アイキャッチ画像が正方形に切り取られて表示されることがあるからです。
そのため、アイキャッチ画像は先ほど紹介したサイズや比率にしつつも、画像の中央の正方形に重要なテキストを収めることが必要になります。
OGP画像とは
ちなみにOGPとはOpen Graph Protocol(オープン・グラフ・プロトコル)の略で、
TwitterやFacebookなどSNSに記事をシェアしたときに表示される
・タイトル
・説明文
・画像
などの情報を表示する仕組みのことを指しますが、そこで表示される画像がOGP画像になります。
🌸応募について🌸
🌞応募条件
いいね & RT🌞対象
フォロワー様限定
(まだフォロワーでない方は
この機会に是非繋がりましょう😆)応募をしてリプ下されば
DMにて資料をプレゼント致します😊✨それまでこちらの記事を読んでお待ちください😆https://t.co/dyIVWSGJMo
— なべたろ🌞半年で1000万PV【SEO】 (@seonabe) January 9, 2021
上記は参考ツイートになりますが、記事タイトルやURLと合わせてアイキャッチ画像が表示されています。
OGP画像は正方形になることもある
このOPG画像は基本的にはそのまま横長の画像で表示されますが、バージョンやデバイスによっては正方形に切り取られて表示されることがあります。
例えば以下の画像なら以下のように切り取られます。
詳しくは後ほど「ポイント③記事一覧やブログカードでも途切れないようにテキストを収める」の見出しで解説しますが、OGPだけでなくブログの記事一覧やブログカードでの内部リンクでも正方形に切り取られる可能性があるので注意が必要です。
OGP画像の表示をチェックする方法
OGP画像の表示を確認するには以下のツールがおすすめです。
Facebookの場合
シェアデバッガーはFacebook公式のツールで、Facebookにログインした状態でブログ記事のURLを入力してデバッグボタンをクリックすると、OGPのイメージを確認できます。
Twitterの場合
Card ValidatorはTwitterの公式のツールで、Twitterにログインした状態でブログ記事のURLを入力して「Preview card」をクリックするとOGPのイメージを確認できます。
WordPressのアイキャッチ画像サイズを考える時のポイント
アイキャッチ画像のおすすめのサイズは本記事の最初に紹介した通りですが、ブログのデザインによって少しずつ異なることも。
自分のブログに最適なアイキャッチ画像のサイズに調整するためのポイントを解説します。
アイキャッチ画像が表示されるのは3箇所
まず、アイキャッチ画像が表示される場所は主に3箇所あります。
- 記事トップ
- 記事一覧やブログカード
- SNS
記事トップは以下のように、ブログ記事を開いた時の最初に表示される場所。
記事一覧やブログカードは、ブログの記事一覧の箇所でのサムネイルやブログカードに表示される画像を指します。
↑記事一覧で表示されるアイキャッチ画像
↑ブログカードで表示されるアイキャッチ画像
SNSは、先ほど解説したOGP画像です。
全てに対応できるアイキャッチ画像サイズにする
ブログで最適なアイキャッチ画像のサイズにするには、アイキャッチ画像が表示される3箇所全てに対応できるサイズや比率にする必要があります。
よってその全てに対応できるために、以下の3つのポイントを抑えましょう。
アイキャッチのサイズの3つのポイント
- ポイント①：1番大きな「記事トップ」のサイズ・比率に合わせる
- ポイント②：SNSでも途切れないようにテキストを収める
- ポイント③：記事一覧やブログカードでも途切れないようにテキストを収める
ポイント①1番大きな「記事トップ」のサイズ・比率に合わせる
まずは、最も基本となる「記事トップ」のサイズに合わせましょう。
この画像のサイズがアイキャッチ画像の基盤のサイズになります。
先述の通り、1200px × 630pxが最もおすすめです。
「もっとギリギリまで小さくしたい！！」という方は、WordPressテーマごとの推奨サイズも後ほど「WordPressテーマ別のおすすめアイキャッチ画像サイズ」の見出しで紹介するのでそちらをご覧ください。
ポイント②SNSでも途切れないようにテキストを収める
2つ目のポイントは、SNS(OGP)でもテキストや重要なイラストが途切れないように、アイキャッチ画像の中の重要な部分は正方形に収めるということです。
これで以下のようなアイキャッチ画像になります。
ポイント③記事一覧やブログカードでも途切れないようにテキストを収める
最後に、記事一覧やブログカードでもテキストが途切れないようにする必要があります。
例えば本ブログの場合は、以下のように高さが短い横長の画像になっているので、、、
アイキャッチ画像の中のテキストがあまり上の方や下の方にならないように注意が必要です。
この記事一覧やブログカードの画像サイズや比率はブログごとに異なるので、自分のブログの表示サイズを確認する必要があります。
後述する「自分のブログの表示サイズの確認方法」を参考にサイズを確認しましょう。
本ブログの場合は、
- 記事一覧のアイキャッチ画像のサイズが「750px × 300px」
- 比率を計算すると「2.5:1」
- 幅が1,200pxなら、2.5:1で計算すると高さは480pxになる
よってアイキャッチ画像では「1,200px × 480px」の中にテキストを入れ込む必要があるということになります。
ポイント①~③を整理すると、本ブログの場合は以下のアイキャッチ画像サイズが最適ということになります。
ポイント①②はどのブログも共通なので、ポイント③の数字を「自分のブログの表示サイズの確認方法」を参考に確認して計算してみましょう。
自分のブログに最適なアイキャッチ画像サイズを把握しよう
基本的に誰でも使えるおすすめなアイキャッチ画像サイズは、冒頭でお伝えした1,200px × 630pxですが、
- もう少しサイズを落としたい
- 記事一覧やブログカードでも途切れないようにしたい
という方はこちらをご覧ください。
WordPressテーマ別のおすすめアイキャッチ画像サイズ
まず、WordPressテーマごとに推奨されている一般的なサイズは以下のようになっています。
| テーマ | 推奨サイズ |
|---|---|
| AFFIGER5 | 1200px × 630px |
| SANGO | 680px × 390px |
| SWELL | 1600px × 840px |
| THE THOR | 768px × 432px |
| JIN | 760px × 428px |
| Cocoon | 1200px × 630px |
基本的には1.91:1に合わせられているところが多く、中にはGoogle推奨の16:9の比率のテーマもありますが、個人的には1.91:1にするのがおすすめです。
また、本記事ではサイズは1,200px × 630を最も汎用性が高いとおすすめしていますが、上のテーマごとの数字まで小さくしても良いと思います。
自分のブログの表示サイズの確認方法
記事一覧やブログカードでもアイキャッチ画像が途切れないようにするために、自分のブログの表示サイズを確認する手順を解説します。
アイキャッチ画像の表示サイズの確認手順
- 記事一覧のページを開く
- 「デベロッパーツール」を開く
- カーソルマークをクリックする
- アイキャッチ画像が青くなる箇所でクリックする
- 「Computed」をクリックする
- イラストの青色部分の数字を確認する
手順①記事一覧のページを開く
まずは上の画像のように、Google Chromeで記事一覧のページを開きましょう。
手順②「デベロッパーツール」を開く
上の画像のように「デベロッパーツール」というものを開きます。
「デベロッパーツール」を開くには、
- Macなら「option」 + 「command」 + 「i」
- Windowsなら「F12」
で開くことができます。
ちなみにデベロッパーツールとは、ブラウザで開いているページのソースコードやCSSなど様々な情報を見ることができるツールです。
手順③カーソルマークをクリックする
上の画像の箇所のカーソルマークをクリックします。
カーソルマークが青くなればOKです。
手順④アイキャッチ画像が青くなる箇所でクリックする
記事一覧のアイキャッチ画像の箇所にカーソルを移動させます。
すると上の画像のように、アイキャッチ画像が青くなる箇所があるので、そのタイミングでクリックをします。
手順⑤「Computed」をクリックする
デベロッパーツールの右の方に「Computed」という箇所があるのでクリックします。
手順⑥イラストの青色部分の数字を確認する
すると上の画像のようなイラストが表示されます。
このイラストの青色の部分に書かれている数字が、自分のブログで表示されているアイキャッチ画像のピクセル数です。
上記の手順で記事一覧のアイキャッチ画像のサイズと比率を確認したら、ブログカードの場合も同様に行って確認しましょう。
ここで確認した画像の比率に合わせて、テキストが収まるようにアイキャッチ画像のテキスト(あるいは重要なイラスト)の範囲を調整すれば、完璧なアイキャッチ画像の出来上がりです。
WordPressのアイキャッチ画像サイズの変更方法
次はアイキャッチ画像のサイズ変更をするためのおすすめのツールをご紹介します。
手動で変更する場合「Squoosh」
>> Squoosh
手動で画像をリサイズ(サイズ変更)したい場合は、Squooshがおすすめです。
Googleが無料で提供する画像圧縮・変換アプリです。
- ドラッグ&ドロップで簡単
- SEOにも強いWebP画像に変換もできる
- 画質を綺麗に圧縮・リサイズできる
というところが魅力です。
使い方は以下の記事で解説しています。
>> Googleの画像圧縮アプリSquooshが便利！使い方を画像付きで解説！
SEOに強いWebP画像については以下の記事で解説。
>> WordPressでWebP画像に変換・対応させる3つの方法【WebP画像】
プラグインで自動で変更する場合
プラグインで自動でサイズを変更(リサイズ)する場合は以下の2つがおすすめです。
①EWWW Image Optimizer
- 自動でリサイズしてくれる
- 画像の圧縮も自動でできる
- 画像の最適化で軽くしてくれる
- 画像の読み込み遅延機能でさらに表示速度が速くなる
- WebPにも対応
という素晴らしいプラグイン。
WordPressブロガーならほとんどの方が使っているプラグインです。
詳細は以下で解説。
>> 【2021年最新】EWWW Image Optimizerの最新設定方法と使い方【画像最適化プラグイン】
Googleも推奨するWebPの設定方法は以下で解説。
>> 【画像付き】EWWW Image OptimizerでWebP画像への変換を設定する方法
②Imsanity
という方におすすめです。
- 画像を自動でリサイズ
- アップロード済みの画像も一括でリサイズ
などをすることができます。
以下の記事で使い方を解説しています。
>> 【2021年最新】Imsanityの設定方法とおすすめの使い方：画像リサイズプラグイン【WordPress】
WordPressのアイキャッチ画像サイズのQ&A
Q. アイキャッチ画像のサイズを揃える・統一する方法は？
記事一覧などでアイキャッチ画像のサイズがバラバラになるのは、アップロードする画像の比率やサイズがバラバラなことがことが原因です。
今後アップロードするアイキャッチ画像は全て同じサイズ・比率に統一しましょう。
既にアップロード済みのアイキャッチ画像のサイズを揃えるには、Regenerate Thumbnailsというプラグインを使うと一括で統一できます。
Q. アイキャッチ画像が切れる時はどうしたら良い？
アイキャッチ画像が途切れるのは、画像の縦横比が最適でないことが原因です。
ただし、ブログの中でも
- 記事トップで表示されるアイキャッチ画像の縦横比率
- 記事一覧で表示されるアイキャッチ画像の縦横比率
- ブログカードで表示されるアイキャッチ画像の縦横比率
がそれぞれ異なる場合があるので、以下の2つの見出しを参考に、画像自体は記事トップのサイズと比率に合わせながら、テキストなどの重要な箇所はブログカードや記事一覧のサイズに収まるように作成しましょう。
Q. アイキャッチ画像に使えるフリー素材サイトを教えて
以下の記事で、アイキャッチ画像にも記事内にも使えるおすすめのフリー素材サイトを34サイト紹介しています。
綺麗な写真のサイトはもちろん、イラストやアイコン、キャラクターのフリー素材サイトも多数紹介しています。
>> 【無料】ブログに使えるフリー画像素材サイトおすすめ34選
Q. アイキャッチ画像を作るおすすめのサービスは？
アイキャッチ画像を作成するにはCanvaというサービスがおすすめです。
アイキャッチ画像だけでなくいろんな画像や作成が簡単にできます。
WordPressのアイキャッチ画像サイズを整えて魅了的なブログに！
WordPressのアイキャッチ画像のおすすめのサイズと、自分のブログに合ったさらに最適なサイズを調べる方法を解説しました。
アイキャッチ画像のサイズをうまく設定しないと、画像が途切れて魅力的な記事に見えないので、多くの方に読んでもらうためにサイズにはこだわりましょう。
アイキャッチ画像ではなくブログの記事内のおすすめの画像サイズは以下の記事で解説しています。
>> WordPressブログに最適な画像サイズ(ピクセル)の目安とリサイズ方法【2021年】
サイトを高速化するために知っておきたい、ブログの画像の容量(ファイルサイズ)の目安と圧縮方法は以下の記事で解説しています。
>> WordPressブログの最適な画像容量(ファイルサイズ)の目安と圧縮方法【2021年】
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
