alt属性とは何か？

alt属性（代替テキスト）は、HTML の <img> タグに設定するテキスト情報です。画像の内容をテキストで説明する役割を持っています。

<img src="team-meeting.jpg" alt="会議室でホワイトボードを使ってプレゼンするチームメンバー" />

この属性は、もともと画像が読み込めなかったときに代わりに表示するテキストとして設計されました。しかし現在では、SEO、アクセシビリティ、そしてAI検索対策の観点から、Webサイトの品質を左右する重要な要素となっています。

なぜalt属性が重要なのか

SEOへの影響

Googleの画像検索はalt属性を重要なランキング要因として使用しています。適切なalt属性を設定することで、画像検索からの流入が期待できます。また、通常の検索結果にも画像が表示されるケースが増えており、alt属性の最適化はオーガニックトラフィック全体の底上げにつながります。

Googleは公式ドキュメントで「画像について有用で情報に富むコンテンツを、適切にalt属性を使用して提供すること」を推奨しています。

アクセシビリティ

スクリーンリーダーを使用する視覚障がい者は、alt属性のテキストを通じて画像の内容を理解します。alt属性がないと、その画像が何を意味しているのか全くわかりません。Web Content Accessibility Guidelines（WCAG）でも、すべての非テキストコンテンツに代替テキストを提供することが求められています。

AI検索・生成AIでの活用

ChatGPTやPerplexity、Google AI Overviewなどの生成AIツールは、ページの内容を理解する際にalt属性のテキストも参照しています。alt属性に具体的な説明があることで、AIがページの内容をより正確に把握し、回答や引用の際に活用しやすくなります。

良いalt属性の書き方

基本原則

alt属性を書く際のポイントは次のとおりです。

画像の内容を具体的に説明する：何が写っているか、何を表しているかを伝える
簡潔にまとめる：目安として125文字以内に収める
キーワードを自然に含める：無理な詰め込みはNG
文脈に合った説明をする：同じ画像でも使われるページによって最適なaltは変わる

良い例と悪い例

<!-- 良い例：具体的で簡潔 -->
<img src="chart.png" alt="2026年の国内EC市場規模の推移を示す折れ線グラフ" />

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

<!-- 悪い例：キーワードの詰め込み -->
<img src="chart.png" alt="EC 市場規模 グラフ 2026年 日本 市場 推移 統計 データ" />

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

<!-- 悪い例：altなし -->
<img src="chart.png" />

画像の種類別の書き方

商品画像

商品名、特徴、色、サイズなどの情報を含めます。

<img src="sneakers.jpg" alt="ナイキ エアマックス90 ホワイト メンズ 27.0cm" />

人物写真

誰が何をしているかを説明します。

<img src="ceo-speech.jpg" alt="代表取締役の田中が年次総会で事業方針を説明している様子" />

グラフ・チャート

データの種類と傾向を伝えます。詳細なデータはalt属性ではなく本文やテーブルで補足しましょう。

<img src="sales-chart.png" alt="2024年から2026年にかけての売上推移を示す棒グラフ。3年連続で増加傾向" />

スクリーンショット

画面の内容と目的を説明します。

<img src="settings-screen.png" alt="アカウント設定画面の通知設定セクション。メール通知とプッシュ通知の切り替えスイッチが表示されている" />

インフォグラフィック

要点を簡潔にまとめます。情報量が多い場合は、alt属性に概要を書き、詳細は本文で説明する方法が適切です。

<img src="infographic.png" alt="SEO対策の5つのステップを示すインフォグラフィック。詳細は以下の本文を参照" />

装飾画像の扱い

区切り線、背景パターン、アイコンなど、コンテンツとして意味を持たない装飾画像には、空のalt属性を設定します。

<!-- 装飾画像：空のalt属性を設定 -->
<img src="divider.png" alt="" />

<!-- NGパターン：alt属性自体を省略 -->
<img src="divider.png" />

alt属性を省略してしまうと、スクリーンリーダーがファイル名を読み上げてしまうため、ユーザー体験が悪化します。装飾画像であることを明示するために、空の alt="" を必ず設定しましょう。

なお、純粋な装飾目的の画像はCSSの background-image で実装するほうがHTMLのセマンティクス上も適切です。

よくあるミスと注意点

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

スクリーンリーダーはalt属性を読む前に「画像」と案内するため、altテキストに「画像：」「写真：」と書くと冗長になります。

<!-- 冗長な例 -->
<img src="office.jpg" alt="写真：オフィスの風景" />

<!-- 適切な例 -->
<img src="office.jpg" alt="オープンフロアのオフィスでデスクに向かう従業員たち" />

リンク画像のalt属性

画像がリンクの中にある場合、alt属性はリンク先の説明として機能します。画像の見た目ではなく、リンクの目的を説明しましょう。

<a href="/products">
  <img src="products-banner.jpg" alt="商品一覧ページへ" />
</a>

CMS任せにしない

WordPressなどのCMSでは、画像のアップロード時にファイル名がaltに自動設定されることがあります。「IMG_20260318_001.jpg」のようなaltは意味がないため、手動で適切な説明に書き換えましょう。

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

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

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

まとめ

alt属性の最適化は、SEO・アクセシビリティ・AI対策のすべてに効果がある、コストパフォーマンスの高い施策です。既存ページの画像にalt属性が正しく設定されているか、一度見直してみることをおすすめします。

意味を持つ画像には具体的で簡潔なaltを設定する
装飾画像には alt="" を設定する
キーワードは自然に含め、詰め込まない
画像の種類と文脈に合った説明を書く

地味な作業に思えるかもしれませんが、サイト全体のalt属性を整えることで、検索エンジンからの評価向上、ユーザー体験の改善、そしてAI時代の検索対策として確実に成果が現れるでしょう。

よくある質問（FAQ）

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

alt属性の有無だけで検索順位が大きく変動するわけではありません。ただし、Googleは画像の内容を理解するためにalt属性を参照しており、画像検索からの流入機会を逃すことになります。またアクセシビリティの観点からも、alt属性の欠落はサイト品質の低下とみなされる可能性があります。

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

明確な上限はありませんが、一般的には125文字以内が推奨されています。これはスクリーンリーダーが一度に読み上げる長さの目安です。簡潔でありつつ、画像の内容が伝わる程度の具体性を持たせましょう。

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

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

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

ChatGPT、Perplexity、Google AI Overviewなどの生成AIは、Webページをクロールする際にalt属性のテキストも解析しています。これにより、ページに含まれる画像の内容やページ全体のトピックをより正確に理解できます。適切なalt属性を設定することは、AIによる引用や要約の精度向上につながり、GEO（Generative Engine Optimization）対策として有効です。