WordPressのアイキャッチ画像は何ピクセルが最適か？

多くの人が求めている数字は 1200 x 630 ピクセルです。これは Facebook、LinkedIn、X がリンクプレビューに使う比率（1.91:1）であり、Open Graph 画像がとるべきサイズでもあります。共有したリンクが正しく表示されることを主目的にアイキャッチ画像を設定するなら、1200 x 630 にしておけば十分です。

ただし、この数字はテーマが投稿ページで実際に表示するサイズではありません。WordPress がアイキャッチ画像を元のサイズのまま表示することはほとんどありません。テーマは登録済みの特定の画像サイズを要求し、WordPress はそれに合う生成済みの切り抜き画像を返します。だからこそ、Facebook では完璧に見える画像が、単一投稿テンプレートの中ではぼやけたり、引き伸ばされたり、意図しない位置で切り抜かれたりするのです。「正しい」サイズは普遍的なルールではなく、テーマによって決まります。

なぜテーマが数字を上書きするのか

画像をアップロードしても、WordPress はファイルを1つだけ保存するわけではありません。wp_generate_attachment_metadata() を実行し、登録済みのすべての画像サイズについて派生画像を生成します。デフォルトの3種類（thumbnail、medium、large）、ブロックエディタ用の medium_large（幅768px）、さらにテーマやプラグインが add_image_size() で登録したサイズすべてです。

横長の 16:9 ヒーロー画像を表示したいテーマは、functions.php に次のような記述をします。

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

4番目の引数 true は**ハードクロップ（強制切り抜き）**を意味します。WordPress は画像を正確に 1200 x 675 に切り抜き、16:9 のボックスに収まらない部分を切り捨てます。被写体がフレームの上端や下端寄りにあると、その部分がカットされます。false（または省略）にすると、比率を保ったまま縮小され、最終的な寸法は指定した値と異なることがあります。

続いて、テンプレートがどのサイズを呼び出すかを決めます。

the_post_thumbnail( 'hero-featured' );

the_post_thumbnail() に渡された名前の切り抜き画像が表示されます。つまり、サイト上の実際のアイキャッチ画像サイズは、あなたが書いたのではない2か所で定義されているのです。テーマ内の add_image_size() の呼び出しと、the_post_thumbnail() の呼び出しです。より大きなファイルをアップロードしても、このどちらも変わりません。

さらにもう1つの層があります。WordPress は srcset を出力するため、小さい画面ではブラウザがフルサイズの切り抜きではなく medium や large の派生画像を読み込むことがあります。DevTools で表示される寸法は、アップロードしたものとは異なることが多いのです。

直し方（順番どおりに）

1. テーマが実際に何を要求しているかを突き止める。 当てずっぽうで進める前に、WordPress が画像から生成するすべてのサイズと、そのうちどれが切り抜き済みのヒーロー画像なのかを確認しましょう。WordPress画像サイズツールに画像を入れると、WP が生成するすべての派生画像を正確なピクセル寸法で表示するので、幻の 1200x630 ではなく、実際のターゲットに元画像を合わせられます。

2. 最大の切り抜きをカバーできる十分な大きさでアップロードする。 テーマのヒーロー画像が 1200 x 675 なら、最低でもそのサイズ、できれば Retina 用に2倍（2400 x 1350）でアップロードしましょう。WordPress の縮小はきれいですが、拡大は決してしません。元画像が小さすぎることが、アイキャッチ画像がぼやける最も一般的な原因です。

3. アスペクト比をテーマの切り抜きに合わせる。 テーマが 16:9 でハードクロップするなら、16:9 の画像を渡します。ハードクロップで人物の頭が切れないよう、被写体を中央に配置して構図を作りましょう。

4. 登録サイズが間違っているなら、変更して再生成する。 子テーマで add_image_size() の値を編集し、既存のサムネイルを作り直します。新しい寸法は、これを実行するまで今後のアップロードにしか適用されません。

wp media regenerate --yes

WP-CLI がない場合は、Regenerate Thumbnails プラグインが管理画面から同じことを行います。

やってはいけないこと

1200x630 の画像をアップロードして、それで処理されると思い込まない。 テーマの登録サイズが 16:9 なら、WordPress はあなたの 1.91:1 の画像をハードクロップし、上下が失われます。Open Graph 用の数字と表示用の数字は、まったく別の役割です。

「元画像を残す」ためにWordPressの画像サイズを無効化しない。 中間サイズを0に設定したり、the_post_thumbnail のフックを外したりするアドバイスを見かけます。すると、テーマはフルサイズのファイルをブラウザ側で縮小して表示するようになります。4000px の JPEG をスマホに送り込むということです。これは読み込み時間と Core Web Vitals を大きく悪化させます。派生画像には存在する理由があるのです。

プラグインの「推奨サイズ」を、テーマの実際の登録サイズより信用しない。 SEO プラグインは OG タグ用に 1200x630 を推奨しますが、それはそのタグにとって正しいだけです。単一投稿テンプレートがどのサイズに切り抜くかについては何も語っていません。

サイズ変更後の wp media regenerate を飛ばさない。 add_image_size() を編集しても、すでにアップロード済みの画像には何の効果もありません。これが忘れられがちな手順で、そのせいでコードが効かなかったと結論づけてしまうのです。

それでも解決しない場合

寸法を合わせて再生成してもまだ画像がおかしいなら、原因はたいてい切り抜きモード（true か false か）か、予想より小さい派生画像を返している srcset です。画像サイズツールにファイルを入れて、自分の設定がどの切り抜きを生成するかを正確に確認し、それを DevTools でブラウザが実際に読み込んでいるものと比較しましょう。この2つを一致させれば、当てずっぽうは終わりです。