ALT属性と、画像の種類別の書き方と注意点について解説します。
ALT属性とは
ALT属性（alt属性）とは、HTMLの<img>タグに設定できる属性のひとつで、画像の「代わりとなるテキスト」を指定するものです。
ALT属性が必要な理由
ALT属性を適切に設定する理由は、大きく3つあります。
画像が表示されない場合の代替テキストとして機能する
ネットワーク環境の不安定や画像URLの誤りなど、画像が正常に表示されない場合があります。
ALT属性が設定されていれば、画像の代わりにそのテキストが表示され、ユーザーは画像が見えない状況でも内容を理解できます。
ALT属性が未設定・空の場合は、壊れたアイコンが表示されるだけでユーザーには何も伝わりません。
webアクセシビリティの向上
視覚に障害のあるユーザーは、スクリーンリーダーと呼ばれる読み上げソフトを使ってWebページを利用しています。スクリーンリーダーは画像を認識できないため、ALT属性のテキストを読み上げて画像の内容を伝えます。
Googleが画像内容を理解する手がかりになる
Googleなどの検索エンジンのクローラーは、人間のように画像を「見て理解する」ことが得意ではありません。そのため、ALT属性のテキストを画像内容を把握するための重要な手がかりとして利用しています。
適切なALT属性を設定することで、Googleが画像の内容を正確に理解しやすくなり、画像検索への表示やページ全体の評価にもプラスに働きます。
ただし、ALT属性だけで順位が決まるわけではありません。本文・キャプション・ファイル名・周辺テキストなど、ページ全体の文脈が総合的に評価されます。
参照：Google Search Central – Google 画像検索 SEO ベストプラクティス
書く/書かないの判断軸
ALT属性は必ず何か書くものだと思われがちですが、空文字列（alt=””）が適切なケースもあります。
| 画像の役割 | ALT属性の扱い |
|---|---|
| ページの意味・情報を伝えている | テキストで内容を記述する |
| 周囲のテキストと重複している | 空文字列（alt=””）にする |
| 装飾目的で情報を持たない | 空文字列（alt=””）にする |
画像の種類別のALT属性の書き方
ALT属性の書き方は画像の種類や用途によって異なります。代表的な8つのパターンを良い例・悪い例とともに解説します。
商品写真やアイキャッチなどのメイン画像
ページの中心的な役割を持つ画像です。画像が伝えている内容を、具体的かつ簡潔に記述します。
良い例
<img src="sneaker-red.jpg" alt="赤いキャンバス地のローカットスニーカー、白いソール付き">
悪い例
<img src="sneaker-red.jpg" alt="スニーカーの写真">
クリックできる画像（リンク・ボタン）
画像がリンクやボタンとして機能している場合、ALT属性にはリンク・ボタンの目的（どこへ行くか・何をするか）を記述します。クリック時の動作や遷移先を伝えましょう。
良い例
<a href="/cart"> <img src="cart-icon.png" alt="カートを見る"> </a>
悪い例
<a href="/cart"> <img src="cart-icon.png" alt="ショッピングカートのアイコン画像"> </a>
ブランドや操作を示すアイコン・ロゴ
アイコンやロゴは使われ方によってALT属性の書き方が変わります。
ロゴがブランドや組織を表す場合は、ブランド名・組織名をALT属性に記述します。「ロゴ」という言葉は不要です。
良い例
<img src="company-logo.png" alt="株式会社〇〇">
悪い例
<img src="company-logo.png" alt="株式会社〇〇のロゴ画像">
グラフ・図・地図など情報を視覚化した画像
グラフや図表、地図などは視覚的に情報を整理するために使われます。ALT属性には「画像の説明」ではなく、「画像が伝えているメッセージ」を記述します。
良い例
<img src="sales-chart.png" alt="2024年の月別売上推移。7月をピークに上昇し、12月に年間最高値を記録">
悪い例
<img src="sales-chart.png" alt="売上グラフ">
デザイン上の理由で画像にしたテキスト
特殊なフォントや装飾のためにテキストを画像として使うケースがあります。この場合、ALT属性には画像に書かれているテキストをそのまま記述します。
良い例
<img src="heading-welcome.png" alt="ようこそ">
悪い例
<img src="heading-welcome.png" alt="デザイン文字">
本文の理解を助ける補足画像
ALT属性は空文字列（alt=””）にします。周囲のテキストがすでに内容を説明しているため、ALT属性で重複させる必要はありません。
良い例
<img src="workflow-diagram.png" alt="">
悪い例
<img src="workflow-diagram.png" alt="ワークフロー図">
複数の画像をひとまとまりにした画像
1枚の画像を複数ファイルに分割して並べている場合、1枚にのみ代替テキストを設定し、残りは空文字列（alt=””）にします。
スクリーンリーダーが1枚ずつ読み上げてしまうのを防ぐためです。
良い例
メイン画像
<img src="banner-left.jpg" alt="春の新作コレクション 2025">
その他の画像
<img src="banner-right.jpg" alt="">
悪い例
メイン画像
<img src="banner-left.jpg" alt="バナー左側">
その他の画像
<img src="banner-right.jpg" alt="バナー右側">
見た目のためだけに使う装飾画像
ALT属性は空文字列（alt=””）にします。区切り線や飾り素材など、デザイン上の目的だけで使われており、情報を持たない画像が対象です。
良い例
<img src="divider-line.png" alt="">
悪い例
<img src="divider-line.png" alt="区切り線">
ALT属性を書くときの注意点
ALT属性を書く際のよくある間違いや注意点について解説します。
キャプション・title属性・前後の本文とalt属性の役割は違う
それぞれの役割は以下の通りです。混同しないよう注意しましょう。
- alt属性：画像の「代替」テキスト
- title属性：画像にカーソルを合わせたとき表示されるテキスト
- キャプション：画像の説明・出典を視覚的に表示するテキスト
- 前後の本文：画像の内容や文脈をページ全体で説明するテキスト
ファイル名をそのまま使わない
alt=”IMG_0042.jpg” や alt=”photo_final_v3.png” のように、画像のファイル名をそのままALT属性に使うのは避けましょう。
ファイル名は管理用の名前であり、画像の内容を伝えるものではありません。スクリーンリーダーでは無意味な文字列が読み上げられてしまいます。
画像と記載しない
alt=”〇〇の画像” alt=”〇〇の写真” のように、ALT属性に「画像」「写真」「イラスト」といった言葉を含める必要はありません。
スクリーンリーダーでは意味のない言葉として読み上げられてしまいます。
キーワードの詰め込みを避ける
SEO効果を期待してキーワードを大量に詰め込むのは逆効果です。
悪い例
<img src="sneaker.jpg" alt="スニーカー 靴 おしゃれ 安い 通販 おすすめ レディース">
「複雑な画像」はaltだけで完結しない
グラフや複雑な図表、地形図などは、ALT属性だけで内容を完全に伝えることが難しい場合があります。ALT属性には簡潔なテキストを記述しつつ、本文やキャプションで詳細を補いましょう。
ALT属性はあくまで要約です。詳細なデータや説明は、本文・表・キャプションで補うのが原則です。
例）グラフや複雑な図版の場合
- alt属性：alt=”2024年月別売上推移グラフ”（短い要約）
- 本文・キャプション・表：各月の数値・ピーク・傾向の詳細を記載
kunugi SEO CheckerでALT属性を確認する
Chromeの拡張機能「kunugi SEO Checker」でALT属性を確認する方法を解説します。
確認の手順
下記の手順で、ページ内の画像のALT属性の有無とALTテキストを確認できます。
- ページを開く
- kunugi SEO Checkerを開く
- 基本要素のPage StatsからALTなしを確認する
- 基本要素の画像要素からExcelコピー/CSVダウンロードする
見つけやすい問題の例
ALT未設定
基本要素のPage Statsで、ALTなし画像数を確認できます。
空alt（alt=””）
基本要素の画像要素のALTテキスト列が空欄になっている画像が該当します。装飾画像であれば正しい設定ですが、情報を持つ画像（商品写真・図表など）に空altが設定されている場合は、アクセシビリティ・SEO上の問題になります。
不自然なALTテキスト
基本要素の画像要素からExcelコピー/CSVダウンロードすると、ALTテキストを一覧で確認できます。
確認できても”正解判定”はガイドラインで行う
kunugi SEO CheckerはALT属性の有無やALTテキストは確認できますが、「内容が適切かどうか」の判定はできません。
たとえばalt=”商品”と設定されていることは確認できますが、「商品」ではユーザーに内容を十分に伝えられているとは言えません。
Google 画像検索 SEO ベスト プラクティスを参照し、適切なALTテキストを設置しましょう。
