Webサイトに画像を掲載するとき、その画像に「説明文」をつけることができます。この説明文を設定するのがalt属性です。HTMLの<img>タグに記述するもので、見た目にはほとんど影響しませんが、SEOやアクセシビリティの面で非常に重要な役割を担っています。
「alt属性って聞いたことはあるけど、なぜ必要なの？」という方のために、この記事ではalt属性の基本から、正しい書き方、SEO・アクセシビリティへの影響まで、わかりやすく解説します。
alt属性とは何か？基本の仕組みを理解しよう
alt属性（オルト属性）とは、HTMLで画像を表示する<img>タグに追加できる属性のひとつです。「alt」は英語の「alternative（代替）」の略で、画像の代替テキストを意味します。
HTMLの記述例はこのようになります。
<img src="ramen-restaurant.jpg" alt="新宿駅から徒歩3分のラーメン店の外観写真">
このように、alt=""の部分に画像の内容を言葉で説明するテキストを書きます。
では、このalt属性はいつ「使われる」のでしょうか。主に3つの場面があります。
1. 画像が表示されないとき
通信環境が悪い、画像ファイルのパスが間違っているなど、何らかの理由で画像を読み込めないとき、代わりにalt属性のテキストが表示されます。ユーザーに「この場所には何の画像があったのか」を伝えることができます。
2. 検索エンジンがページを解析するとき
Googleなどの検索エンジンは、画像そのものの「意味」をまだ完全には理解できません。そのためalt属性のテキストを読み取り、「この画像は何を表しているのか」を把握します。
3. 音声読み上げソフトが使われるとき
視覚に障害のある方はスクリーンリーダーと呼ばれる音声読み上げソフトを使ってWebサイトを閲覧します。このとき、alt属性のテキストが読み上げられることで、画像の内容が伝わります。
なぜalt属性がSEOに重要なのか？
「SEOはテキストが大事」とよく言われます。これは検索エンジンがテキスト情報をもとにページの内容を判断するからです。では、画像が多いページはSEO的に不利なのでしょうか？
そこで活躍するのがalt属性です。
Googleのクローラー（Webサイトを巡回する検索エンジンのプログラム）は、画像ファイルを見たとき、そのファイル名やalt属性のテキストを重要な情報として読み取ります。適切なalt属性が設定されていれば、画像であってもページのテーマやキーワードの関連性をGoogleに伝えることができます。
Googleの画像検索にも影響する
alt属性はGoogleの通常の検索（テキスト検索）だけでなく、画像検索にも影響します。alt属性にしっかりとした説明が書かれた画像は、関連するキーワードで画像検索結果に表示されやすくなります。
特に商品写真や料理の写真など、ビジュアルで訴求したいビジネスにとって、画像検索からの流入は無視できないチャンネルです。EC（ネットショップ）や飲食店のサイトでは、alt属性を最適化することで画像検索経由のアクセスを増やせる可能性があります。
Core Web Vitalsとの関係
Googleはページの表示速度や使いやすさを「Core Web Vitals」という指標で評価しています。画像の最適化（適切なサイズや形式の使用）とあわせてalt属性を設定することで、総合的なSEO評価の向上につながります。
アクセシビリティとalt属性の深い関係
alt属性はSEOだけでなく、Webアクセシビリティにおいても中心的な役割を果たします。
アクセシビリティとは、年齢・障害・使用環境に関係なく、すべての人がWebサイトを利用できることを指します。視覚障害がある方は、スクリーンリーダーというソフトを使ってWebサイトの内容を「聞いて」理解します。
このとき、alt属性が設定されていない画像があると、スクリーンリーダーはファイル名（例：IMG_0123.jpg）をそのまま読み上げてしまいます。これでは何の画像なのか全くわかりません。
適切なalt属性があれば、「笑顔でパソコンを操作する女性のイラスト」などと読み上げられ、画像の内容が正確に伝わります。
法的背景：アクセシビリティは義務化の流れも
日本では2024年4月から、障害者差別解消法の改正により民間事業者にも合理的配慮の提供が義務化されました。Webアクセシビリティの確保は、法令対応の観点からも重要性が増しています。
特に公共性の高い情報を扱うサイトや、幅広いユーザーにサービスを提供する企業にとって、alt属性の適切な設定はもはや「できれば良い」レベルではなく、「必ず対応すべき」事項となりつつあります。
alt属性の正しい書き方と注意点
「では実際にどう書けばいいの？」という疑問にお答えします。alt属性の書き方にはいくつかのポイントがあります。
良いalt属性の書き方
画像の内容を具体的に説明する
「写真」「画像」といった言葉は不要です。何が写っているか、何を伝えたい画像なのかを具体的に書きましょう。
- ✗ 悪い例：
alt="写真" - ✓ 良い例：
alt="渋谷区のWebマーケティング会社・シンシエイトのオフィスエントランス"
キーワードを自然に含める
ページのテーマに関連するキーワードをalt属性に含めると、SEO効果が期待できます。ただし、不自然にキーワードを詰め込む「キーワードスタッフィング」はGoogleのペナルティ対象になるため避けてください。
- ✗ 悪い例：
alt="SEO SEO対策 検索順位 上位表示 SEOサービス" - ✓ 良い例：
alt="SEO対策の改善施策を説明するホワイトボードと打ち合わせ中の2名"
長すぎない長さに収める
alt属性の推奨文字数は諸説ありますが、100〜125文字以内を目安にするとよいでしょう。それ以上長くなると、検索エンジンが正しく処理できない場合があります。
装飾的な画像にはalt=”（空）”を設定する
すべての画像にalt属性を書けばいいというわけではありません。背景のパターンや区切り線など、純粋に装飾目的の画像にはalt属性を空にする書き方が正解です。
<img src="decoration-line.png" alt="">
このようにalt=””と書くことで、スクリーンリーダーにこの画像は読み上げなくていいことを伝えます。alt属性自体を省略してしまうと、スクリーンリーダーがファイル名を読み上げてしまうため、必ず空の属性を記述することが重要です。
ボタンやリンクの画像には「操作内容」を書く
ボタンや操作アイコンとして使われている画像の場合は、「何の画像か」ではなく「クリックしたら何が起きるか」を書きます。
- ✗ 悪い例：
alt="虫眼鏡のアイコン" - ✓ 良い例：
alt="検索する"
よくある失敗パターンと改善方法
実際のWebサイトでよく見られるalt属性の問題パターンを紹介します。
パターン1：alt属性が全く設定されていない
CMSやWebサイト制作ツールによっては、画像をアップロードしたときにalt属性が自動で設定されないことがあります。気づかないままサイトを運用しているケースが多く見られます。
改善策：Googleの「ライトハウス」などの無料ツールでalt属性の未設定を一括チェックできます。
パターン2：ファイル名がそのままalt属性になっている
CMSが自動でファイル名をalt属性に設定することがあります。DSC_0001.jpgやimage01.pngのようなファイル名はalt属性として意味をなしません。
改善策：画像アップロード時にalt属性を手動で設定する運用ルールを決める。または画像ファイル名をわかりやすい名前（例：ramen-restaurant-shinjuku.jpg）にしておく。
パターン3：全画像に同じalt属性が設定されている
「弊社のサービスイメージ」などの汎用的なテキストを全ての画像に使い回しているケースです。これではSEO効果も、アクセシビリティも最小化されてしまいます。
改善策：各画像に合ったalt属性を個別に設定する。
まとめ：alt属性はSEOとアクセシビリティの両方に効く
alt属性は、一見地味な設定ですが、SEOとアクセシビリティの両方に影響するWebサイト運営の基本です。
この記事のポイントをまとめます。
- alt属性は画像に代替テキストを設定するHTML属性
- 検索エンジンが画像の内容を理解するために使われ、SEOに影響する
- 視覚障害のある方のスクリーンリーダー利用に不可欠
- 具体的で自然なテキストを100〜125文字以内で書くのが基本
- 装飾画像はalt=””（空）を設定する
- ボタン・リンク画像は「操作内容」を書く
Webサイトのリニューアルや新規制作の際には、ぜひalt属性の設定を忘れずに。すでに公開中のサイトがある方も、一度ツールでチェックしてみることをおすすめします。
関連用語
alt属性と一緒に知っておきたい用語はこちらからご覧いただけます。