alt属性とは何か？

alt属性（代替テキスト）は、HTML の <img> タグに設定するテキスト情報で、画像の内容をテキストで説明する役割を持っています。もともとは画像の読み込みに失敗したときに代わりに表示するテキストとして設計されましたが、現在ではそれよりもはるかに広い役割を担っています。

<img src="dashboard.png" alt="2026年1月から3月にかけての月間トラフィック増加を示すアナリティクスダッシュボード" />

検索エンジンは人間のように画像の内容を「見る」ことができません。alt属性のテキストを頼りに、画像が何を表しているか、そしてその画像が周囲のコンテンツとどう関連しているかを理解します。alt属性の最適化は、最も簡単で効果の大きいSEO施策のひとつです。技術的な知識がほとんどなくても実行でき、それでいてSEO・アクセシビリティ・AI検索のすべてに好影響を与えます。

なぜalt属性が重要なのか

alt属性が重要とされる理由は、大きく3つの側面に分けられます。SEO、アクセシビリティ、そしてAI検索対応です。

SEOへの影響

Googleは画像検索のランキングにalt属性を主要なシグナルとして使用しています。適切に書かれたalt属性を設定することで、画像がGoogle画像検索の結果に表示され、そこから大きなトラフィックを得ることができます。

Googleの公式ドキュメントでも、alt属性について以下のように推奨しています。「ページのコンテンツに関連したキーワードを適切に使用し、有用で情報量の多いコンテンツをalt属性で提供すること」。この公式見解からも、Googleがalt属性をどれだけ重視しているかがわかります。

画像検索だけでなく、alt属性はページ全体のトピックや関連性を検索エンジンに伝える役割も果たします。たとえば、ランニングシューズの紹介ページに設定された「トレイルコースを走る防水トレイルランニングシューズ」というalt属性は、そのページがランニングシューズというトピックに関連していることを検索エンジンに補強して伝えます。結果として、通常のWeb検索結果でのランキング向上にも貢献するのです。

アクセシビリティ

スクリーンリーダーを使用する視覚障がい者は、alt属性のテキストを通じて画像の内容を理解します。alt属性がないと、その画像が何を意味しているかの情報が完全に欠落し、コンテンツの意味が通じなくなります。

Web Content Accessibility Guidelines（WCAG）では、すべての非装飾画像に代替テキストを提供することが要件として定められています（WCAG 2.1 成功基準 1.1.1「非テキストコンテンツ」）。日本では「障害者差別解消法」の改正（2024年4月施行）により、合理的配慮の提供が義務化され、Webアクセシビリティへの対応がこれまで以上に求められるようになっています。

良いalt属性を書くことは単なるベストプラクティスではなく、Webをすべての人にとって使いやすくするための基本的な義務です。

AI検索・生成AIでの活用

ChatGPT、Perplexity、Google AI Overviewなどの生成AIツールは、ページの内容を解析する際にalt属性のテキストも参照しています。AIツールはページ上のテキストだけでなく、画像に付与されたメタ情報も含めてページの全体像を把握しようとします。

画像に具体的なalt属性が設定されていることで、AIツールはページの内容をより正確に理解でき、回答や要約の中であなたのコンテンツを引用する可能性が高まります。alt属性の最適化は、従来のSEOだけでなく、GEO（Generative Engine Optimization）の基盤としても機能するのです。

良いalt属性の書き方

基本原則

alt属性を書く際に押さえるべきポイントは以下の4つです。

具体的で描写的に書く: 画像が実際に何を示しているかを伝える。抽象的な表現ではなく、見たままの情報を記述する
簡潔にまとめる: 目安として125文字以内に収める。簡潔でありながら、画像の核心を捉えた表現を心がける
キーワードを自然に含める: 関連するキーワードを無理に詰め込むのではなく、文脈に沿って自然に含める
ページの文脈を考慮する: 同じ画像であっても、掲載されるページのテーマによって最適なalt属性は変わる。その画像がそのページでどのような役割を果たしているかを考える

良い例と悪い例

具体的なコード例で比較してみましょう。

<!-- 良い例：具体的で描写的 -->
<img src="report.png" alt="3つの製品ラインのQ1売上を比較する棒グラフ。ソフトウェアが240万ドルでトップ" />

<!-- 悪い例：情報がなさすぎる -->
<img src="report.png" alt="グラフ" />

<!-- 悪い例：キーワードの詰め込み -->
<img src="report.png" alt="売上 グラフ 棒グラフ Q1 販売データ 製品比較 ビジネス 分析" />

<!-- 悪い例：ファイル名のまま -->
<img src="report.png" alt="report.png" />

<!-- 悪い例：alt属性自体がない -->
<img src="report.png" />

良い例では、グラフの種類（棒グラフ）、何を比較しているか（3つの製品ラインのQ1売上）、主要な知見（ソフトウェアが240万ドルでトップ）が具体的に述べられています。一方、悪い例の「グラフ」ではスクリーンリーダーのユーザーにも検索エンジンにも何の情報も伝わりません。キーワードの羅列も、不自然で意味をなさないテキストとしてGoogleに認識され、スパム的な印象を与えるだけです。

画像の種類別の書き方

画像の種類によって、alt属性の書き方には異なるアプローチが必要です。以下に主要な画像タイプごとの具体例を示します。

商品画像

ECサイトやレビュー記事で使用する商品画像では、商品名、主な特徴、色、サイズなど購買判断に関連する情報を含めます。ユーザーが画像を見なくても商品を特定できる情報を提供することが理想です。

<img src="headphones.jpg" alt="Sony WH-1000XM6 ワイヤレスノイズキャンセリングヘッドホン ミッドナイトブルー" />

人物写真

誰が写っていて、何をしているかを説明します。イベントやプレゼンテーションの写真であれば、場面の状況も含めます。

<img src="keynote.jpg" alt="代表取締役の田中が年次総会で2026年の製品ロードマップを発表している様子" />

グラフ・チャート

グラフの種類と、読み取るべき主要なトレンドや要点を伝えます。詳細なデータが必要な場合は、alt属性ではなく本文やテーブルで補足しましょう。alt属性にデータをすべて列挙するのは冗長になり、スクリーンリーダーでの可読性も損なわれます。

<img src="growth-chart.png" alt="2025年10月から2026年3月にかけてWebサイトトラフィックが45%増加したことを示す折れ線グラフ" />

スクリーンショット

スクリーンショットが何を表示しているか、そしてなぜそれが関連するのかを説明します。UI操作の解説記事では、ユーザーが次に何をすべきかの手がかりになる情報も含めると親切です。

<img src="settings.png" alt="ユーザープロフィール設定画面。通知設定セクションがハイライトされている" />

インフォグラフィック

主要なポイントを簡潔にまとめます。インフォグラフィックに詳細な情報が含まれている場合は、全容の説明は本文に委ねましょう。インフォグラフィックの内容をすべてalt属性に書こうとすると、数百文字を超えてしまい実用的ではありません。

<img src="seo-steps.png" alt="オンページSEOを改善する5つのステップを示すインフォグラフィック。詳細は以下の本文を参照" />

装飾画像の扱い

すべての画像がコンテンツとしての意味を持つわけではありません。区切り線、背景パターン、純粋に装飾的なアイコンなどの画像には、空のalt属性を設定します。

<!-- 正しい：装飾画像に空のalt属性を設定 -->
<img src="decorative-border.png" alt="" />

<!-- 誤り：alt属性自体を省略 -->
<img src="decorative-border.png" />

alt属性を完全に省略することと、空の alt="" を設定することは技術的に全く異なります。alt属性がない場合、スクリーンリーダーはファイル名（例: "decorative-border.png"）を読み上げてしまい、ユーザーに混乱を与えます。一方、空の alt="" は「この画像は装飾的なので読み飛ばしてよい」と支援技術に明示的に伝えます。

純粋に装飾目的の画像であれば、CSSの background-image で実装するほうが、HTMLのセマンティクスの観点からもより適切です。装飾的な要素をHTMLから完全に切り離すことで、ドキュメント構造がクリーンになり、スクリーンリーダーが処理する情報も必要なものだけに絞られます。

リンク画像のalt属性

画像がリンクの中に配置されている場合、alt属性の役割が変わります。画像の見た目を説明するのではなく、リンク先の説明として機能すべきです。ユーザー（とスクリーンリーダー）が知りたいのは「このリンクをクリックするとどこに行くのか」であり、「この画像が何に見えるか」ではありません。

<a href="/pricing">
  <img src="pricing-banner.jpg" alt="料金プランを見る" />
</a>

リンクの中にテキストも含まれている場合、その画像はリンクのコンテキストにおいて装飾的であり、空のalt属性を設定できます。テキストがすでにリンクの目的を説明しているため、画像のalt属性で同じ情報を繰り返す必要はありません。

<a href="/pricing">
  <img src="pricing-icon.png" alt="" />
  料金プランを見る
</a>

よくあるミスと注意点

alt属性に関して特に多いミスを5つ紹介します。これらを避けるだけでも、alt属性の品質は大きく向上します。

「画像」「写真」で始める必要はない

スクリーンリーダーはalt属性を読み上げる前に「画像」と案内します。そのため、altテキストに「画像：」「写真：」と書くと「画像、写真：モダンなオフィス空間」のように冗長に読み上げられてしまいます。

<!-- 冗長な例 -->
<img src="office.jpg" alt="写真：モダンなオフィス空間" />

<!-- 適切な例 -->
<img src="office.jpg" alt="スタンディングデスクと自然光が入るオープンフロアのオフィス" />

適切な例のほうが、オフィスの特徴（スタンディングデスク、自然光、オープンフロア）が具体的に伝わります。「写真：」という接頭辞を省くことで、限られた文字数を画像の実質的な説明に使えます。

CMSの自動生成に任せない

WordPressなどのCMSでは、画像のアップロード時にファイル名がalt属性に自動設定されることがあります。「IMG_20260318_042.jpg」や「screenshot-2026-03-18.png」のようなalt属性には何の意味もありません。画像を追加するたびに、必ず手動で確認し、内容を的確に説明するテキストに書き換えましょう。

既存のコンテンツについても、過去の記事を遡ってalt属性を監査することを推奨します。特にアクセス数の多いページから優先的に改善していくのが効率的です。

alt属性が長すぎる

厳密な文字数制限はありませんが、alt属性が長すぎるとスクリーンリーダーでの処理が困難になります。スクリーンリーダーは途中で一時停止したり読み直したりできないため、過度に長い説明はユーザー体験を損ないます。

画像に長い説明が必要な場合は、alt属性には簡潔な要約を入れ、詳細な説明は周囲のテキストや <figcaption> 要素で補足しましょう。

<figure>
  <img src="architecture.png" alt="決済処理パイプラインのシステムアーキテクチャ図" />
  <figcaption>決済パイプラインは3つの検証ステージを経て決済サービスに到達します。詳細は技術ドキュメントを参照してください。</figcaption>
</figure>

この方法であれば、alt属性は簡潔に画像の種類と主題を伝え、figcaptionがすべてのユーザーに対して詳細な文脈を提供します。

すべての画像に同じalt属性を使う

同じページに複数の画像がある場合、すべてに同じalt属性を設定してしまうケースがあります。たとえばECサイトで商品画像を複数枚掲載する場合、すべてに「商品画像」と設定するのではなく、それぞれの画像が示す内容（正面、側面、着用イメージなど）を個別に記述しましょう。

alt属性を完全に省略する

alt属性自体を記述しないのは、アクセシビリティの観点から最も避けるべきパターンです。意味のある画像には描写的なaltを、装飾画像には空の alt="" を設定してください。

IndexReadyでalt属性をチェックする

IndexReadyのSEOスコアリングツールでは、画像のalt属性をSEOカテゴリの項目として自動チェックしています（6点満点）。ページ内の画像のうちalt属性が設定されていない画像の割合を計測し、すべての画像にaltが設定されていれば満点、欠落率に応じて警告やエラーが表示されます。

URLを入力するだけで、alt属性の設定状況だけでなく、タイトルタグ、メタディスクリプション、ページ速度、構造化データなど、SEO・GEO対策の全23項目をまとめてチェックできます。自分のサイトにalt属性の抜け漏れがないか、まずはスキャンして現状を把握してみましょう。

まとめ

画像のalt属性の最適化は、最もコストパフォーマンスの高いWebサイト改善策のひとつです。技術的なハードルが低く、それでいて検索エンジンでの可視性を向上させ、より多くのユーザーにサイトをアクセシブルにし、AIシステムがコンテンツを理解する手助けをします。

意味を持つすべての画像に、具体的で簡潔なalt属性を設定する
装飾画像には空の alt="" を設定する
キーワードは自然に含め、無理に詰め込まない
画像の種類とページの文脈に合った説明を書く
CMSが自動生成したalt属性は必ず手動で確認・修正する
リンク画像では、画像の見た目ではなくリンク先の目的を説明する

まずは最も重要なページの画像から監査を始めましょう。SEO、アクセシビリティ、AI検索での発見可能性への効果は、地道に積み重ねることで確実に表れます。

よくある質問（FAQ）

alt属性がないと検索順位は下がりますか？

alt属性の欠落だけで検索順位が劇的に下がることはほとんどありません。しかし、画像検索からのトラフィック機会を逃し、ページ内容についてのシグナルが弱くなるのは確実です。また、アクセシビリティの欠如はサイト全体の品質評価にも影響する可能性があります。alt属性の設定はコストがほとんどかからない施策なので、設定しない合理的な理由はありません。

alt属性の最適な文字数はどのくらいですか？

厳密な上限はありませんが、125文字以内に収めるのが広く認められたベストプラクティスです。この長さはほとんどのスクリーンリーダーで問題なく処理でき、簡潔さを保つ制約としても機能します。画像により長い説明が必要な場合は、alt属性には要約を入れ、詳細は本文やキャプション要素（<figcaption>）に記述しましょう。

SVGやCSSの背景画像にもalt属性は必要ですか？

CSSの background-image はHTMLの要素ではないため、alt属性を設定する仕組み自体がありません。コンテンツとして意味を持つ画像は、できるだけ <img> タグで実装し、alt属性を設定しましょう。インラインSVGの場合は、<svg> タグ内に <title> 要素を追加するか、role="img" と aria-label 属性を組み合わせて代替テキストを提供する方法があります。

<!-- SVGのアクセシブルな実装例 -->
<svg role="img" aria-label="月間売上の推移グラフ">
  <title>月間売上の推移グラフ</title>
  <!-- SVGの中身 -->
</svg>

生成AIはalt属性をどのように活用していますか？

ChatGPT、Perplexity、Google AI Overviewなどの生成AIツールは、Webページをクロールする際にalt属性のテキストも解析しています。これにより、ページに含まれる視覚的なコンテンツと、それが周囲のテキストとどのように関連しているかを理解できます。

描写的なalt属性を設定することで、AIシステムがあなたのコンテンツをより正確に把握し、生成される回答の中であなたのページを引用する可能性が高まります。alt属性の最適化はGEO（Generative Engine Optimization）対策としても重要な施策であり、AI検索時代においてalt属性の価値はますます高まっています。

画像alt属性の最適化ガイド｜SEO・アクセシビリティ・AI対策の基本