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

フェニック

WordPressに最適な画像サイズが知りたいな

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

実は画像の最適なサイズは、アイキャッチ画像と本文中の画像で異なります。

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

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

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

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

追記です。
WordPressを立ち上げたばかりの人には「WordPressの初期設定」の記事もおすすめです。

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

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

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

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

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

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

Shota

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

Google Discoverに掲載されると、あなたの記事は多くの人の目にとまるため、急激にPV数が増加します。(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の下の方に記載します。（特に理由がなければ、記載場所は一番下）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressの本文中の画像サイズ(目安)は横幅800px×高さ450px

本文中の画像サイズを決めるポイントは1つ。読者が見やすい、大きな画像サイズにすることです。

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

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

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

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

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

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

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

Shota

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

WordPressに使う画像サイズをBulk Resize Photosで一括変更する

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

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

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

Shota

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

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

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

STEP

サイズを変更する画像を選択する

Bulk Resize Photosのサイトへ。

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

STEP

Bulk Resize Photosに設定値を入力

1. 「画像の寸法」をクリックする
2. 画像を幅800px、高さ450pxに設定
3. 画像フォーマットをWEBPに選択
4. 画質を80％に選択
5. 画像の背景を透明な背景にチェックを入れる
6. 開始をクリック

STEP

ダウンロードした画像を名前をつけて保存する

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

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

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

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

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

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

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

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

Shota

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

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

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

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

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

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

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

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

STEP

サイズを変更する画像を選択する

Bulk Resize Photosのサイトへ。

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

STEP

Bulk Resize Photosに設定値を入力

1. 幅を選択
2. 幅800pxに設定（個という表記は無視）
3. 画像フォーマットをWEBPに選択
4. 画質を80％に選択
5. 画像の背景を透明な背景にチェックを入れる
6. 開始をクリック

STEP

画像に名前をつけて保存する

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

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

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

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

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

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

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

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

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

STEP

サイズ変更する画像を選択

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

STEP

画像を編集をクリック

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

STEP

画像サイズを入力

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

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

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

STEP

更新ボタンをクリック

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

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

Shota

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

WordPress内の画像を好みのサイズで記事に挿入する

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

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

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

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

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

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

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

②中サイズの竹林画像

③大サイズの竹林画像

④フルサイズの竹林画像

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

フェニック

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

Shota

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

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

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

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

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

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

まとめ

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

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