HTML alt属性の正しい書き方｜SEOとアクセシビリティ対策完全ガイド
生徒
「HTMLで画像を表示するときに、alt属性っていうのを書くように言われたんですけど、これって何のためにあるんですか?」
先生
「alt属性は、画像の代替テキストを設定するためのものです。画像が表示されないときや、視覚障害のある方がWebサイトを利用するときにとても重要な役割を果たすんですよ。」
生徒
「画像が表示されないことってあるんですか?」
先生
「通信環境が悪いときや、画像のリンクが切れているとき、それに音声読み上げソフトを使っている方にとっては、alt属性がないと画像の内容が全く伝わらないんです。さらにSEO対策としても重要なので、詳しく見ていきましょう!」
1. HTMLのalt属性とは？基本を理解しよう
alt属性は、HTMLのimg タグやpictureタグで画像を表示する際に使用する属性で、画像の代替テキストを指定します。代替テキストとは、画像が表示できない場合や、スクリーンリーダー（音声読み上げソフト）を使用している視覚障害者の方に、画像の内容を文字で伝えるためのテキストのことです。
alt属性は「オルト属性」または「アルト属性」と読みます。alternativeの略で、日本語では「代替」という意味になります。Webアクセシビリティとは、誰もがWebサイトを利用できるようにすることで、alt属性はその実現に欠かせない要素です。
また、Googleなどの検索エンジンは画像を直接見ることができないため、alt属性のテキストを読み取って画像の内容を理解します。つまり、SEO対策（検索エンジン最適化）においても非常に重要な役割を持っているのです。
2. alt属性の基本的な書き方と使い方
alt属性は、imgタグの中に記述します。基本的な構文は以下の通りです。
<img src="/img/sample150-100.jpg" alt="青空と白い雲が広がる夏の風景">
このように、alt属性の値には画像の内容を簡潔に説明するテキストを記述します。画像が正常に表示されている場合は見えませんが、画像が読み込めない場合や、マウスカーソルを画像の上に置いたとき（ブラウザによって異なります）に、このテキストが表示されます。
alt属性を書く際のポイントは、画像を見ていない人にも内容が伝わるように具体的に説明することです。ただし、長すぎると読みにくくなるため、簡潔さも大切です。一般的には、100文字から150文字程度が適切とされています。
3. SEO対策に効果的なalt属性の書き方
SEO対策とは、Googleなどの検索エンジンで自分のWebサイトが上位に表示されるようにする取り組みのことです。検索エンジンは、alt属性のテキストを読み取って画像の内容を理解し、検索結果に反映させます。そのため、適切なalt属性を設定することで、画像検索での表示や、Webページ全体の検索順位向上につながります。
SEOに効果的なalt属性を書くには、以下のポイントを意識しましょう。まず、画像の内容を正確に説明することです。検索エンジンは、ページの内容と画像の関連性を判断するため、嘘や誇張した説明は逆効果になります。
<!-- SEOに効果的なalt属性の例 -->
<img src="/img/sample120-120.jpg" alt="HTMLのコーディングをしている初心者プログラマー">
<!-- キーワードを自然に含める -->
<img src="/img/sample150-100.png" alt="レスポンシブデザインに対応したWebサイトの画面表示例">
キーワードを含めることも重要ですが、無理に詰め込むのは避けましょう。キーワードスタッフィング（キーワードの詰め込み）と呼ばれる行為は、Googleからペナルティを受ける可能性があります。あくまで自然な文章で、画像の内容を正確に伝えることを最優先にしてください。
4. アクセシビリティを高めるalt属性の書き方
アクセシビリティとは、障害の有無に関わらず、誰もが情報にアクセスできるようにすることです。視覚障害のある方は、スクリーンリーダーという音声読み上げソフトを使ってWebサイトを利用します。スクリーンリーダーは、画像そのものを読み上げることはできませんが、alt属性に書かれたテキストを音声で読み上げてくれます。
アクセシビリティを高めるためには、画像の目的や文脈を考えてalt属性を書くことが大切です。例えば、商品写真であれば商品名や特徴を、グラフや図表であれば、そこから読み取れる情報や傾向を記述します。
<!-- 商品画像のalt属性例 -->
<img src="/img/sample150-100.jpg" alt="赤いリンゴ3個が木製のかごに入っている商品写真">
<!-- グラフのalt属性例 -->
<img src="/img/sample120-120.jpg" alt="2024年の月別売上推移グラフ、6月をピークに右肩上がりの傾向">
画像の種類によって、適切なalt属性の内容は変わります。装飾目的の画像の場合は、空のalt属性を設定するのが正解です。これについては次のセクションで詳しく説明します。
5. 装飾画像には空のalt属性を設定する
すべての画像に説明文が必要というわけではありません。Webページのデザインを美しくするためだけの装飾画像や、隣接するテキストと同じ内容を繰り返すだけの画像には、空のalt属性を設定します。空のalt属性とは、alt=""のように、値を空にすることです。
空のalt属性を設定することで、スクリーンリーダーはその画像を読み飛ばします。これにより、ユーザーは本当に重要な情報だけを効率的に受け取ることができます。逆に、装飾画像にも説明文を入れてしまうと、ノイズが増えて使いにくくなってしまいます。
<!-- 装飾目的の画像には空のalt属性 -->
<img src="/img/sample150-100.png" alt="">
<!-- 本文と同じ内容を繰り返す画像も空に -->
<h2>新商品のご案内</h2>
<img src="/img/sample120-120.jpg" alt="">
<p>新商品のご案内です。こちらの商品は...</p>
注意点として、alt属性自体を省略することと、空のalt属性を設定することは全く異なります。alt属性を省略すると、HTMLの文法エラーになり、スクリーンリーダーはファイル名を読み上げてしまうことがあります。装飾画像であっても、必ずalt=""と記述しましょう。
6. よくある間違いとNG例を知っておこう
alt属性を書く際に、初心者がやってしまいがちな間違いがいくつかあります。まず、「画像」「写真」「イメージ」といった言葉を入れることです。スクリーンリーダーは、既に「画像」と読み上げてくれるため、これらの言葉は不要です。
また、ファイル名をそのまま使うことも避けましょう。「IMG_1234.jpg」や「photo01.png」といったファイル名は、画像の内容を全く説明していません。必ず内容を具体的に記述してください。
さらに、キーワードを何度も繰り返すことも問題です。例えば、「HTML HTML初心者 HTMLコーディング HTMLタグ」のように、同じキーワードを連発するとスパムと判定される可能性があります。自然な文章を心がけましょう。
7. pictureタグでのalt属性の使い方
HTMLには、imgタグ以外にもpictureタグという画像を表示するためのタグがあります。pictureタグは、デバイスや画面サイズに応じて異なる画像を表示するレスポンシブ対応に便利なタグです。pictureタグを使う場合でも、alt属性は必ず設定する必要があります。
pictureタグの構造は、複数のsource要素と、最後にimg要素を配置します。alt属性は、このimg要素に対して設定します。source要素にはalt属性を設定しません。
<picture>
<source media="(min-width: 768px)" srcset="/img/sample150-100.jpg">
<source media="(max-width: 767px)" srcset="/img/sample120-120.jpg">
<img src="/img/sample150-100.png" alt="スマートフォンとタブレットでWebサイトを閲覧している様子">
</picture>
どの画像が表示されても、内容は同じであるため、alt属性は一つだけ設定すれば問題ありません。画面サイズによって画像の構図が大きく変わる場合でも、共通する要素を記述するようにしましょう。
8. alt属性が空かどうかをチェックする方法
自分が作成したWebサイトで、alt属性が正しく設定されているかを確認する方法があります。最も簡単なのは、ブラウザの開発者ツールを使う方法です。Google ChromeやMicrosoft Edgeなどのブラウザで、F12キーを押すと開発者ツールが開きます。
開発者ツールの「Elements」タブまたは「要素」タブを選択すると、HTMLのソースコードが表示されます。画像のimgタグを探して、alt属性が設定されているか、内容は適切かを確認できます。また、画像にマウスカーソルを合わせると、プレビューとともにalt属性の内容が表示されることもあります。
より詳しくチェックしたい場合は、アクセシビリティチェックツールを使用すると良いでしょう。無料で使えるツールとしては、「WAVE」や「Lighthouse」などがあります。これらのツールは、alt属性の有無だけでなく、Webサイト全体のアクセシビリティを診断してくれます。
定期的にチェックすることで、画像の追加時にalt属性を忘れることを防げます。特に複数人でWebサイトを管理している場合は、チェックツールの活用が効果的です。
9. alt属性とtitle属性の違いを理解する
HTMLには、alt属性と似た属性としてtitle属性があります。どちらも画像に関する補足情報を提供しますが、役割が異なるため、混同しないように注意が必要です。
alt属性は、画像の代替テキストとして機能し、画像が表示できない場合やスクリーンリーダーで読み上げられます。一方、title属性は、画像にマウスカーソルを合わせたときにツールチップ（小さな吹き出し）として表示される補足情報です。
重要なのは、alt属性は必須ですが、title属性は任意という点です。SEO対策やアクセシビリティの観点では、alt属性の方が圧倒的に重要です。title属性は、追加の説明が必要な場合にのみ使用し、alt属性の内容と同じにする必要はありません。
10. alt属性を書く習慣をつけるためのチェックリスト
最後に、alt属性を適切に書くための実践的なチェックリストをご紹介します。画像をWebページに追加するたびに、以下の項目を確認する習慣をつけましょう。
alt属性チェックリスト
- alt属性を書き忘れていないか（装飾画像でも空のalt=""が必要）
- 画像の内容を具体的に説明しているか
- 「画像」「写真」などの不要な言葉を入れていないか
- ファイル名をそのまま使っていないか
- キーワードを自然に含めているか（詰め込みすぎていないか）
- 装飾画像には空のalt属性を設定しているか
- 文字数は適切か（100文字から150文字程度）
- スクリーンリーダーで読み上げたときに意味が通じるか
このチェックリストを参考に、すべての画像に適切なalt属性を設定することで、SEO対策とアクセシビリティの両方を向上させることができます。最初は面倒に感じるかもしれませんが、慣れてくれば自然と正しいalt属性を書けるようになります。
HTMLのalt属性は、見えない部分だからこそ丁寧に書くことが大切です。ユーザーにとって優しいWebサイトを作ることが、結果的に検索エンジンからも高く評価されるサイトになります。今日から、すべての画像にalt属性を正しく設定する習慣を始めましょう。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
