WordPressで画像を入れるとき、「alt属性には何を書けばよいのか」「画像のタイトルやキャプションと何が違うのか」と迷う方は多いでしょう。alt属性は、画像が見えない状況でも、その画像が伝えている情報や役割を理解できるようにするための代替テキストです。アクセシビリティの基本であると同時に、検索エンジンが画像とページの内容を理解する手がかりにもなります。
ただし、すべての画像に同じような説明を書けばよいわけではありません。写真、図解、装飾、リンクになっている画像では、適切な書き方が異なります。長く詳しく書くほどよいわけでも、狙ったキーワードを並べるほどよいわけでもありません。大切なのは、画像を置いた目的と、その前後の文章を踏まえて「画像が見えない読者に何を伝える必要があるか」を考えることです。
この記事では、alt属性の意味、WordPressで入力する場所、画像の種類別の考え方、良い例と避けたい例、既存記事を見直す手順まで、初心者向けに順を追って解説します。
alt属性とは画像の代わりになるテキスト
altは「alternative」の略で、日本語では代替テキストや代替文字列と呼ばれます。HTMLの画像要素では、たとえば <img src="meeting.jpg" alt="ノートパソコンを囲んで打ち合わせをする3人"> のように記述されます。WordPressでは通常、HTMLを直接書かなくても、画像ブロックやメディアの設定画面にある「代替テキスト」欄へ入力できます。
画像が読み込めなかった場合に表示される文字という説明を見かけることもありますが、役割はそれだけではありません。スクリーンリーダーは、画面上の文字や操作項目を音声などで利用者に伝えます。画像の内容や機能が文章になっていれば、画像を見ることが難しい人もページの情報を理解しやすくなります。
W3CのWeb Accessibility Initiativeは、画像の目的に応じて適切なテキストによる代替を提供する考え方を示しています。情報を伝える画像、装飾画像、ボタンやリンクとして働く画像、文字を含む画像、グラフのような複雑な画像では、必要な代替が異なります。つまり、altは画像ファイルだけを見て機械的に決めるものではなく、その画像がページ内で何をしているかを見て決めるものです。
alt属性が必要な理由
画像を見られない読者にも情報を届けるため
画像が記事の理解に必要なのに代替テキストがなければ、その部分の情報を受け取れない読者が生まれます。商品の違いを示す写真、操作箇所を示す図、変化を示すグラフなどは、本文の理解に直接関わることがあります。altには、画像そのものの形を細かく実況するのではなく、記事を理解するために欠かせない要点を入れます。
たとえば、店舗の外観写真を会社案内に載せる場合、読者が知るべきなのが入口の場所なら「青い看板の右側にある店舗入口」のような説明が役立ちます。一方、同じ写真をデザイン事例として紹介するなら、素材や配色など別の情報が重要になります。同じ画像でも、ページの目的が変われば適切なaltも変わるのです。
通信や表示の問題がある場面を補うため
画像ファイルが削除された、通信が不安定、画像の読み込みを止めているなど、画像が表示されない理由はいくつもあります。適切なaltが設定されていれば、そのような場面でも画像が担っていた情報の一部を文章として把握できます。altだけですべての表示トラブルを解決できるわけではありませんが、情報が完全に失われることを防ぐ助けになります。
検索エンジンが画像を理解する手がかりになるため
Google Search Centralは、画像の周辺にある文章、ファイル名、altテキストなどが、画像の主題を理解する手がかりになると案内しています。ただし、SEOのためだけにキーワードを詰め込む使い方は適切ではありません。読者にとって自然で役に立つ代替テキストを作ることが先です。
altを入れれば必ず順位が上がる、画像検索から必ず流入が増える、と断定することはできません。検索結果はページ全体の品質や関連性など多くの要素で決まります。altは、アクセシビリティを支えながら画像の文脈を明確にする基本項目として扱いましょう。
altとタイトル、キャプション、説明の違い
WordPressのメディアには似た入力欄があり、役割を混同しやすいところです。それぞれの用途を分けて考えると迷いにくくなります。
代替テキスト
画像が伝える情報や機能を、画像を利用できない人へ代わりに伝える文章です。通常は画面上に常時表示されません。画像の用途と前後の文脈に合わせて設定します。
キャプション
画像の下などに見える形で表示し、すべての読者に補足情報を伝えます。撮影場所、出典、注釈、図の読み方など、画像と一緒に見せたい情報に向いています。キャプションがあるからaltが不要になるとは限りませんが、同じ説明を不自然に重複させないように調整します。
タイトル
メディアを管理するための名前として使われることがあります。WordPressのテーマや表示方法によって扱いが異なるため、代替テキストの代わりとして頼るべきではありません。ファイル管理用の名称と、読者に必要な代替情報は分けて考えます。
説明
メディアの詳細情報を記録する欄です。テーマや添付ファイルページの仕様によって表示される場合がありますが、通常の画像ブロックでaltの役割を自動的に果たすものではありません。
画像の種類からaltを判断する
内容を伝える写真やイラスト
本文の理解に必要な写真やイラストには、そこで伝えている要点を短く書きます。たとえば、記事が「パソコン作業時の姿勢」を説明しており、画像が良い姿勢の例なら、「背筋を伸ばし、肘を約90度にしてパソコンを操作する姿勢」のように、読者が学ぶべきポイントを含めます。
「人物の画像」「パソコンの写真」だけでは、画像を置いた意味が伝わりません。反対に、服の色、机の材質、壁の模様など、記事の理解に関係しない細部まで盛り込むと要点がぼやけます。電話でページ内容を読み上げるなら、この画像について何を一言添えるか、と考えると判断しやすくなります。
雰囲気づくりだけの装飾画像
区切りの模様、意味を持たない背景、本文と同じ内容を繰り返す飾りなど、情報や操作上の役割がない画像は装飾画像として扱えます。この場合は、内容を無理に説明するのではなく、空のaltである alt="" を使うのが基本です。空のaltは入力忘れとは意味が異なり、「この画像は読み上げなくてよい」と伝えるための設定です。
ただし、見た目が華やかだから装飾画像と決めるわけではありません。記事の意味を補っているなら情報画像です。画像を隠した状態で本文を読み、情報や操作が欠けないかを確かめると判断しやすくなります。
リンクやボタンとして使う画像
画像をクリックすると別ページへ移動する、検索や送信などの操作を行う場合、altは見た目ではなく機能や行き先を伝えます。虫眼鏡のアイコンなら「虫眼鏡」ではなく「サイト内を検索」、封筒の画像が問い合わせリンクなら「お問い合わせ」のようにします。
画像のすぐ横に同じリンクテキストがあり、両方が一つのリンクとしてまとまっている場合は、画像の説明が重複しないよう空のaltが適切なこともあります。実際のHTML構造や読み上げ順を踏まえて確認する必要があります。
文字を含む画像
画像内の文字が重要な情報なら、その内容が読者に伝わるようにします。短いバナーで文字そのものが主要情報なら、同じ文言をaltに含める方法があります。ただし、長い文章を画像として掲載することは、拡大、読み上げ、検索、翻訳などの面で不便になりやすいため、可能なら本文のテキストとして提供します。
アイキャッチ画像に記事タイトルと同じ文字が入っており、すぐ近くの見出しでも同じタイトルが読まれる場合、altにタイトルをそのまま入れると重複することがあります。画像が装飾としてしか働いていないなら空のaltも候補です。テーマが出力するHTMLを確認できると、より正確に判断できます。
グラフ、表、手順図などの複雑な画像
複雑な図の情報を、一つのaltだけですべて説明しようとすると非常に長くなります。altでは図の種類と要点を簡潔に示し、数値や手順の詳細は本文、表、リスト、図の直後の説明などで提供します。
たとえば月別アクセス数のグラフなら、altを「1月から6月のアクセス数の推移。3月以降に増加」のようにし、各月の正確な値は本文の表で示します。これにより、画像を見られない読者も同じデータへ到達できます。色だけで系列を区別する図は、凡例や線の種類、ラベルも併用すると理解しやすくなります。
良いaltを書くための考え方
画像を置いた目的を一つの文で言う
最初に「この画像がないと、読者は何を理解できないか」を考えます。答えがなければ装飾かもしれません。答えがあるなら、その情報を短い文章にします。画像の見た目を網羅するのではなく、記事内での役割を言語化することが重要です。
前後の文章と重複させすぎない
画像の直前に「設定画面の右上にある保存ボタンを押します」と書かれており、画像も同じ箇所を示すだけなら、altで同じ一文を繰り返す必要はないかもしれません。「保存ボタンの位置」のように画像固有の補足へ絞る、または画像を装飾として扱うなど、ページ全体で情報が自然に伝わるよう調整します。
短く具体的にする
文字数の絶対的な正解はありません。短ければ必ず良いわけでも、一定文字数を超えたら失敗というわけでもありません。W3Cの案内でも、画像の目的を表すできるだけ簡潔な説明が勧められています。短い語句や一文で足りない複雑な情報は、本文側へ移します。
「画像」「写真」「アイコン」と毎回書き出す必要は通常ありません。支援技術側で画像であることが伝えられるためです。ただし、写真であること自体が情報になる場面や、絵画と実写を区別する必要がある場面では含めても構いません。
検索キーワードより読者の理解を優先する
「WordPress alt属性 SEO おすすめ 書き方 初心者」のように単語を並べても、画像の代替にはなりません。画像と関係のない語句や、同じ語の不自然な繰り返しは避けます。ページの検索テーマと画像の内容が一致していれば、自然な説明の中に必要な語は含まれます。
固有名詞や人物名は必要なときだけ入れる
人物の顔写真だからといって、必ず氏名を書くわけではありません。誰であるかが記事の理解に必要で、公開してよい情報なら含めます。単なるイメージ写真なら「オンライン会議で説明する担当者」など、役割だけで十分な場合があります。個人情報、権利、文脈にも配慮しましょう。
altの良い例と避けたい例
料理の完成写真
記事が盛り付け方を解説している場合、良い例は「白い皿の中央に高さを出して盛り付けたトマトパスタ」です。避けたい例は「料理」「画像123」「トマト パスタ レシピ 人気 簡単」です。何を示す画像かが分かり、記事で重要な盛り付けの特徴まで伝えると役立ちます。
WordPressの操作画面
設定する場所を示す画像なら、「画像ブロックを選択した右サイドバーの代替テキスト入力欄」のようにします。「WordPress画面」だけでは目的の場所が分かりません。画面内のすべてのメニューを読み写す必要もありません。
比較グラフ
2案の表示速度を比較するグラフなら、「改善後は全ページで読み込み時間が短くなった比較グラフ」のように要点を示し、正確な測定条件と数値は本文に書きます。「棒グラフ」だけでは結論が伝わらず、すべての数値をaltへ詰め込むと読みにくくなります。
問い合わせへのリンク画像
画像だけがリンクの場合は「お問い合わせフォームへ」のように行き先や目的を示します。「封筒アイコン」では、クリックすると何が起きるか分かりません。横に同じ文言のリンクがある場合は、読み上げが重複しない構造を検討します。
WordPressで代替テキストを設定する場所
画像ブロックから設定する
投稿または固定ページの編集画面で画像ブロックを選び、右側の設定サイドバーを開きます。画像の設定にある代替テキスト欄へ入力します。WordPressの画面構成はバージョンやテーマ、プラグインによって変わる場合があるため、項目名が見当たらないときは画像ブロックが選択されているか、設定サイドバーが表示されているかを確認してください。
WordPress公式の画像ブロック資料では、メディアライブラリで設定した代替テキストが画像を挿入した際の初期値として引き継がれ、ブロック側で変更した場合はその投稿や固定ページ内の画像にだけ反映されると説明されています。この違いは、同じ画像を別の文脈で再利用するときに重要です。
メディアライブラリから設定する
管理画面のメディアライブラリで画像を選択し、代替テキスト欄を編集できます。今後その画像を挿入するときの基本値として便利ですが、どのページでも同じaltが最適とは限りません。たとえば同じ店舗写真でも、「アクセス案内」と「デザイン実績」では画像の役割が変わります。挿入先の記事で文脈に合うかを見直しましょう。
空のaltにしたいとき
装飾画像は、代替テキスト欄を空にすることで空のaltとして出力されるのが一般的です。しかし、テーマやプラグインの処理によってHTMLの出力が異なる可能性があります。重要なサイトでは、公開前プレビューやブラウザの検証機能で alt="" になっているか確認すると安心です。alt属性そのものがない状態と、空のaltがある状態は、支援技術での扱いが異なる場合があります。
アイキャッチ画像のaltはどう考えるか
アイキャッチ画像はテーマが一覧、関連記事、記事冒頭など複数の場所へ出力することがあります。そのため、記事編集画面だけでは最終的な文脈を判断しにくい部分です。画像に記事タイトルと同じ文字があり、直後にも同じ見出しが表示されるなら、同じ内容を何度も読み上げる可能性があります。反対に、一覧画面で画像だけがリンクになっているなら、リンク先が分かるテキストが必要になることがあります。
「アイキャッチは必ず記事タイトルをaltにする」という一律のルールにせず、使用中のテーマがどのようなHTMLを出力しているか確認します。記事ページ、トップページ、カテゴリ一覧、関連記事をそれぞれ見て、画像、タイトル、リンクの関係を確認するとよいでしょう。判断が難しい場合は、画像の情報を簡潔に説明しつつ、タイトルとの重複を最小限にします。
よくある間違い
ファイル名をそのまま使う
IMG_20260730_001 や screen-shot-final のような管理用ファイル名は、読者にとって意味のある代替になりません。ファイル名は管理や画像検索の手がかりとして分かりやすく整える価値がありますが、altとは別に、そのページでの役割に合わせて書きます。
すべての画像に記事タイトルを入れる
記事内の画像がすべて同じaltになると、それぞれが何を示すか分かりません。同じ言葉が繰り返し読み上げられ、読者の負担にもなります。画像ごとに必要な情報を考え、装飾なら空、情報画像なら固有の要点を設定します。
空欄を恐れて不要な説明を書く
空のaltはミスではなく、装飾画像を適切に無視してもらうための選択肢です。「青い曲線の飾り」「右向きの薄い三角形」のような説明を大量に読み上げても、記事理解の助けにならない場合があります。情報を伝えない画像には説明を追加しない判断も大切です。
画像内の重要な情報をaltだけに閉じ込める
料金表、手順、グラフなどを画像だけで掲載し、長大なaltへすべて入れると、読みやすさや再利用性が下がります。重要な情報は本文の見出し、リスト、表としても提供し、画像は理解を補助するものにします。これにより、検索、コピー、翻訳、文字拡大などにも対応しやすくなります。
既存記事のaltを見直す手順
重要なページから優先する
画像が多いサイトを一度に直そうとすると負担が大きくなります。まず、アクセスが多い記事、問い合わせや購入につながるページ、操作や比較を画像で説明しているページから確認します。公開日が新しい順ではなく、情報が欠けたときの影響が大きい順に進めると効率的です。
画像を一時的に見ないで本文を読む
画像を非表示にする、目を閉じて前後の文章だけを読むなどして、何の情報が欠けるかを確認します。欠ける情報があれば短い代替テキストを作り、何も欠けないなら装飾の可能性を検討します。画像そのものの説明から始めるより、読者が必要とする情報を見つけやすい方法です。
リンク画像と複雑な図を重点的に見る
画像リンクは、altが不適切だと操作の目的が分からなくなります。グラフや図解は、altだけで詳細を伝えきれないことがあります。この2種類は影響が大きいため、機能を表す文言があるか、本文側に詳しい説明があるかを重点的に確認します。
実際の出力を確認する
WordPressの入力欄に文字があっても、テーマや独自ブロックの出力で期待どおり使われているとは限りません。プレビューのHTMLでalt属性を確認し、可能であればキーボード操作やスクリーンリーダーでも試します。自動チェックツールは入力漏れの発見には役立ちますが、文章が文脈に合っているかまでは完全には判断できません。最後は人が内容を確認します。
altを決めるための簡単な判断フロー
画像ごとに、次の順で考えると整理しやすくなります。
- 画像はリンクやボタンとして操作できるか。できるなら、見た目ではなく機能や行き先を書く。
- 画像を消すと、本文の意味や必要な情報が欠けるか。欠けるなら、その要点を短く書く。
- 画像内に重要な文字があるか。あるなら本文にも情報を置き、必要に応じてaltへ反映する。
- グラフや手順図のように短文で代替できないか。できないなら、altは概要にし、詳しい説明を本文に用意する。
- 情報も機能もなく、見た目を整えるだけか。その場合は空のaltを検討する。
迷ったときは、画像の種類ではなく、その画像が今いるページで果たす役割に戻ります。同じ画像を別の記事へ使う場合も、コピーしたaltをそのまま使わず、文脈に合うか確認します。
公開前に確認したいチェックポイント
- 情報を伝える画像に、目的に合った代替テキストがある
- 装飾画像は無理に説明せず、空のaltとして扱われている
- リンク画像やボタン画像は、操作や行き先が分かる
- 前後の本文やキャプションと同じ説明を繰り返しすぎていない
- キーワードを不自然に並べていない
- 「画像」「写真」など不要な書き出しを毎回入れていない
- 複雑な図の詳細が本文や表でも提供されている
- 同じ画像を再利用した箇所で、文脈に合うaltへ調整している
- アイキャッチの画像、タイトル、リンクが重複して読み上げられないか確認した
- 公開前のHTMLでalt属性の出力を確認した
alt属性についてよくある疑問
altは何文字が正解ですか
一律の正解はありません。画像の目的を伝えられる範囲で簡潔にします。一文で収まらない情報は、本文側の説明や表へ分けます。文字数を先に決めるのではなく、必要な情報が過不足なく伝わるかで判断してください。
すべての画像にaltの文章が必要ですか
いいえ。情報や機能を持たない装飾画像は、空のaltが適切です。ただし、空欄のままにした結果、WordPressやテーマがalt属性をどう出力するかは確認しましょう。情報画像の入力忘れと、意図した空のaltを区別することが大切です。
キャプションがあればaltは不要ですか
必ずしも不要ではありません。キャプションが画像の意味を十分に伝え、読み上げ順でも適切に関連付くなら、altを短くしたり空にしたりできる場面があります。一方、キャプションが撮影者や出典だけを示しているなら、画像の代替にはなりません。実際の文脈で判断します。
AIにaltを自動生成させてもよいですか
下書きとして使うことはできますが、最終確認は人が行う必要があります。AIは画像の見た目を説明できても、そのページで画像を置いた目的、前後の文章との重複、固有名詞の正しさ、装飾かどうかを誤る可能性があります。生成結果をそのまま大量反映せず、文脈と事実を確認しましょう。
altを後から変更するとSEOに悪影響がありますか
誤った説明を正し、読者に役立つ内容へ改善すること自体を避ける必要はありません。検索順位への影響を個別に保証することはできませんが、画像と無関係なキーワード列を削り、文脈に合う説明へ直すことは、ページ品質とアクセシビリティの観点で妥当です。
画像を使う場面別の考え方
商品や制作物を紹介する記事
商品写真では、商品名を繰り返すだけでなく、読者が画像から判断する特徴を考えます。色、形、サイズ感、付属品、使用状態などのうち、本文の判断材料になっているものを簡潔に含めます。別角度から撮った複数写真が並ぶ場合は、それぞれ「正面」「背面」「接続端子部分」のように違いが分かる表現にします。すべての画像へ同じ商品名だけを設定すると、どの写真を見ているのか区別できません。
一方、価格、在庫、仕様など変更される情報をaltへ書くと、画像を差し替えずに情報だけ変わったときに不一致が生じます。更新頻度の高い情報は本文や商品データとして管理し、altには画像から確認できる安定した内容を置くと保守しやすくなります。
手順を説明する記事
操作画面の画像では、画面全体を説明するより、その手順で注目してほしい位置と操作を示します。「投稿編集画面」だけでは次に何をすべきか分かりません。「右サイドバーの画像設定にある代替テキスト欄」のように、本文の手順を補う表現が役立ちます。
画面の仕様は更新で変わることがあります。画像を差し替えたときはaltも見直し、古いメニュー名や位置が残らないようにします。また、赤い枠や矢印だけで場所を示すと、色や視覚情報を利用できない読者には伝わりません。本文にも項目名と操作内容を書き、画像なしでも手順を進められる構成を目指します。
事例や実績を紹介する記事
完成したWebサイトや印刷物を紹介する場合、altは「制作実績」の一語で終わらせず、その画像によって伝えたいデザイン上の特徴を短く示します。たとえば「白を基調に商品写真を大きく配置した食品ブランドのトップページ」のようにすれば、視覚的な特徴と事例の種類が伝わります。
ただし、画像に映る顧客名、住所、管理画面、個人情報などを、公開許可なくaltへ書き起こしてはいけません。altはHTML内のテキストとして取得され得るため、画像をぼかしただけで安心せず、公開してよい情報かを確認します。守秘義務や掲載契約がある場合は、その範囲を優先してください。
記事一覧のサムネイル
記事一覧では、サムネイル、記事タイトル、抜粋が近接して表示されることが多くあります。サムネイルとタイトルが別々のリンクなのか、一つのリンクとしてまとまっているのかで適切な扱いが変わります。画像のaltに記事タイトルを入れると、同じリンク名が連続して読み上げられる場合があります。
管理画面の入力だけでは一覧テンプレートの出力まで判断できないため、実際のページを確認します。トップページ、カテゴリ、検索結果、関連記事など、同じアイキャッチが表示される場所をいくつか確認し、重複が過度でないか、画像だけでも行き先が分かるかを見ます。テーマを変更したときにも再確認すると安心です。
チームでaltの品質をそろえる方法
複数人で記事を作る場合は、文字数だけのルールより、判断の順序を共有すると品質がそろいやすくなります。「操作画像は目的を示す」「装飾は空」「複雑な図は本文にも説明」「キーワードの列挙は禁止」といった短い原則を編集チェックリストにします。良い例と悪い例を自社の記事から数件用意すると、抽象的な説明より理解しやすくなります。
レビューでは、代替テキスト単体を読むだけでなく、見出し、前後の文章、キャプション、リンク先と一緒に確認します。画像を置いた担当者は意図を知っていますが、後からレビューする人は知らないことがあります。第三者が読んで意味を理解できない表現なら、本文の説明不足も含めて見直す機会になります。
また、公開後にテーマやブロックを変更した場合、入力済みのaltが新しい表示でも適切に出力されるとは限りません。サイト改修の確認項目に、主要ページの画像、リンク画像、アイキャッチのaltを含めます。アクセシビリティは一度入力して終わる作業ではなく、コンテンツと表示の変化に合わせて保つ運用です。
まとめ
alt属性は、画像が見えない状況でも、その画像が担う情報や機能を伝えるための代替テキストです。良いaltを作る出発点は、画像に写っているものをすべて列挙することではなく、「このページで、この画像は何のためにあるか」を考えることです。
情報画像には要点を簡潔に書き、装飾画像には空のaltを使い、リンク画像には操作や行き先を示します。複雑なグラフや手順図は、短いaltだけに頼らず、本文や表でも同じ情報へ到達できるようにします。WordPressではメディアライブラリの初期値と、記事内の画像ブロックに設定した値の違いも意識しましょう。
まずは重要な記事を一つ選び、画像を見ない状態で本文を読んでみてください。欠ける情報を短い言葉で補い、不要な読み上げは空のaltで減らす。この繰り返しが、初心者にも続けやすい改善方法です。
