alt属性とは？
alt属性（代替テキスト）は、<img>要素に設定する属性で、画像が表示されない場合の代替テキストです。ネットワーク障害・画像読み込みエラー・スクリーンリーダー（視覚障害者向けの読み上げソフト）での閲覧時など、様々な状況で重要な役割を果たします。
また、Googleなどの検索エンジンはalt属性を読み取って画像の内容を理解します。適切なalt属性を設定することで画像検索のインデックスに含まれやすくなり、検索流入の増加にも直結します。
なぜalt属性が重要なのか？
alt属性が重要な理由は大きく3つあります。①Google画像検索からの流入増加、②アクセシビリティ法への対応（日本の障害者差別解消法・海外のWCAG基準）、③Googleによるページコンテンツの理解度向上です。
+12%
alt設定による画像検索流入の増加
約50%
alt未設定の画像があるサイトの割合
23%
Webトラフィックに占める画像検索の割合
Google画像検索は全Webトラフィックの約23%を占めるとされており、適切なalt属性を設定したサイトは画像検索からの流入が平均12%増加するというデータもあります。テキストコンテンツだけでなく、画像最適化はSEO戦略の重要な柱です。
良い書き方のルール5つ
画像の内容を具体的に説明する
「会議の写真」ではなく「3名のエンジニアがホワイトボードの前でコードレビューをしている様子」のように、画像を見ていない人が情景をイメージできる説明を書きましょう。
キーワードを自然に含める
画像の説明の中に関連するSEOキーワードが自然に入るよう意識します。例えば商品画像なら商品名・型番・色などを含めることで画像検索でのヒット率が上がります。
簡潔に書く（125文字以内）
多くのスクリーンリーダーは125文字を超えると読み上げを止めます。必要な情報を絞り込み、簡潔かつ正確な表現を目指しましょう。冗長な「の写真」「の画像」は不要です。
装飾画像はalt=""で空にする
デザイン的な飾り罫・区切り線・背景テクスチャなど、コンテンツとして意味を持たない画像はalt=""（空文字）を設定します。スクリーンリーダーがスキップし、ユーザー体験を損ないません。
ファイル名も意味のある名前にする
"img001.jpg"ではなく"tokyo-office-team-meeting.jpg"のように、画像の内容を反映したファイル名にすることで、Googleが画像の文脈を理解しやすくなります。
良い例・悪い例の比較
→ 誰が何をしているか全くわからない。冗長な「の写真」も不要。
→ 画像の状況・職業・道具が具体的にわかる。
→ 何を示したグラフか全く不明。
→ グラフの種類・データの内容・数値が含まれている。
→ 装飾目的の画像に説明を入れるとスクリーンリーダーが読み上げてしまう。
→ 空のaltで装飾と宣言。スクリーンリーダーがスキップする。
よくある失敗パターン4つ
全画像でalt属性を未設定
最も多いミスです。alt属性が省略されると、スクリーンリーダーはファイル名をそのまま読み上げます。また、Googleの画像検索インデックスにも不利です。CMSで画像を追加する際に設定する習慣をつけましょう。
キーワードの詰め込み（スパム）
alt="SEO SEO対策 SEOチェック SEOツール SEO診断"のような記述はGoogleのガイドライン違反です。ペナルティのリスクがあるだけでなく、スクリーンリーダーのユーザーにも不快な体験を与えます。
「の画像」「の写真」で始める
"女性の写真"や"グラフの画像"のような書き方は冗長です。スクリーンリーダーはすでに「画像：」と案内するため、alt属性に「の写真」「の画像」を入れる必要はありません。
装飾画像に具体的なaltを入れる
装飾目的の画像にalt="おしゃれな区切り線"のような説明を入れると、スクリーンリーダーが本文と無関係な情報を読み上げてしまいます。装飾画像は必ずalt=""を設定してください。