SEOコンサルティングサービスのご案内
専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。
無料ダウンロードする ＞＞
Alt属性（代替テキスト）は細かい設定のひとつで、とりあえず画像ファイル名をそのまま入れておけば十分だと思っていませんか？
実は、Googleの画像検索の初期から、Alt属性は検索エンジンが画像の内容を理解するための中核的な要素として機能しています。だからといって、SEOに効くAlt属性＝『IMG_001.jpg』のようなファイル名や、単なる英数字の羅列をそのまま入れればいいというわけでもありません。
意味をなさないテキストは、画像が表示されない時やスクリーンリーダーを利用するユーザーへの『説明書き』として機能せず、SEO効果も十分に発揮されません。正しく理解して、SEOに真に効果的なAlt属性を設定しましょう。
Webサイト運営において、画像の適切な取り扱いはユーザー体験とSEOの両面で重要な要素です。その中でも「Alt属性」は、検索エンジンに画像の内容を伝え、アクセシビリティを向上させる基本的な要素として知られています。
しかし、実際には正しく活用できていないサイトも少なくありません。本記事では、SEO担当者が押さえておくべきAlt属性の基礎知識から実践的な設定方法、よくある疑問まで詳しく解説します。
この記事の３行まとめ
目次
Alt属性（オルト属性）は、HTMLのimg要素に設定する属性で、画像の代替テキストを指定するものです。正式には「alternative text（代替テキスト）」の略称で、画像が表示されない場合や、スクリーンリーダーを使用するユーザーに対して、画像の内容を文字情報で伝える役割を果たします。
HTMLでの記述例は以下の通りです。
<img src=”example.jpg” alt=”青空の下で咲く満開の桜並木”>
この属性は、1995年にHTML 2.0で導入されて以来、Web標準として位置づけられています。現在のHTML Living Standardでも、画像要素に対して必須または強く推奨される属性として定義されており、Webアクセシビリティの観点から欠かせない要素となっています。
Alt属性が果たす主な役割は3つあります。
通信環境の問題やファイルパスの誤りなどで画像が表示されないとき、Alt属性に設定したテキストが画面に表示されます。
スクリーンリーダーを使用する際、Alt属性のテキストが読み上げられることで、画像の内容を理解できます。
検索エンジンのクローラーに画像の内容を伝える情報源としても機能します。
検索エンジンは年々画像認識技術を向上させていますが、依然として画像の文脈や意図を完全に理解することは困難です。Alt属性は、画像が何を表しているのか、なぜそこに配置されているのかを検索エンジンに明確に伝える手段として重要な役割を担っています。
Alt属性を適切に設定することで得られるメリットは、SEOとユーザー体験の両面に及びます。それぞれの観点から具体的な効果を見ていきましょう。
検索エンジンは画像の内容を理解するために、Alt属性のテキストを重要な情報源として活用しています。適切なAlt属性を設定することで、画像検索での表示機会が増加し、通常の検索結果においても関連性の高いコンテンツとして評価される可能性が高まります。
特にGoogle画像検索では、Alt属性が検索クエリとのマッチングに使用されます。例えば、商品画像に「ブラックレザービジネスバッグ メンズ用」というAlt属性を設定すれば、関連する検索で画像が表示される可能性が向上します。画像検索からの流入は、特にECサイトやビジュアルコンテンツを多用するサイトにとって重要なトラフィック源となります。
また、ページ全体のSEO評価にも間接的に影響します。Alt属性を通じて画像とテキストコンテンツの関連性が明確になることで、ページのトピックに対する検索エンジンの理解が深まります。これはページ全体の評価向上につながる要素の一つです。
Webアクセシビリティは、すべてのユーザーが情報にアクセスできることを目指す取り組みです。Alt属性は、視覚障害を持つユーザーがスクリーンリーダーを使用してWebサイトを閲覧する際に不可欠な要素となります。
スクリーンリーダーは、Alt属性に設定されたテキストを読み上げることで、視覚的な情報を音声で伝えます。適切なAlt属性があれば、画像が伝えようとしている情報や文脈をすべてのユーザーが理解できるようになります。
多くの国では、公共機関や一定規模以上の企業のWebサイトにアクセシビリティ対応が法的に求められるようになっています。日本でも障害者差別解消法の改正により、事業者による合理的配慮の提供が義務化されました。Alt属性の適切な設定は、こうした法的要件を満たす上でも重要な要素です。
画像が表示されない状況は、通信環境の問題、ファイルの破損、サーバーエラーなど様々な理由で発生します。このような場合でも、Alt属性が設定されていれば、ユーザーは画像の内容を推測でき、コンテンツの理解を継続できます。
特にモバイル環境では、データ通信量を節約するために画像の読み込みをオフにするユーザーも存在します。そうした場合でも、Alt属性によって最低限の情報が提供されることで、ユーザーは必要に応じて画像を読み込むかどうか判断できます。
また、画像の読み込みに時間がかかる場合、Alt属性のテキストが先に表示されることで、ページの内容を先読みできるという利点もあります。これはユーザーの待ち時間に対するストレスを軽減する効果があります。
Alt属性の効果を最大化するためには、単に設定するだけでなく、その内容を適切に記述することが重要です。ここでは、実践的なAlt属性の書き方のポイントを解説します。
Alt属性は、画像の内容を端的に伝えることが基本です。一般的には125文字以内、理想的には80文字程度に収めることが推奨されます。これは、スクリーンリーダーの多くが一定文字数で読み上げを区切る仕様になっているためです。
良い例として、商品画像の場合は「ネイビーのウールコート レディース Mサイズ フロントボタン」のように、ユーザーが知りたい情報を過不足なく記載します。悪い例としては「画像」「写真」「img001」などの抽象的な表現や、ファイル名をそのまま使用することが挙げられます。
同じ画像でも、使用される文脈によって最適なAlt属性は変わります。例えば、著名人の写真を使用する場合、人物紹介の記事では「マーケティング戦略家の山田太郎氏」のように人物の特定が重要ですが、講演会のレポート記事では「セミナーで講演する山田太郎氏」のように状況を説明する方が適切です。
画像が含まれるコンテンツの目的を理解し、ユーザーがその画像から得るべき情報を考慮してAlt属性を設定することが重要です。
SEOの観点からは、対策キーワードをAlt属性に含めることが有効ですが、不自然なキーワードの詰め込みは避けるべきです。検索エンジンはキーワードスタッフィングを検出し、コンテンツの評価を下げる可能性があります。
例えば、「SEO対策 SEOコンサルティング SEO施策 SEOサービス」のように同じキーワードを繰り返すのではなく、「企業サイト向けSEOコンサルティングサービスの分析画面」のように自然な文章の中にキーワードを含めます。
リンクボタンやアイコンなど、特定の機能を持つ画像の場合は、見た目ではなく機能を説明します。例えば、虫眼鏡アイコンには「検索」、矢印アイコンには「次のページへ」といった具合です。
これにより、スクリーンリーダーを使用するユーザーも、画像をクリックした際に何が起こるのかを理解できます。
画像のすぐ近くにキャプションや説明文がある場合、Alt属性で同じ情報を繰り返す必要はありません。Alt属性は、キャプションに含まれていない補足情報を提供するか、画像の基本的な説明のみに留めることで、スクリーンリーダー使用時の冗長性を避けられます。
例えば、キャプションに「2024年の売上推移グラフ」とある場合、Alt属性は「2024年1月から12月までの月次売上を示す棒グラフ、7月にピーク」のように、グラフから読み取れる重要なポイントを補足する形が効果的です。
当社がSEO支援を行うサイトの初期監査では、Alt属性の問題が高頻度で見つかります。よくあるパターンは3つです。
画像要素に設定できる属性として、Alt属性と混同されやすいのがtitle属性です。両者は似た目的で使われることがありますが、役割と使い方には明確な違いがあります。
Alt属性は、画像の代替テキストとして機能し、画像が表示されない場合やスクリーンリーダー使用時に画像の内容を伝えます。これは画像要素において必須または強く推奨される属性です。
一方、title属性は、要素に関する補足情報を提供するもので、マウスカーソルを画像の上に置いたときにツールチップとして表示されます。title属性は任意の属性であり、必ずしも設定する必要はありません。
Alt属性は、画像が読み込めない場合に画像の代わりに表示され、スクリーンリーダーによって自動的に読み上げられます。ユーザーが特別な操作をしなくても情報が提供されます。
title属性は、デスクトップ環境でマウスカーソルを画像上に数秒間置いたときのみツールチップとして表示されます。タッチデバイスやキーボード操作では基本的に表示されないため、重要な情報を伝える手段としては不適切です。また、スクリーンリーダーの多くはtitle属性を読み上げない、または設定により読み上げるかどうかが変わるため、アクセシビリティの観点からも必須情報の提供には向きません。
Googleをはじめとする主要な検索エンジンは、Alt属性を画像の内容を理解するための重要な情報源として活用していますが、title属性の重要度は相対的に低いとされています。Alt属性はSEO施策として優先的に設定すべきですが、title属性はSEO効果を期待するよりも、必要に応じて補足情報を提供する目的で使用すべきです。
基本的には、すべての意味を持つ画像にAlt属性を設定し、必要に応じてtitle属性で補足情報を追加するというアプローチが推奨されます。
例えば、製品画像の場合、Alt属性には「赤いランニングシューズ メンズ用 サイズ27cm」と製品の基本情報を記載し、title属性には「2024年春夏新作モデル 軽量設計で長距離ランに最適」のような付加価値情報や使用シーンの説明を記載できます。
ただし、title属性は多くのユーザーが目にする機会が限られるため、重要な情報は必ずAlt属性やページ内の通常テキストに含めるべきです。title属性は、あくまで追加の文脈や豆知識的な情報を提供するものと考えるのが適切です。
すべての画像にAlt属性を設定することが推奨される一方で、意図的にAlt属性を空にする（alt=””と設定する）べきケースも存在します。これは、Alt属性を省略することとは異なり、スクリーンリーダーに対して「この画像は装飾的なもので、読み上げる必要がない」と明示的に伝える行為です。
Webデザインにおいて、視覚的な演出のためだけに使用される画像は、情報価値を持ちません。例えば、背景パターン、区切り線として使用される装飾的な画像、ボーダーやシャドウ効果を表現する画像などがこれに該当します。
このような画像にAlt属性で説明を加えても、スクリーンリーダーのユーザーにとっては不要な情報となり、コンテンツの理解を妨げる可能性があります。alt=””と設定することで、スクリーンリーダーはその画像を読み飛ばし、重要なコンテンツに集中できます。
画像の直前または直後に、その画像の内容を完全に説明するテキストがある場合、Alt属性で同じ情報を繰り返す必要はありません。
例えば、「当社のロゴマークは青い円の中に白い星が配置されたデザインです」というテキストの直後にそのロゴ画像がある場合、Alt属性に「青い円の中に白い星が配置されたロゴ」と記載すると情報が重複します。このようなケースではalt=”会社のロゴ”と簡潔にするか、alt=””として冗長性を避けることが適切です。
純粋に装飾目的の画像は、HTML内のimg要素ではなく、CSSの背景画像として実装することが望ましいとされています。CSSで実装された背景画像はスクリーンリーダーの読み上げ対象外となるため、Alt属性の設定について考慮する必要がありません。
ただし、何らかの理由でimg要素として実装せざるを得ない装飾画像については、alt=””を設定します。
一つのリンク要素（a要素）の中に画像とテキストの両方が含まれる場合、画像のAlt属性で情報を重複させる必要はありません。
<a href=”/products”>
<img src=”icon.png” alt=””>
商品一覧を見る
</a>
このように、リンクテキストが既にリンク先を明確に説明している場合、アイコン画像のAlt属性は空にすることで、スクリーンリーダーが「商品一覧を見る リンク」と一度だけ読み上げることになります。
Alt属性を空にする場合、必ずalt=””と記述し、alt属性自体を省略してはいけません。alt属性が完全に省略された画像は、スクリーンリーダーがファイル名を読み上げてしまう可能性があり、「img_001.jpg」のような無意味な情報がユーザーに伝わってしまいます。
また、一見装飾的に見える画像でも、コンテンツの理解に寄与する場合は適切なAlt属性を設定すべきです。判断に迷う場合は、「この画像がなくてもコンテンツの意味は完全に伝わるか」を基準に考えると良いでしょう。
Alt属性が適切に設定されているかを確認することは、SEO施策とアクセシビリティ対応の両面で重要です。ここでは、実務で活用できる確認方法を紹介します。
最も基本的な確認方法は、ブラウザに標準搭載されている開発者ツールを使用することです。Google Chrome、Firefox、Microsoft Edgeなどの主要ブラウザで利用できます。
確認したいページを開き、F12キーを押すか、右クリックメニューから「検証」を選択して開発者ツールを起動します。Elements（要素）タブで画像要素を選択すると、HTMLコードが表示され、Alt属性の有無と内容を確認できます。
Alt属性の確認に特化したブラウザ拡張機能を使用すると、より効率的にチェックできます。
「Web Developer」は、画像の輪郭表示やAlt属性の表示機能を備えた拡張機能で、ChromeとFirefoxで利用できます。この拡張機能を使用すると、ページ上の画像にAlt属性のテキストをオーバーレイ表示でき、視覚的に確認できます。
「WAVE」は、Webアクセシビリティ評価ツールで、Alt属性の欠落や不適切な設定を検出し、アイコンでページ上に表示します。アクセシビリティ全般のチェックもできるため、包括的な評価に適しています。
サイト全体のAlt属性設定状況を把握するには、SEOツールの活用が効果的です。
Screaming Frog SEO Spiderは、Webサイトをクロールして画像のAlt属性の有無を一覧表示できるツールです。無料版でも500URLまでクロール可能で、Alt属性が設定されていない画像を抽出できます。CSVエクスポート機能により、大規模サイトでの管理も容易になります。
Google Search ConsoleやAhrefsなどの本格的なSEOツールでも、サイト内の画像の最適化状況を確認できる機能が提供されています。
Lighthouseは、Googleが提供する自動化されたWebサイト品質監査ツールで、Chrome開発者ツールに統合されています。開発者ツールを開き、Lighthouseタブを選択してアクセシビリティ監査を実行すると、Alt属性に関する問題点がスコアとともに表示されます。
具体的には、Alt属性が欠落している画像、同じAlt属性が複数の画像に使用されているケース、不適切なAlt属性などが指摘されます。
W3CのMarkup Validation Serviceを使用すると、HTMLの文法的な正しさとともに、画像要素のAlt属性の有無も確認できます。ただし、Alt属性の内容が適切かどうかまでは判定されないため、他の方法と組み合わせて使用することが推奨されます。
最も確実な確認方法は、実際にスクリーンリーダーを使用してページを体験することです。Windowsには「ナレーター」、macOSには「VoiceOver」が標準搭載されており、無料で利用できます。
スクリーンリーダーで自サイトを閲覧することで、Alt属性が適切に読み上げられるか、情報が過不足なく伝わるか、冗長な表現になっていないかを実感できます。この体験は、ユーザー視点でのAlt属性最適化に非常に有効です。
Webサイトは常に更新されるため、Alt属性の設定状況も定期的にチェックする必要があります。新しいコンテンツを追加する際のチェックリストにAlt属性の確認を含めることや、月次または四半期ごとにサイト全体の監査を実施することで、一貫した品質を維持できます。
Alt属性の最適化は、理論として理解するだけでなく、実際のサイト運営にどう落とし込むかが重要です。ここでは、当社が支援したリフォーム関連サービスを提供するECサイトでの取り組みをご紹介します。
カテゴリTOPページやLPを中心に現状調査を実施したところ、以下の3点が主な問題として浮かびあがりました。
各カテゴリの検索意図を再分析した上で、対象ページのAlt属性をH1キーワードおよびページの主訴求と整合する形に書き直しました。
例えば、キャッシュレス端末サービスのLPキービジュアルには端末名と、ユーザーが検索する課題解決ワードを中心に記述。あわせて、デザイン上の区切り線や背景パターンなど装飾画像にはalt=””を明示的に設定し、スクリーンリーダーの読み上げ体験も整理しました。
対象カテゴリページの画像検索インプレッションが改善傾向を示し、LighthouseのアクセシビリティスコアもAlt属性整備前と比較して向上しました。
Alt属性を「とりあえず付ける」から「検索意図と整合させる」発想に転換することで、SEOとアクセシビリティの双方に効果が出た事例です。
「ツール上では設定済みに見えても、中身が形骸化している」状態の解消が、実際の成果につながるポイントでした。
Alt属性は、画像の内容を検索エンジンとユーザーの両方に適切に伝えるための基本的かつ重要な要素です。SEOの観点からは、画像検索での表示機会増加やページ全体の関連性向上に寄与し、アクセシビリティの観点からは、すべてのユーザーが等しく情報にアクセスできる環境を整備します。
効果的なAlt属性を設定するためには、簡潔で具体的な記述、文脈に合わせた情報提供、自然なキーワード含有を意識することが重要です。同時に、装飾的な画像には空のAlt属性を設定し、不要な情報でユーザー体験を損なわないよう配慮することも必要です。
title属性との違いを理解し、それぞれの役割に応じて適切に使い分けることで、より洗練されたWebサイトを構築できます。また、開発者ツールやSEOツール、スクリーンリーダーなどを活用して定期的に設定状況を確認し、継続的な改善を図ることが成功の鍵となります。
Alt属性の最適化は、一度設定すれば終わりではなく、コンテンツの追加や更新に合わせて継続的に取り組むべき施策です。適切なAlt属性の設定により、検索エンジンからの評価向上とユーザー満足度の向上という二つの目標を同時に達成できます。今日から実践できる施策として、自サイトのAlt属性を見直してみてはいかがでしょうか。
自社サイトのAlt属性設定状況の診断や、改善方針の策定にお困りの場合は、ぜひご相談ください。SEO観点・アクセシビリティ観点の両面から、貴社サイトの課題を整理し、優先度の高い改善策をご提案します。
A: Alt属性の欠落が直接的な検索順位低下を引き起こすわけではありませんが、画像検索での表示機会を失い、ページ全体の最適化レベルが低下する可能性があります。特に画像が重要なコンテンツ要素となっているページでは、Alt属性の欠落はSEO上の機会損失となります。また、Googleはアクセシビリティを重視する方向性を示しており、将来的にはより重要な評価要素となる可能性もあります。
A: 一般的には125文字以内、理想的には80文字程度が推奨されます。これはスクリーンリーダーの多くが一定文字数で読み上げを区切る仕様になっているためです。ただし、文字数よりも「画像の内容を適切に伝えられているか」が重要であり、複雑な図表やグラフの場合は、必要に応じてより詳細な説明を周囲のテキストで補足することも検討すべきです。
A: サイトの主要言語で記述すべきです。日本語のWebサイトであれば日本語で、英語サイトであれば英語でAlt属性を設定します。検索エンジンはページ全体の言語を判断し、その言語での検索結果に表示するため、ターゲットユーザーの言語で記述することが最も効果的です。多言語サイトの場合は、各言語版でそれぞれの言語のAlt属性を設定します。
A: 必ずしも同じである必要はありません。Alt属性は画像が使用される文脈によって最適な内容が変わるため、各ページでの役割に応じて調整することが理想的です。例えば、同じ人物の写真でも、プロフィールページでは「代表取締役 山田太郎」、セミナーレポートでは「講演中の山田太郎氏」のように、文脈に合わせた記述が効果的です。
A: いいえ、装飾的な画像であればaltテキストは不要です。ただし、alt属性を完全に省略すると、スクリーンリーダーがファイル名を読み上げてしまう可能性がありますので注意してください。。alt=””と空の値を設定することで、スクリーンリーダーに「この画像は装飾目的で読み上げ不要」と明確に伝えられます。より適切な実装としては、装飾画像はCSSの背景画像として実装することが推奨されています。
A: 不自然なキーワードの詰め込み（キーワードスタッフィング）は、検索エンジンから評価が下がる可能性がある行為です。Alt属性は画像の内容を正確に説明するためのものであり、SEOのためだけに関係のないキーワードを追加することは避けるべきです。自然な文章の中に関連キーワードを含めることは問題ありませんが、「SEO SEO対策 SEOサービス」のような繰り返しは逆効果です。
A: 多くのCMSは画像アップロード時にファイル名をAlt属性として自動設定しますが、これは最適とは言えません。「IMG_001.jpg」や「photo-20240115.png」のようなファイル名は、ユーザーにとって意味のある情報を提供しません。画像をアップロードする際には、必ず手動で適切なAlt属性を設定するか、アップロード前にファイル名を意味のあるものに変更しておくことが推奨されます。
A: 複雑な図表やインフォグラフィックの場合、Alt属性には簡潔な要約を記載し、詳細な説明はページ内の通常テキストとして提供することが推奨されます。例えば、Alt属性には「2024年度売上構成比を示す円グラフ」と記載し、その下に「製品A:40%、製品B:35%、製品C:25%」といった詳細をテキストで記載します。HTML5では、figure要素とfigcaption要素を使用して画像に長い説明を付加する方法も効果的です。
2025年にアイオイクス株式会社 Webコンサルティング事業部にジョイン。国内外のSEOやWEBマーケティングの最新トピックを「分かりやすく、親しみやすく」届けるためのコンテンツ制作を担当。専門用語が並びがちな業界情報を、読者の皆さまが日常業務の合間にスッと理解できるよう、丁寧に噛み砕いて整理・発信することを大切にしている。
現在は主にメルマガ執筆やメディア運営のサポートに従事。SEO Japanが読者にとって新しい気づきを得られる場所になることを目指している。
アパレルECの運営を経験した後、SEOコンサルタントとして10年以上の実績、計100件以上のクライアント案件に携わる。テクニカルSEOの知見が豊富で分析、改善起案を得意としており、長年に渡り月間数億UU規模の大規模WebサイトにおけるSEOプロジェクトをメインで担当し続けている。お客様に寄り添うことを何より大切にしている。
SEO最新情報やセミナー開催のお知らせなど、お役立ち情報を無料でお届けします。
