WordPressの画像alt属性は、主に画像ブロックまたはメディアライブラリの「代替テキスト」欄に入力して設定します。重要なのは、画像に写るものを機械的に並べることではなく、画像が本文で伝えている情報や操作の目的を短く表すことです。
操作画面や図解、商品写真のように本文理解を補う画像には説明を付けます。一方、区切り線や背景模様など、読者に追加情報を伝えない装飾画像は、空のalt属性にして不要な読み上げを避けるほうが適切な場合があります。
ここでは、WordPressでの設定場所、画像の役割別の入力例、既存画像を見直す優先順位を解説します。
WordPressで画像のalt属性を設定・変更する手順
ブロックエディターでは、画像ブロックを選択してサイドバーの「代替テキスト」欄に入力します。投稿内の画像が担う役割に合わせて説明を変えたいときは、画像ブロックごとに設定する方法が向いています。
投稿・固定ページの画像ブロックで入力する
投稿または固定ページの編集画面で対象の画像をクリックし、右上の設定アイコンからサイドバーを開きます。「ブロック」タブ内の「代替テキスト」欄に入力し、投稿を保存または更新します。管理画面の表示名や配置はWordPressのバージョン、利用中のブロックによって多少異なることがあります。
同じ画像ファイルでも、掲載する記事によって適切な説明は変わります。たとえば、パソコンの写真を商品紹介で使うなら製品の特徴が必要になる一方、作業風景として使うだけなら別の説明、あるいは装飾扱いになることがあります。記事の文脈に合わせて個別に判断してください。
クラシックエディターを利用している場合も、画像を挿入・編集する際に開くメディア画面の「代替テキスト」欄から設定します。
メディアライブラリで画像素材の情報を編集する
管理画面の「メディア」から対象画像を開き、添付ファイル詳細にある「代替テキスト」を編集する方法もあります。新たに画像を挿入するときの説明をあらかじめ登録したい場合や、どの記事でも同じ説明でよいロゴ・商品素材などに便利です。
ただし、すでに複数の記事に配置した画像は、メディアライブラリ側を編集しただけで各ページのalt属性が一律に変わるとは限りません。画像ブロックで個別の値が保存されていることがあるため、重要ページは投稿編集画面と公開ページの両方で確認します。
「タイトル」「キャプション」「説明」は代替テキストとは別の項目です。キャプションはページ上に表示する補足文であり、代替テキストの代わりにはなりません。
出典：WordPress.org「Media Library screen」
公開ページのHTMLで反映を確認する
alt属性は通常、ページを閲覧しているだけでは表示されません。公開ページで画像を右クリックし、ブラウザの「検証」などの開発者ツールを開いて、<img>要素にalt="..."が出力されているかを確認します。
編集画面の内容と公開HTMLが一致しない場合は、ページキャッシュ、CDN、テーマ独自の画像表示、画像ブロック以外のブロックを確認します。ページ更新後に必要なキャッシュを削除し、シークレットウィンドウなどで再確認すると切り分けやすくなります。
alt属性は「画像が本文で伝える意味」を短く書く
alt属性は、画像を見られない状況やスクリーンリーダーを利用する状況でも、画像の目的や必要な情報を伝えるためのテキストです。画像が消えたと仮定して、「読者が理解を続けるために何を知る必要があるか」を考えると内容を決めやすくなります。
被写体より画像を置いた理由を優先します。同じパソコンの写真でも、操作手順の説明なら画面上の設定項目が重要で、記事の雰囲気づくりなら情報を追加しない画像かもしれません。
出典：W3C WAI「Image Alternative Text – Easy Checks」
手順・図解・商品写真は理解に必要な情報を書く
手順写真、比較図、グラフ、管理画面のスクリーンショットなど、本文の理解を補う画像には代替テキストを設定します。画像内の細部をすべて説明する必要はなく、本文の主張に関わる情報を先に伝えます。
- WordPressの操作画面：
画像ブロックの設定サイドバーにある代替テキスト入力欄 - 作業写真：
ノートパソコンでWordPressの投稿編集画面を開いている様子 - 棒グラフ：
2025年1月から6月にかけて資料請求数が増加したグラフ
複雑なグラフや表では、alt属性だけで全データを伝えようとすると長くなります。alt属性にはグラフの対象と結論を簡潔に示し、数値、比較条件、読み取るべき傾向は本文やHTMLの表にも記載してください。重要なデータを画像だけに置かないことが大切です。
出典：W3C WAI「Image Alternative Text – Easy Checks」
画像リンクや画像ボタンは操作の目的を書く
画像がリンクやボタンとして機能する場合は、見た目ではなくクリック後にできることを書きます。虫眼鏡のアイコンで検索画面を開くなら、「虫眼鏡のアイコン」ではなく「サイト内を検索」が適切です。
- 資料ダウンロード用のバナー：
サービス資料をダウンロード - 商品一覧へ移動する画像：
商品一覧を見る - 問い合わせ用のボタン画像：
お問い合わせフォームを開く
リンク内または直後に、同じ操作目的を示すテキストリンクがある場合、画像がクリック範囲を広げるだけの役割なら、画像側を空のalt属性にして重複した読み上げを防ぐことがあります。
文字入り画像は重要な文言をテキストでも伝える
キャンペーンバナーや図解内の注意書きなど、画像内の文字が理解に必要なら、重要な文言をalt属性にも含めます。ただし、画像内の文章を一字一句転記する必要はありません。
たとえば、本文に条件の詳細があるバナーなら、初回限定20％OFFキャンペーンのように要点を示せます。期限、対象、料金、制約など重要な条件が画像内にしかない場合は、alt属性だけに頼らず、本文にもテキストとして掲載してください。画像が表示されない環境でも条件を確認できるようになります。
画像の役割別｜入力例と空欄にする判断
alt属性は、すべての画像に説明文を入力するための欄ではありません。画像が情報を持つのか、操作に使われるのか、装飾だけなのかを先に分けると、入力の要否を判断できます。
| 画像の役割 | 入力の考え方 | 入力例 |
|---|---|---|
| 手順・商品・図解 | 本文理解に必要な情報を書く | 代替テキスト欄を開いたWordPress画像ブロック |
| 画像リンク・画像ボタン | 移動先または操作目的を書く | 料金プランを見る |
| 文字入りバナー | 重要な訴求や条件を簡潔に書く | 法人向け無料相談を受付中 |
| 区切り線・背景模様 | 空のalt属性を検討する | 空欄 |
避けたい書き方は語句の羅列と主観的な感想
代替テキストは、画像の種類を示すだけの文やSEOキーワードの羅列では役立ちません。前後の文章で補えない意味を、具体的かつ自然な言葉で表します。
- 良い例：
WordPressメディアライブラリの代替テキスト入力欄 - 良い例：
スマートフォン表示で読みやすい見出し構成の例 - 避けたい例：
画像、WordPress、SEO、ブログ、設定、代替テキスト - 避けたい例：
とてもきれいなパソコンの写真
「画像」「写真」とだけ書くと、何が伝えられるのかが分かりません。また、「きれい」「すごい」といった主観的な感想は、通常は内容理解に寄与しません。画像から得る事実や操作対象を示すことを優先します。
装飾画像は空のalt属性を検討する
区切り線、背景模様、隣接する本文ですでに十分に説明されているイメージ写真は、装飾画像になることがあります。説明を無理に加えると、スクリーンリーダー利用者に不要な読み上げが増えます。
WordPressの画像ブロックで「装飾としてマーク」を選べる環境では、その設定を利用できます。HTML上では空のalt属性として出力されているか確認してください。意味も機能も持たない画像だけを装飾扱いにし、商品を見分ける写真や操作手順の画像には設定しないでください。
ロゴとアイキャッチ画像は周囲のテキストとの重複を見る
ロゴがサイト名を伝える役割なら、○○株式会社や○○ブログのように名称を設定します。同じリンク内にサイト名のテキストがあり、ロゴが視覚的な補助にとどまるなら、空のalt属性が適切な場合があります。
記事一覧のアイキャッチ画像も、隣に記事タイトルが表示されるならタイトルの単純な繰り返しは冗長になり得ます。画像が単独でリンクの内容を伝えるのか、記事内容を補足するのか、雰囲気づくりだけなのかで判断してください。
SEO目的の誤設定を避け、既存画像を効率よく見直す
alt属性はページと画像の内容を理解する手掛かりの一つですが、検索順位を保証する設定ではありません。SEOだけを目的に語句を詰め込むのではなく、利用者に役立つ自然な説明にします。
Googleは、altテキスト、ページ本文、画像の周辺テキストなどを合わせて画像の主題を理解すると案内しています。画像にない商品名、地域名、サービス名を検索対策だけのために追加することは避けてください。
出典：Google Search Central「Image SEO Best Practices」
重要ページから順に点検する
既存画像を一度に完璧に修正しようとせず、読者への影響が大きいページから確認すると効率的です。優先順位は次のように考えられます。
- 申込・問い合わせ・購入につながるページの画像リンクやボタン
- 操作手順、比較図、料金表、グラフなど、画像がないと理解しにくいページ
- 画像内に重要な文字や条件が入ったバナー・告知画像
- アクセスが多い記事、継続して更新する記事
- 装飾目的の画像や、本文で十分に説明済みの画像
画像ごとに「この画像が表示されなければ、何が伝わらないか」を確認します。答えがあればその内容を短くalt属性にし、答えがなければ空のalt属性または装飾設定を検討します。自動生成ツールの候補を使う場合も、実際の画像と掲載文脈を必ず確認してください。
WordPress画像のalt属性を設定するときの要点
WordPressでは、画像ブロックまたはメディアライブラリの「代替テキスト」欄からalt属性を設定できます。記事内の文脈に応じた説明が必要な画像は、画像ブロックで個別に入力し、公開HTMLで反映を確認する方法が確実です。
- 情報を伝える画像には、見られない場合にも必要な内容が分かる説明を付ける
- 画像リンクには、見た目ではなくクリック後の目的を書く
- 文字入り画像の重要な条件は、本文でもテキストとして示す
- 装飾だけの画像には、不要な説明を追加せず空のalt属性を選ぶ
- SEOキーワードの詰め込みではなく、画像と本文に合う表現にする
迷ったときは、被写体の説明よりも「この記事でこの画像を置いた理由」を一文にしてみてください。その一文が、適切な代替テキストの出発点になります。
