アイキャッチ画像は、記事編集画面で選ぶだけでなく、公開ページ・記事一覧・SNSで別々に表示を確認する必要があります。ここでは設定手順と、「設定済みなのに見えない」時の切り分けを初心者向けにまとめます。
本文画像とアイキャッチの違い
本文画像は記事を読み進めた場所に表示されます。アイキャッチは記事の代表画像で、テーマにより記事上部、トップ、カテゴリ一覧、関連記事などに使われます。同じ画像を使えますが、設定場所は別です。
アイキャッチ画像を設定する手順
- 「投稿」→「投稿一覧」から対象記事を編集する
- 右上の設定アイコンを押し「投稿」タブを開く
- 「アイキャッチ画像を設定」を押す
- メディアライブラリから画像を選ぶかアップロードする
- 代替テキストを入力し「アイキャッチ画像を設定」を押す
- プレビュー後に「更新」する
画像の文字だけで記事内容を伝えず、タイトルと画像が補い合うものを選びます。装飾画像ならaltを空欄にする判断もありますが、記事内容を表す写真や図は簡潔に説明します。
一覧用の代表画像という考え方なんですね。本文へ入れた写真が自動で選ばれると思っていて、ちょっと恥ずかしい勘違いでした…。
初めは同じものに見えるから、そう思うのも自然だよ。
設定場所が分かっただけで、何度も画像を入れ直さずに済むね。
少し安心しました。でも横長の画像なので、スマホで大事なところが切れないかはまだ心配です…。
その心配は公開前に確かめられるよ。
重要な部分を中央へ置き、PCとスマホの一覧を順番に見ようか。
画像サイズと切り抜きを確認する
推奨サイズはテーマによって異なります。一般には横長の画像が扱いやすいものの、一覧では中央を基準に切り抜かれることがあります。重要な人物、文字、製品を端へ寄せず、縮小しても意味が分かる画像を選びます。
- 大きすぎる画像はWebPなどで圧縮する
- ファイル名は内容が分かる半角英数字にする
- 画像内の文字はスマホでも読める大きさにする
- 権利を確認できない画像は使わない
設定したのに表示されない時の確認順
1. 更新保存したか
画像選択後に記事の「更新」を押していないと、公開ページへ反映されません。
2. 表示場所を間違えていないか
記事本文にはテーマ設定でアイキャッチを表示しない場合があります。トップやカテゴリに表示されるなら、設定自体は成功しています。
3. キャッシュが古くないか
キャッシュを削除し、URLへクエリを付けずに再読込します。CDN利用時はCDN側も対象です。
4. テーマ側で非表示になっていないか
カスタマイザーやテーマ設定の「投稿ページにアイキャッチを表示」を確認します。CSSで隠れている場合は開発者へ相談します。
記事ページには画像が出ず、トップには出ています。設定に失敗したのか、テーマが出さないだけなのか判断できません…。
トップに出ているなら、アイキャッチの保存はできているよ。
記事ページ側の表示設定だけを見ればいいね。
テーマ設定を変えると、ほかの記事にも急に画像が出ますか？それなら、この一記事のために触るのは少し怖いです…。
全記事へ影響する設定もあるから、先にプレビューしよう。
今の表示で困らないなら無理に変えず、一覧とSNSだけ整える選択もできるよ。
SNSだけ古い画像が出る場合
SNSはOGP画像を一時保存します。WordPressのアイキャッチを更新しても、SNS側のキャッシュが残ることがあります。SEOプラグインのOGP設定を確認し、各SNSのデバッグツールで再取得します。本文に同じ画像があるだけでは、必ずOGPへ使われるとは限りません。
差し替え後の実画面チェック
- 記事ページ上部
- トップページの記事カード
- 対象カテゴリ一覧
- スマホ幅での切り抜き
- SNS共有プレビュー
トップ、カテゴリ、スマホ、SNSで新しい画像を見られました。最初は真っ白なカードを見て失敗したと思ったけれど、場所ごとに確認すればよかったんですね…。
画像を入れ直す前に、どこで見えないかを分けられたね。
切り抜きまで自分の目で見たから、読者にも安心して見せられるよ。
次は記事ページと一覧を同じものだと思わないようにしたいです。でも、SNSの古い画像はまた忘れてしまいそうです…。
画像を替えた日は、最後にSNSの共有画面も開くと決めようか。
代表画像は設定して終わりではなく、使われる場所で見るのがいちばん大切だよ。
画像を扱いやすいWordPress環境を比較する
ConoHa WING
WordPressの初期設定と管理をまとめやすく、画像を使うブログをこれから始める人にも比較しやすいサービスです。
向いている人： ブログ開設と画像管理を一つの流れで進めたい人
注意点： 画像の著作権や適切な圧縮は利用者自身で確認が必要です。
料金・特典は変更されるため、申込み前に公式ページで最新条件を確認してください。
ロリポップ
小規模サイトから始めやすく、管理画面の案内を見ながらWordPressを導入できます。
向いている人： 初期費用を抑えて画像付き記事を試したい人
注意点： 画像容量と表示速度はプラン・画像サイズの影響を受けます。
料金・特典は変更されるため、申込み前に公式ページで最新条件を確認してください。
よくある質問
アイキャッチと本文に同じ画像を入れるべきですか？
必須ではありません。テーマが記事上部へ自動表示する場合、本文先頭にも入れると重複するため公開画面で判断します。
推奨サイズは何pxですか？
テーマごとに異なります。テーマ公式の推奨値を優先し、PCとスマホで切り抜きを確認してください。
画像を変えたのにSNSで古いままです
OGP設定とSNS側キャッシュを確認し、デバッグツールから再取得します。
まとめ
アイキャッチは投稿設定から選び、更新後に記事、トップ、カテゴリ、スマホ、SNSを確認します。見えない時は保存漏れ、表示場所、キャッシュ、テーマ設定の順に切り分けると、不要な再アップロードを避けられます。