HTMLのalt属性（代替テキスト）の正しい書き方｜SEOとアクセシビリティを両立する記述ルール

2026年5月15日

Webサイトを閲覧する際、画像は情報を直感的に伝える重要な要素となります。

しかし、視覚障害を持つ方や通信環境が不安定なユーザーにとって、画像が常に正しく表示・認識されるとは限りません。

そこで重要となるのが、HTMLのalt属性、すなわち「代替テキスト」の適切な設定です。

アクセシビリティの向上だけでなく、検索エンジン最適化（SEO）の観点からも、正しいalt属性の記述は欠かせないスキルとなっています。

本記事では、2026年現在の最新基準に基づき、ユーザーと検索エンジンの両方に評価されるalt属性の書き方を詳しく解説します。

目次 [ close ]

alt属性が持つ2つの大きな役割

alt属性には、大きく分けて「アクセシビリティの確保」と「SEO効果の向上」という2つの役割があります。

まずアクセシビリティの面では、スクリーンリーダーなどの音声読み上げソフトを利用しているユーザーに対し、画像の内容を言葉で伝える役割を果たします。

画像が表示されない環境であっても、テキスト情報によってコンテンツの文脈を正確に理解できることが重要です。

次にSEOの面では、検索エンジンのクローラーに対して画像の内容を正しく認識させる役割を担います。

検索エンジンは進化を続けていますが、画像そのものの意味を完全に理解するためには、依然としてテキストによる補助情報が極めて有効な判断材料となります。

適切に設定された代替テキストは、画像検索での上位表示や、ページ全体の関連性向上に直結します。

アクセシビリティの視点：情報のバリアフリー

ウェブアクセシビリティの国際指針であるWCAG（Web Content Accessibility Guidelines）においても、非テキストコンテンツへの代替テキスト提供は必須項目とされています。

特に公共性の高いサイトや商用サイトでは、あらゆるユーザーが等しく情報にアクセスできる環境を整えることが、企業の社会的責任としても求められています。

代替テキストが適切に設定されていない場合、音声読み上げソフトはファイル名をそのまま読み上げたり、画像を無視したりするため、ユーザー体験を著しく損なう恐れがあります。

SEOの視点：検索エンジンとのコミュニケーション

Googleなどの検索エンジンは、alt属性の内容をページのトピックを理解するための重要なヒントとして利用しています。

画像と周囲のテキストの関連性が高まることで、ページ全体の専門性や網羅性が高く評価されるようになります。

また、画像検索からの流入はWebサイト全体のトラフィックを底上げする要因となるため、戦略的なキーワードの盛り込みも考慮すべき点と言えます。

alt属性の正しい基本構文

alt属性は、HTMLのimgタグの中に記述します。

基本的な記述方法は非常にシンプルですが、属性自体を省略してしまうと、アクセシビリティ上の問題が発生するため注意が必要です。

HTML

<!-- 正しい記述例 -->
<img src="apple-pie.jpg" alt="焼きたてのリンゴがたっぷりのったアップルパイ">

<!-- 誤った記述例（alt属性の欠落） -->
<img src="apple-pie.jpg">

alt属性の有無と空文字の違い

画像が単なる装飾目的であり、情報としての価値を持たない場合には、alt属性を「空」にする必要があります。

alt=""と記述することで、スクリーンリーダーはこの画像を無視すべきものとして認識し、ユーザーに不要な情報を読み上げることを防ぎます。

一方で、属性そのものを記述しない場合は、ブラウザや支援技術によって挙動が異なり、ユーザビリティを低下させる原因となります。

記述方法	目的	スクリーンリーダーの挙動
`alt="具体的内容"`	意味のある画像	テキストとして内容を読み上げる
`alt=""`（空文字）	装飾・デザイン用の画像	完全に無視（スキップ）する
（記述なし）	NG（不適切な実装）	ファイル名を読み上げる場合がある

状況別：効果的な代替テキストの書き方

代替テキストの内容は、その画像がページ内でどのような役割を果たしているかによって決まります。

「何が写っているか」を単に説明するのではなく、「その画像が何を伝えているか」という文脈を重視することが大切です。

1. 情報を伝える写真やイラストの場合

ニュース記事の報道写真や、商品紹介の画像などがこれに該当します。

その画像がページから無くなったとしても、テキストだけで内容が遜色なく伝わるような記述を心がけてください。

例えば、富士山の写真が掲載されている場合でも、登山道の混雑状況を伝える記事であれば「登山者で賑わう富士山頂の様子」とするのが適切です。

HTML

<!-- 文脈に合わせた記述例 -->
<img src="fuji-mountain.jpg" alt="残雪が美しく山頂を覆う春の富士山">

2. リンクとして機能する画像（バナーなど）の場合

画像がリンク（aタグの中にある場合）である場合、alt属性は画像の見た目の説明ではなく、リンク先の遷移先を示すテキストにすべきです。

「お問い合わせボタン」の画像に対して、「受話器を持つ人のイラスト」というaltを付けるのは間違いです。

この場合は「お問い合わせフォームへ移動する」あるいはシンプルに「お問い合わせ」と記述するのが正解です。

HTML

<!-- リンク画像の良い例 -->
<a href="/contact">
  <img src="btn-contact.png" alt="お問い合わせはこちら">
</a>

3. 図解やグラフなど複雑な情報を持つ画像の場合

統計データやフローチャートなど、一言では説明しきれない複雑な画像の場合は、概要をalt属性に記述します。

その上で、詳細なデータについては本文中で表形式などで補足するか、aria-describedby属性を使用して別の要素と紐付ける方法が推奨されます。

alt属性があまりに長くなりすぎると、スクリーンリーダーの利用者が情報を消化しにくくなるため、簡潔さと網羅性のバランスが重要です。

SEO効果を最大化するためのライティングルール

SEOの観点からは、alt属性に適切なキーワードを含めることが推奨されますが、過度な詰め込みは禁物です。

Googleのガイドラインでは、スパム行為と見なされるような「キーワードの羅列」を明確に避けるよう指示されています。

キーワードスタッフィングを避ける

不自然に多くのキーワードを詰め込んだ代替テキストは、検索順位を下げる要因になる可能性があります。

あくまで文章として自然で、画像の内容を正確に表す言葉を選定してください。

HTML

<!-- 悪い例（キーワードの過剰な詰め込み） -->
<img src="running-shoes.jpg" alt="靴 ランニングシューズ 人気 安い おすすめ 運動靴 メンズ レディース ジョギング">

<!-- 良い例 -->
<img src="running-shoes.jpg" alt="軽量でクッション性に優れたプロ仕様のランニングシューズ">

「画像の〜」「〜の写真」という表現は不要

多くの場合、alt属性に「〜の画像」や「〜の写真」といった言葉を含める必要はありません。

スクリーンリーダーは読み上げの際に、それが画像であることをユーザーにアナウンスするため、重複した情報になってしまうからです。

ただし、それが「油絵」であることや「スクリーンショット」であることが情報として重要な場合は、含めても問題ありません。

2026年における最新のトレンドとAIの影響

近年、生成AI技術の発展により、画像の代替テキストを自動生成するツールが増えています。

CMS（コンテンツ管理システム）側で、画像をアップロードするだけで適切なalt属性を提案してくれる機能も一般的になりつつあります。

しかし、AIは画像の「見た目」は認識できても、そのページにおける「文脈上の意味」を完全に把握できるわけではありません。

AIが生成したテキストを鵜呑みにせず、必ず人間が最終的なチェックを行い、ページ全体の整合性を保つことが求められます。

構造化データとの連携

モダンなSEO対策では、alt属性だけでなく、JSON-LDなどの構造化データを用いて画像情報を詳細に伝える手法も併用されます。

特に商品ページやレシピページでは、alt属性と構造化データの整合性を取ることで、リッチリザルトへの表示確率を高めることができます。

JSON

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "高性能ランニングシューズ",
  "image": [
    "https://example.com/photos/1x1/photo.jpg"
  ],
  "description": "長距離走に最適なクッション性を持つ最新モデル。"
}