alt属性とは？書き方具体例やSEO効果・設定方法を解説

alt属性は、画像の内容を検索エンジンやスクリーンリーダーの利用者に伝えるためのHTML属性です。画像が表示されない場合の代替テキストとしても機能します。画像検索やアクセシビリティの観点から、Webサイトの運営で適切に設定したい要素です。

ただし、すべての画像に説明文を設定すればよいわけではありません。画像の役割に合わせた書き方や、SEO効果を正しく理解することが大切です。

本記事では、alt属性の意味やSEOとの関係、正しい書き方、設定・確認方法を解説します。画像の設定漏れを防ぐ運用方法や、AI検索を意識したポイントも紹介します。

alt属性とは？

alt属性（オルト属性）とは、HTMLのimg要素に設定する、画像の代替テキストを指定する属性です。画像の内容や役割をテキストで表し、画像が表示されない場合やスクリーンリーダーを利用する場合に情報を伝えます。

alt属性は、画像の内容を検索エンジンが理解するための手がかりにもなります。画像を使うページでは、画像の目的に応じて適切に設定しましょう。

<img src="seo-guide.jpg" alt="SEO対策の基本を解説する資料">

上記の例では、alt属性に「SEO対策の基本を解説する資料」と記述しています。画像のファイル名や見た目だけでは伝わりにくい情報を、テキストで補うことがポイントです。

alt属性とtitle属性の違い

alt属性とtitle属性は、どちらもHTML要素に情報を付与する属性ですが、役割が異なります。alt属性は画像の代替テキストを指定するために使い、title属性は要素に関する補足情報を提供するために使います。

項目	alt属性	title属性
主な役割	画像の内容や役割を伝える	要素の補足情報を伝える
画像が表示されない場合	代替テキストとして機能する	代替テキストにはならない
スクリーンリーダー	画像の説明として利用される	読み上げ方は環境によって異なる
SEOでの役割	画像の理解を助ける	alt属性の代わりにはならない

画像の内容を伝えるには、title属性ではなくalt属性を適切に設定することが重要です。両者を同じものとして扱わないようにしましょう。

alt属性を設定する3つのメリット

alt属性を設定するメリットは、画像が表示されない場合の情報補完、アクセシビリティの向上、検索エンジンによる画像理解の促進です。

画像の内容をテキストでも伝えられるようにすることで、ユーザーにも検索エンジンにも情報が伝わりやすくなります。

画像が表示されないときも情報が伝わる

通信環境や画像ファイルの読み込みエラーなどで画像が表示されない場合、alt属性に設定したテキストが代替情報になります。画像そのものを確認できなくても、何が掲載されていたのかを把握しやすくなります。

ただし、代替テキストだけで画像のすべてを再現できるとは限りません。画像が伝える重要な情報を簡潔に記述することが大切です。

スクリーンリーダーで画像の内容を伝えられる

alt属性は、スクリーンリーダーを利用するユーザーに画像の内容を伝えるためにも使われます。スクリーンリーダーとは、画面上のテキストや情報を音声などで読み上げる支援技術です。

画像に適切な代替テキストが設定されていれば、視覚的な情報を把握しやすくなります。すべての画像に機械的に説明を付けるのではなく、情報を伝える画像と装飾目的の画像を区別しましょう。

検索エンジンが画像を理解しやすくなる

検索エンジンは、alt属性のテキストや画像周辺の文章などを手がかりに、画像の内容を理解します。画像の内容を具体的に記述すると、画像検索で適切に扱われるための助けになります。

ただし、alt属性だけで画像の評価や検索順位が決まるわけではありません。画像そのものの内容や、掲載されているページの文脈も重要です。

▶参照：Google検索セントラル「Google画像検索のSEOベストプラクティス」

alt属性はSEO対策として効果があるのか

alt属性は、画像検索で画像の内容を理解してもらうためのSEO施策の一つです。画像を使ったリンクでは、alt属性がリンク先を理解するためのアンカーテキストとして機能する場合もあります。

一方、alt属性を設定しただけでWebページの検索順位が上がるわけではありません。ページ全体の品質や関連性を高める施策とあわせて取り組みましょう。

画像検索で画像の内容が理解されやすくなる

Googleは、alt属性に加えて画像の認識技術やページ内のテキストなども利用し、画像の内容を理解します。alt属性で画像を適切に説明することは、画像検索で関連性を判断するための手がかりになります。

例えば、Webサイトの制作画面を写した画像なら「Webサイトの制作画面」と記述することで、画像の内容を具体的に伝えられます。画像と関係のないキーワードを追加しても、適切な説明にはなりません。

画像を使ったリンクのアンカーテキストになる

画像をリンクとして使用している場合、alt属性はリンク先の内容やリンクの目的を伝える役割を持ちます。テキストリンクのアンカーテキストと同じように、リンク先を理解するための手がかりになるためです。

例えば、SEO対策の解説ページに移動する画像リンクなら、リンク先の目的がわかるようにalt属性を設定します。画像の見た目だけでなく、リンクとして何をするものなのかも意識しましょう。

alt属性だけで検索順位は上がらない

alt属性は画像SEOを支える要素ですが、設定するだけで検索順位が上がることを保証するものではありません。Googleは、画像の内容だけでなく、掲載ページの情報や画像の周辺にあるテキストなども利用しています。

そのため、alt属性の設定に加えて、画像と本文の関連性を高めることや、ページ全体の品質を改善することが大切です。画像SEO全体の考え方については、以下の記事も参考にしてください。

▶関連記事：SEO対策で画像を最適化する方法！NG行為やAI検索との関係

alt属性の正しい書き方と具体例

alt属性は、画像の内容や役割を簡潔に説明することが基本です。画像を見ていない人にも何が描かれているのかが伝わるようにし、対策キーワードを不自然に詰め込まないようにしましょう。

それぞれについて解説していきます。

画像の内容や役割を簡潔に説明する

alt属性には、画像に何が写っているのか、何を伝えるための画像なのかを具体的に記述します。短くても内容が伝わる説明を意識しましょう。

例えば、コンテンツSEOの記事で見出しの下に挿絵を入れる場合は、「○○のイメージ画像」と定型的に書くよりも、イラストの内容を具体的に説明するのが基本です。画像の内容と自然に関連する場合は、対策キーワードを含めても問題ありません。

画像の例	alt属性の記述例
	SEOの検索をイメージしたパソコンのイラスト
	SEO対策や検索順位の改善に関する施策を表した図
	パソコンで検索する様子と検索窓のイメージ画像

画像が具体的な情報を伝えていない場合は、「○○のイメージ画像」のような表現も選択肢です。画像の内容に合わない説明を無理に付ける必要はありません。

キーワードを不自然に詰め込まない

alt属性に対策キーワードを入れること自体が目的ではありません。画像と関係のないキーワードを並べたり、同じ語句を繰り返したりすると、画像の説明として不自然になります。

例えば、SEO対策に関する図に「SEO対策 SEO会社 SEO集客 SEO検索順位」と詰め込むのは適切ではありません。「SEO対策の基本的な流れをまとめた図」のように、画像の内容が伝わる表現にしましょう。

画像内の文字は必要な情報を記述する

画像の中に文字が含まれている場合は、画像の役割に応じて必要な情報をalt属性に記述します。図解やインフォグラフィックなど、文字が情報伝達の中心となる画像では、重要な内容をテキストでも伝えることが大切です。

ただし、画像内の文字をすべて機械的に書き写す必要があるとは限りません。画像の目的や本文との重複を考慮し、ユーザーが理解するために必要な情報を優先しましょう。複雑な図表の場合は、本文で詳細を説明する方法もあります。

リンク画像はリンク先の目的を伝える

画像をクリックすると別ページへ移動する場合は、画像の見た目だけでなく、リンク先で何ができるのかが伝わるように記述します。

例えば、資料ダウンロードページへのリンク画像なら「SEO対策の資料をダウンロードする」のように、リンクの目的を表す説明が適しています。リンク画像のalt属性は、画像の説明に加えてリンクの機能を伝える役割も持ちます。

alt属性を設定する方法

alt属性は、HTMLのimg要素に直接記述するほか、WordPressの管理画面から設定できます。Webサイトの運用方法に合わせて、更新しやすい方法を選びましょう。

HTMLのimg要素に記述する

HTMLでは、img要素のalt属性に代替テキストを記述します。基本的な書き方は次のとおりです。

<img src="seo-guide.jpg" alt="SEO対策の基本を解説する資料">

src属性は画像ファイルの場所を指定し、alt属性は画像の代替テキストを指定します。画像の内容に合わせてテキストを書き換えてください。

WordPressのメディア設定から入力する

WordPressでは、画像の代替テキストを管理画面から入力できます。一般的には、次の手順で設定します。

画像ブロックの設定画面から代替テキストを入力できる場合もあります。使用しているテーマやエディターによって画面が異なるため、公開ページにも正しく反映されているか確認しましょう。

▶参照：WordPress公式ドキュメント「Image block」

alt属性が不要な画像は空欄にしてOK

すべての画像に説明文を付ける必要はありません。情報を伝える画像には適切な代替テキストを設定し、装飾だけを目的とする画像は空のalt属性にするのが基本です。

装飾目的の画像は空のalt属性にする

文章の区切りやデザイン上の装飾として使う画像は、空のalt属性を設定します。HTMLではalt=""と記述します。

<img src="decoration.png" alt="">

空のalt属性を設定すると、スクリーンリーダーがその画像を読み上げずに進めるため、不要な情報の繰り返しを防げます。alt属性そのものを省略するのではなく、空の値を指定することがポイントです。

情報を伝える画像は代替テキストを設定する

写真や図解、グラフなど、画像自体が情報を伝えている場合は、内容がわかる代替テキストを設定します。画像がなければ伝わらない情報をテキストで補うことが目的です。

例えば、商品の特徴を示す画像や、データの傾向を表すグラフなどは、画像の役割に合わせて説明します。複雑なグラフでは、alt属性に要点を記述し、詳しい数値や分析を本文で補足する方法も有効です。

画像の近くにある文章との重複を避ける

画像のすぐ近くに同じ内容の説明文がある場合は、alt属性で同じ情報を繰り返さないようにします。スクリーンリーダーで同じ内容が連続して読み上げられると、ユーザーにとって冗長になるためです。

画像が本文に新しい情報を加えていない場合は、装飾画像として空のalt属性にすることも検討しましょう。ただし、画像が本文とは異なる情報や機能を持つ場合は、その役割を説明する必要があります。

▶参照：W3C WAI「Decorative Images」

alt属性を確認する3つの方法

alt属性の設定状況は、ブラウザの検証機能、ページのソースコード、SEOツールなどで確認できます。設定したつもりでも、公開ページに反映されていない場合があるため、実際のHTMLを確認することが大切です。

ブラウザの検証機能で確認する

Google Chromeなどのブラウザに搭載されている検証機能を使えば、ページ上の画像にalt属性が設定されているか確認できます。

alt="..."のように値が入っていれば、そのテキストが設定されています。alt=""の場合は空のalt属性です。alt属性自体が見当たらない場合は、画像の役割に応じて設定が必要か判断しましょう。

ページのソースコードで確認する

ページのソースコードからも、alt属性の設定状況を確認できます。ブラウザでページのソースを表示し、alt=や画像ファイル名を検索すると、対象の記述を見つけやすくなります。

ただし、JavaScriptなどによって画像が動的に生成されるページでは、ソースコードだけでは公開時の状態を把握できないことがあります。その場合は、ブラウザの検証機能も併用しましょう。

SEOツールで設定漏れを確認する

SEOツールを使うと、サイト内の画像にalt属性が設定されていないページをまとめて確認できる場合があります。ページ数が多いサイトや、公開済みの記事を一括で点検したい場合に便利です。

ただし、ツールで未設定と判定された画像が、すべて修正対象になるとは限りません。装飾画像には空のalt属性が適切なため、機械的に文章を追加せず、画像の役割を確認して対応しましょう。

alt属性の設定漏れを防ぐ運用方法

alt属性の設定漏れを防ぐには、画像の用途別にルールを決め、公開前のチェックと公開済みページの見直しを習慣化することが重要です。担当者ごとに書き方がばらつかないよう、判断基準を共有しましょう。

画像の用途別に設定ルールを決める

画像の種類ごとに、alt属性の書き方を決めておくと運用しやすくなります。例えば、次のようにルールを整理できます。

画像の用途	設定ルール
内容を伝える写真	被写体や状況を具体的に記述する
図解・グラフ	画像の要点や伝えたい情報を記述する
リンク画像	リンク先や操作の目的を伝える
装飾画像	alt=""とする
見出し下の挿絵	イラストの内容を簡潔に説明する

ルールを作る際は、対策キーワードを必ず入れるといった一律の指定を避けましょう。画像の内容や役割を優先することで、自然でわかりやすい代替テキストになります。

公開前のチェックリストで確認する

記事を公開する前に、alt属性の設定状況を確認する工程を設けましょう。次の項目をチェックすると、設定漏れや不自然な記述を見つけやすくなります。

チェック項目を編集マニュアルや公開フローに組み込めば、担当者が変わっても一定の品質を保ちやすくなります。

公開済み記事を優先順位に沿って見直す

公開済みのページをすべて一度に修正するのが難しい場合は、優先順位を決めて対応しましょう。検索流入が多いページや、重要なサービスページ、画像検索からの流入を期待するページなどから確認する方法があります。

設定漏れを見つけたら、画像の役割に応じて修正します。空のalt属性が適切な装飾画像まで一律に変更する必要はありません。サイト全体の状況を把握し、効果と作業量のバランスを考えて進めましょう。

alt属性を設定しないとどうなるのか

alt属性を設定しないと、画像の内容をテキストで伝えられず、アクセシビリティや画像検索に影響する可能性があります。ただし、すべての画像で未設定が問題になるわけではなく、装飾画像には空のalt属性を設定するのが適切です。

画像の情報が伝わりにくくなる

情報を伝える画像にalt属性がないと、画像が表示されない場合やスクリーンリーダーを利用する場合に、画像の内容を把握しにくくなります。特に、図解や商品画像など、画像が重要な情報を担っているページでは注意が必要です。

一方、装飾画像は空のalt属性を設定することで、読み上げを省略できます。未設定の画像を見つけたら、まず画像の用途を確認しましょう。

画像検索やアクセシビリティに影響する

alt属性は、検索エンジンが画像の内容を理解するための手がかりの一つです。適切な代替テキストがなければ、画像の内容が十分に伝わらない可能性があります。

ただし、alt属性の有無だけで画像検索の掲載順位が決まるわけではありません。画像の内容やページとの関連性なども含めて最適化することが重要です。

alt属性とAI検索の関係性

AI検索を意識する場合も、alt属性を適切に設定し、画像の内容をテキストで伝えることは重要です。ただし、alt属性だけでAI検索の回答に引用されるわけではありません。本文や画像、ページ全体の情報をわかりやすく整えることが基本です。

AI検索でも画像と周辺テキストが重要

AI検索では、検索エンジンがページ内の情報を理解し、質問に関連する情報を回答に利用する場合があります。画像を掲載する際は、alt属性で画像の内容を説明するだけでなく、画像の近くにある本文でも必要な情報を補いましょう。

例えば、手順を示す図解なら、alt属性に図の概要を記述し、本文では具体的な手順や注意点を説明します。画像と文章がそれぞれ役割を持つように設計すると、情報を理解しやすいページになります。

alt属性だけでAI検索への引用は保証されない

alt属性を設定しても、AI検索の回答にページが引用されるとは限りません。GoogleはAI OverviewsやAIモードに表示されるための特別な最適化要件を設けておらず、通常のSEOの基本を満たすことを重視しています。

画像の代替テキストだけに注力するのではなく、本文の正確性や独自性、ページの技術的なアクセス性なども見直しましょう。

▶参照：Google検索セントラル「AI機能とウェブサイト」

alt属性に関するよくある質問

alt属性の文字数や画像ファイル名との違い、公開後の変更など、運用時に迷いやすいポイントを解説します。

Q1. alt属性は何文字以内で書けばいい？

alt属性に、すべての画像で適用される一律の文字数制限はありません。文字数を基準にするよりも、画像の内容や役割を簡潔に説明できているかを重視しましょう。

長すぎる説明は読み上げ時の負担になる場合があります。画像の要点を短くまとめ、複雑な図表などは本文で詳細を補足する方法も検討してください。

Q2. alt属性と画像ファイル名は何が違う？

alt属性は画像の内容をテキストで説明するもので、画像ファイル名は画像ファイルを識別するための名前です。どちらも検索エンジンが画像を理解する手がかりになりますが、役割は異なります。

例えば、ファイル名をseo-guide.jpgとした場合でも、alt属性には「SEO対策の基本を解説する資料」のように、画像の内容を具体的に記述できます。ファイル名だけで代替テキストの役割を果たせるわけではありません。

Q3. alt属性は公開済みのページでも変更できる？

alt属性は公開済みのページでも変更できます。WordPressなどのCMSで設定を修正し、公開ページのHTMLに反映されているか確認しましょう。

変更後は、画像の内容に合った説明になっているかもチェックしてください。修正しただけで検索順位が上がるとは限らないため、画像やページ全体の改善とあわせて取り組むことが大切です。

Q4. 同じ画像を複数のページで使う場合はalt属性は同じでいい？

同じ画像でも、掲載するページや画像の役割によってalt属性を変える場合があります。画像が各ページで何を伝えているかを考え、必要な情報を記述しましょう。

例えば、ある図解が一方のページでは手順の説明、別のページでは施策全体の概要として使われる場合、それぞれの文脈に合わせた説明が適しています。ただし、無理に表現を変える必要はなく、画像の役割が同じなら同じ説明でも問題ありません。

まとめ｜alt属性を正しく設定して画像SEOを強化しよう

alt属性は、画像の内容をテキストで伝え、アクセシビリティや画像検索を支える重要な要素です。画像の役割に応じて適切に設定し、ページ全体の品質改善とあわせて取り組みましょう。

alt属性の設定に加えて、SEO対策全体の進め方を理解することも大切です。コンテンツの改善やサイトの最適化に取り組みたい方は、ぜひ「SEO基本教科書の無料資料ダウンロード」をご活用ください。