WordPressに最適化された画像サイズ/Google砲狙う

アイキャッチ画像
読者さん

・Word Pressに最適化された画像サイズが知りたいな
・画像を好きなサイズに変更する方法が知りたい

今回はこのようなお悩みに回答します。

実は画像の最適なサイズは、アイキャッチ画像とそれ以外の画像で異なります。

  • アイキャッチ画像: 横幅1200px×高さ675px【Google砲狙い】
  • アイキャッチ以外の画像(目安): 横幅800px×高さ450px【読者が見やすいサイズ】

Google砲とは、Google検索の目立つ場所に記事が掲載されPV数が激増することです。

Google砲の図

私もアイキャッチ画像サイズの最適化により、Google砲の恩恵を受けた経験があります。

この記事を読むと、Google砲を狙うための最適化なアイキャッチ画像サイズ軽量化しながら画像サイズを変更する方法がわかります。

本記事を参考にぜひGoogle砲を狙って、PV数を爆上げしましょう。

目次

Word Pressのアイキャッチ画像サイズは横幅1200px×高さ675px

アイキャッチ画像の横幅を1200pxにする

Word Pressに掲載するアイキャッチ画像の横幅は、1200px以上のものを使うとGoogle Discover(グーグルディスカバー)に表示されやすくなります。

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

引用:Google検索セントラルDiscover とウェブサイト

Google Discoverとは、ユーザーの検索行動により関連性の高いコンテンツを目立つ場所に表示させるサービスです。

Discover表示画像
Google Discoverに掲載された記事
Shota

スマホで「Googleアプリ」や「Google Chrome」を開くと、TOP画面に出てくるおすすめ記事のことです。

Google Discoverに掲載されると、あなたの記事は多くの人の目にとまるため、急激にPV数が増加します。(Google砲)

Google砲の図

画像の横幅は1200px以上と記載されていますが、横幅が無駄に大きいと容量が重くなるため1200pxにしましょう。

max-image-preview:large の設定方法

引用文の通り、Google Discoverに記事が掲載されやすくするには「max-image-preview:large の設定または AMP を使用して有効」が必要になります。

そこで今回は後者の「max-image-preview:largeの設定」を解説します。

Shota

AMPの有効化はややこしいので、止めておきましょう。

手順は簡単です。

<meta name="robots" content="max-image-preview:large">

このコードをhead内に記述します。

方法は、WordPressの管理画面から「外観」⇒「テーマエディタ」に行き、子テーマにあるfunctions.phpというファイルに記述します。

子テーマとfunctions.php

コードはfunctions.phpの下の方に記載します。(特に理由がなければ、記載場所は一番下)

必ず子テーマに記述してください。また記載ミス対策のために事前にコードをメモ帳などにコピーしておいてください。

// head内にカスタム用のコードを追加する
function meta_headcustomtags() {
$headcustomtag = <<<EOM

<!-- headに表示させたいコードをここに!(この行は消してね)-->

EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

【headに表示させたいコードをここに!】の場所に記載します。

関数を記入した画像

ファイルを保存して完了です。

「max-image-preview:largeの設定」により、Google Discoverのフィードに記事が並ぶと、アイキャッチ画像が最大サイズで表示されます。

max-image-preview:largeの設定されたDiscover

Google Discoverに掲載されるには画像サイズの設定だけではなく、優れたコンテンツを継続して投稿する必要があります。

まずは、アイキャッチ画像の横幅を1200pxに設定して、Google砲が来るのを待ちましょう。

アイキャッチ画像の高さを675pxにする

youtubeの画像

アイキャッチ画像の高さを675pxにする理由は、画像の横幅と高さの比率(アスベクト比)を16:9にするためです。

アイキャッチ画像の横幅が1200pxの場合、縦幅を675pxにするとアスベクト比は16:9になります。

アスベクト比を16:9する理由は、見慣れているTVやyoutube、ニコニコ動画にアスペクト比に合わせるためです。

アイキャッチ画像に違和感を与えないためにも、高さは675pxにしましょう。

Word Pressにアイキャッチ画像を挿入すると、サイズが縮小されて表示される

作成した画像をWord Pressに挿入すると、ブログ上では画像が縮小されて表示されます。

ブログのメインカラム幅が、画像の横幅1200pxより狭いためです。

メインカラム幅の図

私の使用しているSWELLというテーマのメインカラムの幅は729pxです。

そのためアイキャッチ画像は以下のように縮小して表示されます。

項目挿入前の画像 挿入後の画像
画像サイズ横幅1200px×高さ675px横幅729px×高さ410px
アスベクト比16:916:9

アスベクト比は16:9を維持しながら画像サイズは縮小されます。

読者さん

画像が縮小されたらGoogle Discoverに表示されないの?

Shota

大丈夫です。Googleは縮小される前の画像サイズが横幅1200px×高さ675pxだと認識しています。

横幅1200px、高さ675pxと認識されている証拠

Word Pressに挿入された画像サイズデータを取得する方法

画像サイズデータはGoogle Chromeのデベロッパーツールで取得することができます。

STEP
Google Chrome でブログを表示

Google Chromeのプラウザからブログ画面を表示します。

STEP
デベロッパーツールを選択
デベロッパーツールの使い方1

画面右上の:(Google Chromeの設定)をクリックし、その他のツール⇒デベロッパーツールを選択します

STEP
画像サイズを表示させる
デベロッパーツールの使い方2

矢印のボタン(Select element in the page inspect it)をクリックします。

調べたい画像をクリックし、下にスクロールすれば画像サイズが表示されます。

Word Pressに画像をアップロード時、ブラグインでサイズが変更されないように注意する

EWWW Image Optimizer

EWWW Image Optimizerなどの画像圧縮プラグインを有効化しておくと、横幅1200px×高さ675pxに設定した画像サイズが変更されることがあります。

EWWW Image Optimizerでの画像の横幅設定

EWWW Image Optimizerの場合は設定画面で、画像サイズの幅の上限を1200pxに設定しましょう。

幅の上限を1200px以下に設定すると、 Word Press にアップロードされる画像の横幅が1200px以下に変更されてしまいます。

Word Pressのその他の画像サイズ(目安)は横幅800px×高さ450px

アイキャッチ以外の画像サイズを決めるポイントは1つ。読者が見やすい、大きな画像サイズにすることです。

読者が見やすい大きな画像サイズとは、以下のように定義します。

  • 横幅がWord Pressのメインカラム幅ぴったりであること
  • 縦幅が横幅にもとづきアスベクト比16:9に設定されていること
メインカラム幅の図

ただし、Word Pressのメインカラム幅はテーマごとに異なります。

Word Pressテーマごとのメインカラム幅

Word Pressの各テーマのメインカラム幅は、以下のようになります。

有料テーマのメインカラム幅
  • ALBATROS – 654px
  • Manablog copy – 670px
  • THE THOR – 698px
  • JIN – 700px
  • SANGO – 700px
  • WING(AFFINGER5) – 700px(変更可)
  • STORK19 – 728px
  • HUMMING BIRD – 728px
  • SWALLOW – 764px
  • 賢威8 – 780px
  • SWELL – 729px
無料テーマのメインカラム幅
  • STINGER8 – 640px
  • Extension – 712px
  • Base- 740px
  • LIGHTNING – 730px
  • SYDNEY – 775px
  • ONEPRESS – 790px
  • COCOON – 800px(変更可)

メインカラム幅の最大はCOCOONの800pxです。

よってWord Pressに使用する画像の横幅は800pxにすれば問題ありません。

また高さはアスベクト比を16:9に合わせるため、450pxにしましょう。

Shota

横幅800px×高さ450pxはあくまで目安です。読者がはっきり画像を認識できれば問題ありません。また縦長の画像は高さを450pxより大きくしましょう。

Word Pressに使う画像サイズをBulk Resize Photosで変更する

オリジナル画像など、Word Pressに使用する画像のサイズを変更する方法を紹介します。

今回はBulk Resize Photosという無料サイトを活用します。

Bulk Resize Photosは画像サイズを変更するのに最適な無料サイトです。

  • 操作がとても簡単
  • 最大150枚の画像を同時に60秒でリサイズできる。
  • 無料サイトなので、ダウンロードの必要がない
  • 画像のサイズ変更と同時に、容量の軽量化も可能
  • 画像を次世代フォーマットであるWEBP形式に変換可能
Shota

1度に多くの画像をサイズ変更でき同時に軽量化も可能なため、私も愛用しているツールです。

画像サイズを横幅800px×高さ450pxに変更し、軽量化する方法

今回は竹林の画像サイズを横幅800px×高さ450pxに変更する方法を例に解説します。

竹林のサイズ変更前画像
サイズ変更前の竹林の画像(横幅3264px×高さ2448px)
STEP
サイズを変更する画像を選択する
Bulk-Resize-Photos-top

Bulk Resize Photosのサイトへ。

「画像を選択します」をクリックし、サイズを変更したい画像を選択する。

STEP
Bulk Resize Photosに設定値を入力
Bulk-Resize-Photos-resize
  1. 「画像の寸法」をクリックする
  2. 画像を幅800px、高さ450pxに設定
  3. 画像フォーマットをWEBPに選択
  4. 画質を80%に選択
  5. 画像の背景を透明な背景にチェックを入れる
  6. 開始をクリック
STEP
ダウンロードした画像を名前をつけて保存する
竹林サイズ800px×450px

WEBPでダウンロードされた画像をクリックして開く。

サイズ変更された画像が表示されたら右クリックを押して「名前をつけて保存」を押したら完了。

竹林のリサイズ完了画像
横幅800px×高さ450pxにサイズ変更した竹林の画像

サイズ変更された画像は以下のスペックになります。

項目変更前 変更後
画像サイズ横幅3264px×高さ2448px 横幅800px×高さ450px
アスベクト比4:316:9
画像容量2.38MB56KB
画像フォーマット JPEG WEBP

画像サイズは目標の横幅800px×高さ450pxになりました。

また画像容量は1.68MBから56KBに圧縮され、96%も軽量化されました。

画像の余白に色をつける方法

竹林の画像余白に背景色
左右の余白に背景色をつけた竹林画像

横幅800px×高さ450pxに変更した竹林の画像は、アスベクト比が4:3から16:9に変更されています。

画像の左右に余白が生じ透明色で表示されます。そのため一目見た場合に横幅が800pxに見えません。

余白が気になる場合は、画像の背景を選択する画面で、下記の図のように色を選択すれば余白に色をつけることができます。

余白に背景色を付ける方法

余白が気になる方は背景色をつけてください。

Shota

SWELLのメインカラム幅は729pxです。繰り返しとなりますが横幅800px×高さ450pxの画像をWord Pressに挿入すると、横幅729px×高さ547pxに縮小されて表示されます。

画像フォーマットをWEBPに設定する理由

WEBPはGoogle公式の画像で、圧縮率に秀でたことが魅力です。

画像をWEBPに変えることによって、3つのメリットを享受可能となります。

  1. 表示速度を向上させられる
  2. 画像サイズを軽量化させられる:JPEGと対比し、25~34%軽量化
  3. 圧縮率のアップでSEOの強化になる

表示速度をアップさせることは、読者のフラストレーション緩和や離脱率低下につながります。

縦長画像を最適なサイズに変更する方法

画像が縦長の場合は、高さを450pxよりも高くした方が見やすくなります。

この場合、Bulk Resize Photosでは横幅800pxに固定して画像サイズを変更します。

STEP
サイズを変更する画像を選択する
Bulk-Resize-Photos-top

Bulk Resize Photosのサイトへ。

「画像を選択します」をクリックし、サイズを変更したい画像を選択する。

STEP
Bulk Resize Photosに設定値を入力
Bulk Resize Photosの設定画面
  1. 幅を選択
  2. 幅800pxに設定(個という表記は無視)
  3. 画像フォーマットをWEBPに選択
  4. 画質を80%に選択
  5. 画像の背景を透明な背景にチェックを入れる
  6. 開始をクリック
STEP
画像に名前をつけて保存する

サイズ変更された画像が表示されたら右クリックを押して「名前をつけて保存」を押したら完了。

サイズ変更後の竹林の画像
サイズ変更した竹林の画像

サイズ変更された画像は以下のスペックになります。

項目変更前 変更後
画像サイズ横幅3264px×高さ2448px 横幅800px×高さ600px
アスベクト比4:34:3
画像容量2.38MB80KB
画像フォーマット JPEG WEBP

サイズ変更後の画像の高さが600pxとなり、見やすくなりました。

また画像容量は1.68MBから80KBに圧縮され、95%も軽量化されました。

Word Press内で最適化された画像サイズに変更する

wordpress

Word Press内に取り込んだ画像サイズを、Word Press内で直接変更することができます。

ただし以下の制限があります。

  • 横幅800px×高さ450pxのように画像サイズを細かく設定できない
  • 画像サイズの縮小はできるが拡大はできない

制限はあるものの、画像容量の軽量化も同時に行われます。既に大きな画像をWord Press内にアップロードしてしまった方は、今回紹介する方法をお試しください。

画像のアスベクト比を維持したまま、サイズを縮小する方法

Word Press内での画像サイズ変更は、画像のアスベクト比を維持したまま縮小することになります。

今回は竹林の画像の横幅を3264pxから800pxへ縮小します。

STEP
サイズ変更する画像を選択
ワードプレス内でサイズ変更1

ダッシュボードからメディアを選択し、サイズを変更したい画像をクリックします。

STEP
画像を編集をクリック
ワードプレス内でサイズ変更2

画像の下部にある編集をクリックします。

STEP
画像サイズを入力
ワードプレス内でサイズ変更3

画像縮尺の変更の欄の横幅に800と入力します。

アスベクト比は変えられないので横幅を入力すると、自動的に高さが変更されます。

入力が終わったら「縮尺変更」をクリックしてください。

STEP
更新ボタンをクリック
ワードプレス内でサイズ変更4

更新をクリックすれば画像サイズ変更は完了です。

保存されている画像サイズが以下のように変更されました。

項目変更前 変更後
画像サイズ横幅3264px×高さ2448px 横幅800px×高さ600px
アスベクト比4:34:3
画像容量2.38MB393KB
画像フォーマット JPEG JPEG
Shota

Word Press内での画像サイズ変更はとても簡単です。ぜひお試しください。

Word Pressに使用する画像を好みのサイズで記事に挿入する

Word Pressにアップロードした画像は、画像サイズを変更して記事に挿入することができます。

今回はブロックエディタでの方法を紹介します。

画像サイズを変更して記事に挿入する方法

画像を4種類選択できる

投稿画面右側のブロックを選択します。画像サイズの項目から好きなサイズを選択できます。

選択できる画像サイズは以下の4種類です。

  1. サムネイル
  2. フルサイズ

元の画像サイズが横幅800px×高さ600pxの場合、Word Pressに挿入するとそれぞれ以下のようにサイズ変更されました。

画像サイズ アスベクト比
サムネイル横幅300px×高さ225px4:3
横幅500px×高さ375px4:3
横幅729px×高さ547px4:3
フルサイズ横幅729px×高さ547px4:3

①サムネイルサイズの竹林画像

サムネイルサイズ
サムネイルサイズ

②中サイズの竹林画像

中サイズ
中サイズ

③大サイズの竹林画像

大サイズ
大サイズ

④フルサイズの竹林画像

フルサイズ
フルサイズ

サムネイルサイズと中サイズの画像はアスベクト比は維持したまま、縮小して画像を挿入することができました。

読者さん

画像を縮小して挿入する意味あるの?

Shota

サムネイル、中サイズのように縮小した画像は、デスクトップ上で横2列に画像を並べたいときに便利です。また画質が粗い時、画像を縮小することでごまかしが効きます(笑)

挿入する画像サイズは、用途に応じて使い分けてください。

サムネイル、中、大の画像サイズの設定方法

メディア設定

ダッシュボードの設定からメディアを選択します。

サムネイルサイズ、中サイズ、大サイズの幅の上限を設定すれば完了です。

幅の上限とは、画像の横幅の上限のことです。

まとめ

まとめ

今回はGoogle砲を狙えるアイキャッチ画像のサイズと、画像サイズの変更方法を中心に解説しました。

本記事のまとめ
  1. Google砲を受けやすいアイキャッチ画像のサイズは、横幅1200px×高さ675px
  2. アイキャッチ以外の画像サイズの目安は、横幅800px×高さ450px
  3. 画像サイズをBulk Resize Photosで変更する方法
  4. Word Press内で画像サイズを変更する方法
  5. Word Pressに使用する画像を好みのサイズで記事に挿入する方法

Bulk Resize Photosを駆使して、最適化された画像サイズに変更しましょう。

よかったらシェアしてね!
目次
閉じる