選ばれるAI診断

WordPressのアイキャッチ画像の設定方法|サイズの目安と、入稿のときに自動で入れる方法

公開日: / カテゴリ: WordPress入稿 / 執筆: エラバレル

WordPressのアイキャッチ画像の設定方法|サイズの目安と、入稿のときに自動で入れる方法

「記事を公開したら、ブログの一覧に画像が出ていなかった」「アイキャッチ画像はどのくらいの大きさで作ればいいのか分からない」「SNSでシェアされたときに、意図しない画像が出てしまう」。WordPressでブログを始めたばかりの方から、よく聞く悩みです。

先に結論をお伝えします。アイキャッチ画像は、記事の編集画面の右側にある「アイキャッチ画像を設定」から登録します。 大きさは、横長の1200×630ピクセル前後で作っておくと、ブログの一覧でもSNSでの共有でも使いやすくなります。記事の数が多い場合は、入稿のときにアイキャッチも自動で入るようにしておくと、設定忘れがなくなります。

この記事では、アイキャッチ画像の役割、ブロックエディタでの設定の手順、サイズの目安、作り方のコツ、表示されないときの確認箇所、SNSやAI検索との関係、入稿のときに自動で入れる方法までを、順番に解説します。

この記事でわかること

  • アイキャッチ画像とは何か、どこに表示されるのか
  • ブロックエディタ・クラシックエディタでの設定の手順
  • サイズとファイルの重さの目安
  • 見やすいアイキャッチ画像を作るコツ
  • アイキャッチが表示されないときの確認箇所
  • 入稿のときにアイキャッチを自動で入れる方法

アイキャッチ画像とは?

アイキャッチ画像とは、記事の「顔」として、記事ごとに1枚登録する代表の画像です。英語の「eye catch(目を引く)」から来た言葉で、WordPressの画面では「アイキャッチ画像」と表示されます。英語の画面では「Featured image」と呼ばれます。

アイキャッチ画像は、記事の本文に入れる画像とは別に登録します。登録した画像が、どこにどう表示されるかは、使っているテーマ(サイトのデザインのひな形)によって違いますが、主に次の場所で使われます。

  • ブログの記事一覧:トップページやカテゴリのページで、記事の題名と並んで表示される
  • 記事の上部:記事を開いたとき、題名の上や下に大きく表示される
  • 関連記事・人気記事の一覧:記事の下や横に、小さく表示される
  • SNSやLINEで共有されたとき:URLを送ったときに表示される画像として使われることが多い

アイキャッチと「サムネイル」の違い

サムネイルは、画像を小さく縮めた表示のことです。WordPressでは、アップロードした画像から、自動でいくつかの大きさの画像(サムネイルなど)が作られます。記事一覧に小さく出ているのは、アイキャッチ画像のサムネイルです。同じ画像が、場所によって違う大きさで表示されている、と考えてください。

アイキャッチ画像を設定しないとどうなる?

アイキャッチ画像を設定しなくても、記事は公開できます。ただし、次のようなことが起きます。

  • 記事一覧で、画像の場所が空白になる、またはテーマが用意した「NO IMAGE」の画像が出る
  • SNSで共有されたときに、画像が出ない、またはサイトのロゴなど別の画像が出る
  • 記事一覧の見た目がそろわず、読まれにくくなる

テーマによっては、本文の最初の画像を自動でアイキャッチの代わりに使う設定もありますが、確実に表示したいなら、記事ごとに設定しておくのが基本です。

また、SEOプラグインで「既定の画像(アイキャッチがない記事に使う画像)」を1枚登録しておくと、設定を忘れた記事でも、SNSで共有されたときにロゴやサイトの画像が出るようになります。記事ごとの設定とあわせて、保険として登録しておくと安心です。

アイキャッチ画像の設定方法

ブロックエディタの場合

WordPressの標準の編集画面(ブロックエディタ)での手順です。

  1. 管理画面の「投稿」→「投稿一覧」から、設定したい記事の「編集」を開く(新しい記事なら「新規投稿を追加」)
  2. 画面の右側の設定の欄で、「投稿」のタブを選ぶ(設定の欄が出ていない場合は、画面の右上にある設定のボタンを押す)
  3. 「アイキャッチ画像を設定」と書かれた枠を押す
  4. メディアライブラリが開くので、使いたい画像を選ぶ。新しい画像を使う場合は「ファイルをアップロード」のタブから、画像をアップロードする
  5. 画像を選んだら、右側の「代替テキスト」に、何が写っている画像かを短く書く
  6. 右下の「アイキャッチ画像を設定」のボタンを押す
  7. 記事を「下書き保存」または「更新」して、変更を保存する

設定した画像を変えたいときは、右側の欄のアイキャッチ画像の部分で「置換」、外したいときは「削除」を選びます(WordPressのバージョンによって、表示が少し違うことがあります)。

「アイキャッチ画像」の欄が見当たらないとき

右側の設定の欄に、アイキャッチ画像の項目が出ていないことがあります。主な原因は2つです。1つは、編集画面の表示の設定で、その欄が隠れている場合。画面の右上にあるメニュー(縦に3つ点が並んだボタン)の「設定」から、表示する項目を選べます。もう1つは、使っているテーマがアイキャッチ画像に対応していない場合です。この場合は、テーマの説明書を確かめてください。

クラシックエディタの場合

古い編集画面(クラシックエディタ)を使っている場合は、記事の編集画面の右下に「アイキャッチ画像」という枠があります。「アイキャッチ画像を設定」を押し、メディアライブラリから画像を選んで設定するのは、ブロックエディタと同じです。枠が見当たらない場合は、画面の右上にある「表示オプション」を開き、「アイキャッチ画像」にチェックが入っているかを確かめてください。

スマートフォンから設定する場合

スマートフォンのブラウザで管理画面を開いた場合も、記事の設定の中にアイキャッチ画像の項目があります。画面が小さいので、設定の欄を開く操作が少し分かりにくくなりますが、手順は同じです。

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

アイキャッチ画像の最適な大きさは、テーマによって違います。ただ、多くのテーマでは横長の画像が使われ、SNSで共有されたときの画像(OGP画像)にも使われることが多いため、次の大きさで作っておくと、たいていの場面で困りません。

項目目安理由
大きさ横1200×縦630ピクセル前後SNSで共有されたときの画像として、広く使われている大きさ
縦横の比率横長(およそ1.91:1、または16:9)記事一覧やSNSでは横長の枠で表示されることが多い
ファイルの形式JPEG(写真)、PNG(文字や図)どの環境でも表示できる。WebPに対応したテーマも多い
ファイルの重さ数百KB程度重いと、ページの表示が遅くなる
文字を入れる場所画像の中央寄り一覧や共有のときに、端が切れて表示されることがある

使っているテーマに推奨の大きさがある場合は、テーマの説明書の数字を優先してください。テーマの推奨と、SNSの共有の両方に合わせるのが難しいときは、横1200×630ピクセルで作り、大事な文字や被写体を中央に寄せておくのが無難です。

スマートフォンの写真は、縮めてからアップロードする

スマートフォンで撮った写真は、1枚で数MBになることがよくあります。そのままアイキャッチにすると、記事一覧の表示が遅くなります。横幅1200ピクセル前後に縮め、圧縮のツールで軽くしてからアップロードしてください。

WordPressが自動で作る画像の大きさ

WordPressは、画像をアップロードすると、元の画像とは別に、小さく縮めた画像をいくつか自動で作ります。大きさは、管理画面の「設定」→「メディア」で確かめられます。初期の設定では、サムネイルが150×150ピクセル、中サイズが300ピクセル、大サイズが1024ピクセルまでです。テーマによっては、記事一覧用などの大きさを独自に追加しています。

元の画像が小さすぎると、大きく表示する場所でぼやけてしまいます。アイキャッチは「少し大きめに作って、WordPressに縮めてもらう」と考えておくと、どの場所でもきれいに表示されます。

アイキャッチ画像の作り方

デザインの専門のソフトがなくても、アイキャッチ画像は作れます。

  1. 大きさを決める:横1200×630ピクセルなど、使う大きさを決める
  2. 作る道具を選ぶ:無料の画像作成サービスや、プレゼンテーションのソフト(スライドの大きさを変えて画像として書き出す)が使える。画像作成サービスには、SNSの共有用の大きさのひな形が用意されていることが多い
  3. 背景を置く:自分で撮った写真か、単色の背景にする
  4. 文字を入れる:記事の題名を短くした言葉を、大きな文字で中央に入れる
  5. 書き出す:JPEGかPNGで書き出し、重ければ圧縮のツールで軽くする
  6. ひな形として保存する:次の記事では、文字と背景を差し替えるだけで作れるようにしておく

毎回ゼロから作ると、1枚に30分以上かかることもあります。ひな形を2〜3種類作っておき、記事の種類で使い分けると、1枚数分で作れるようになります。

見やすいアイキャッチ画像を作るコツ

アイキャッチ画像は、記事を開く前に読者の目に入る、記事の看板です。次の点に気をつけると、一覧の中でも記事の中身が伝わりやすくなります。

  • 文字は少なく、大きく:一覧では小さく表示されるので、文字は10〜15字程度にし、大きな文字で入れる
  • 記事の題名と、画像の文字をそろえる:題名とまったく違う言葉が入っていると、読者が混乱する
  • 背景と文字の色の差をはっきりさせる:白い背景に薄い灰色の文字などは、スマートフォンでは読めない
  • サイト全体でデザインをそろえる:同じ配置・同じ書体で作ると、ブログ全体がまとまって見える
  • 使ってよい画像を使う:自分で撮った写真、自分で作った図、使ってよい条件がはっきりした素材サイトの画像を使う

記事の種類ごとに、アイキャッチの作り方を変えるのも一つの方法です。

記事の種類アイキャッチの例入れる文字の例
やり方・手順の記事実際の画面や作業の写真+短い文字「アイキャッチの設定方法」
比較の記事2〜3つのものを並べた図「3つの方法を比較」
お知らせ・ニュースお店や会社の写真+日付「年末年始の営業のお知らせ」
事例・お客さんの声実際の作業や完成品の写真「〇〇市・キッチンの改装」
用語の解説単色の背景+大きな用語「OGPとは?」

種類ごとに色や配置を決めておくと、記事一覧を見たときに、読者が自分に必要な記事を見つけやすくなります。

アイキャッチ画像にも、代替テキスト(alt)を入れておきます。代替テキストは、画像が表示されないときや、目の不自由な方が読み上げの機能を使うときに使われる文章で、検索エンジンやAIが画像の中身を理解する手がかりにもなります。書き方は画像の代替テキストの記事で説明しています。

アイキャッチが表示されないときの確認箇所

アイキャッチ画像を設定したのに表示されないときは、次の順番で確かめてください。

  1. 記事を保存したか:画像を選んだあと、「更新」や「下書き保存」を押していないと、設定は保存されません
  2. テーマの設定:テーマによっては、記事一覧や記事の上部にアイキャッチを表示するかどうかを、カスタマイズの画面で選べるようになっています
  3. キャッシュ:表示を速くするためのプラグインやサーバーの機能で、古い画面が表示されていることがあります。キャッシュを消してから確かめます
  4. 画像のファイル:メディアライブラリで画像を開き、正しく表示されるかを確かめます。アップロードに失敗していることもあります
  5. SNSでの表示:SNSは一度読み込んだ画像を覚えているため、あとから画像を変えても、しばらく古い画像が出ることがあります
  6. SEOプラグインの設定:SEOプラグインによっては、記事ごとにSNS用の画像を別に指定する欄があります。そこに古い画像が入っていると、アイキャッチを変えてもSNSの画像は変わりません

それでも分からないときは、記事のページを開いて、ページのソースを表示し、og:image で検索してみてください。そこに書かれているURLが、SNSで使われる画像です。アイキャッチのURLと違っていれば、テーマかプラグインの設定に原因があります。

アイキャッチ画像とOGP・AI検索の関係

アイキャッチ画像は、記事一覧の見た目だけでなく、ページの外での見え方にもかかわります。

SNSやLINEで共有されたときの画像

URLが共有されたときに表示される題名・説明・画像は、OGP(Open Graph Protocol)という設定で決まります。多くのSEOプラグインやテーマは、記事のアイキャッチ画像を、OGPの画像(og:image)として自動で使います。つまり、アイキャッチ画像を設定することは、SNSで共有されたときの画像を決めることにもなるのです。

選ばれるAI診断で22業種・2,296件の公式サイトを診断したところ、共有用の情報(OGP)が不足または一部不足だったサイトは61%ありました。アイキャッチを設定していない、SEOプラグインで既定の画像を決めていない、といった原因が考えられます。OGPの確かめ方はOGPの確認方法の記事、LINEでの見え方はLINEで共有したときの画像の記事で説明しています。

AI検索での見え方

GoogleのAIによる概要やAIの検索では、答えの近くに参照したページが表示されることがあり、そのときにページの画像が添えられる場合があります。記事の代表の画像がはっきり決まっていると、どの画像を使えばよいかが伝わりやすくなります。ブログ記事の構造化データ(Article)でも、記事の代表の画像を image として伝えられます。SEOプラグインの多くは、アイキャッチ画像をこの image にも自動で使います。アイキャッチを設定しておくことは、検索エンジンやAIに「この記事の代表の画像はこれです」と伝えることにもつながります。書き方はArticleの構造化データの記事で説明しています。

入稿のときにアイキャッチを自動で入れる方法

記事の数が増えてくると、1本ずつアイキャッチを設定する作業は、意外と手間がかかります。設定を忘れたまま公開してしまうこともあります。

手作業で忘れないための工夫

  • 原稿のルールを決める:「原稿の1枚目の画像をアイキャッチにする」と決めておくと、どの画像を使うか迷わない
  • ファイル名をそろえる:アイキャッチ用の画像は「記事のスラッグ-eyecatch.jpg」のような名前にしておくと、メディアライブラリで探しやすい
  • 公開前の確認の項目に入れる:予約や公開の前に、アイキャッチが入っているかを必ず見る

Googleドキュメントから自動で入れる

ライターの原稿がGoogleドキュメントで届く場合は、入稿のときにアイキャッチも自動で入れる方法があります。エラバレルの「ドクポス」は、GoogleドキュメントのURLを貼ると、WordPressに記事を作るウェブサービスです。ドキュメントの先頭に次のように書いておくと、アイキャッチ画像が記事の設定に入ります。

ドキュメントの先頭の書き方の例

タイトル:WordPressのバックアップの取り方
スラッグ:wp-backup
カテゴリ:WordPressの使い方
アイキャッチ:1枚目
ステータス:下書き

「アイキャッチ:1枚目」と書くと、本文の1枚目の画像がアイキャッチになります。本文にない画像を使う場合は、画像のURLを書くこともできます。本文の画像も含めて、画像はWordPressのメディアライブラリにアップロードした状態で入るので、あとから1枚ずつアップロードし直す必要はありません。1回で最大50本まで投稿できるので、まとめて入稿するときも、アイキャッチの設定忘れが起きません。

本文の画像の入れ方や、外部の画像の扱いについては、WordPressの「外部画像をアップロード」とは?の記事でも説明しています。

アイキャッチ画像のチェックリスト

  • すべての記事に、アイキャッチ画像が設定されている
  • 大きさは横1200×630ピクセル前後、重さは数百KB程度
  • 大事な文字や被写体が、画像の中央寄りにある
  • 記事の題名と、画像の文字の内容がそろっている
  • 代替テキストに、画像の中身が書かれている
  • SNSやLINEで共有したときに、意図した画像が表示される

よくある質問

アイキャッチ画像は、本文にも入れたほうがいいですか?

テーマが記事の上部にアイキャッチを表示する場合、本文の先頭にも同じ画像を入れると、同じ画像が2回並びます。テーマの表示を確かめてから決めてください。

記事一覧で、画像の端が切れて表示されます。

テーマが、決まった縦横の比率で画像を切り取って表示しているためです。テーマの推奨の大きさで作るか、大事な部分を中央に寄せて作ると、切れても内容が伝わります。

アイキャッチ画像を設定すると、検索の順位は上がりますか?

アイキャッチ画像を設定するだけで順位が上がるわけではありません。ただ、記事一覧やSNSで記事の中身が伝わりやすくなり、読者に選ばれやすくなります。

無料の素材サイトの画像を使っても大丈夫ですか?

使ってよい条件(商用の利用、加工、クレジットの表記など)は、サイトや画像ごとに違います。使う前に、利用の規約を必ず確かめてください。

すでに公開している記事のアイキャッチを、まとめて設定できますか?

WordPressの標準の機能では、1本ずつ設定します。プラグインを使って、本文の最初の画像をまとめてアイキャッチにする方法もありますが、意図しない画像が選ばれることもあるので、設定後に一覧で確かめてください。

記事ごとに画像を用意する時間がありません。同じ画像を使い回してもいいですか?

使い回すこと自体は問題ありませんが、記事一覧が同じ画像ばかりになり、記事の区別がつきにくくなります。背景は共通にして、文字だけ記事ごとに変えるひな形を作っておくと、少ない手間で見分けのつくアイキャッチが作れます。

アイキャッチを変えたのに、SNSでは古い画像のままです。

SNSは、一度読み込んだページの情報をしばらく覚えています。時間がたてば新しい画像に変わりますが、SNSによっては、共有のプレビューを読み直す公式の確認ツールがあります。

まとめ

アイキャッチ画像は、記事一覧でもSNSでも、読者が最初に目にする記事の看板です。

この記事のまとめ

  • アイキャッチ画像は、記事の編集画面の右側「投稿」タブの「アイキャッチ画像を設定」から登録する
  • 大きさは横1200×630ピクセル前後、重さは数百KB程度。文字や被写体は中央に寄せる
  • 表示されないときは、保存・テーマの設定・キャッシュ・画像のファイルの順に確かめる
  • 多くのSEOプラグインはアイキャッチをSNSの共有画像(OGP)に使う。OGPが不足しているサイトは61%
  • 原稿の1枚目をアイキャッチにするなど、ルールを決めておくと設定忘れが防げる
  • Googleドキュメントの先頭に「アイキャッチ:1枚目」と書けば、入稿のときに自動で入れる方法もある

アイキャッチの設定を含めて、Googleドキュメントの原稿をそのままWordPressに入れたい人は、ドクポスを試してみてください。5記事まで、カード登録なしで試せます。

ドクポスを無料で試す

参考にした資料

調査の方法:選ばれるAI診断(2026年10月2日に見直した採点基準)で、22業種の公式サイト2,296件を再診断し、「共有用の情報(OGP)があるか」が「不足」または「一部不足」と判定されたサイトの割合を集計しました。個別のサイト名と点数は公開していません。