Webサイトへ画像を掲載するとき、alt属性を設定したほうがよいと知っていても、何を書けばよいのか迷うことは少なくありません。
「画像の説明を書けばよいのか」「SEOキーワードを含めるべきか」「すべての画像に文章を入れる必要があるのか」など、判断しにくい点が多いためです。
alt属性は、検索順位を上げるためだけの設定ではありません。
画像の内容や役割を文字で伝え、画像を見られない利用者や検索エンジンによるページの理解を助けるための情報です。
そのため、画像の見た目を機械的に説明するのではなく、ページ内でその画像がどのような意味を持っているかを考える必要があります。
内容を伝える画像には具体的な代替テキストを設定する一方、意味を持たない装飾画像ではalt属性を空にするなど、画像の役割に応じた使い分けが重要です。
適切に設定すれば、アクセシビリティを改善しながら、Google画像検索やページ内容の理解を支える施策にもなります。
一方で、キーワードを過剰に詰め込んだり、すべての画像へ同じ文章を設定したりすると、利用者にとって分かりにくいページになりかねません。
そこで今回は、alt属性の基礎知識から画像別の書き方、設定方法、確認手順までを実践しやすい順番で整理しました！
自社サイトの画像を見直し、SEOと使いやすさを両立させるための判断基準として活用できます。
alt属性の役割とSEOへの影響を正しく理解しよう！
alt属性を適切に設定するには、最初に役割とSEOへの影響を切り分けて理解することが大切です。
alt属性は画像の代わりとなるテキストであり、単純に対策キーワードを記載するための入力欄ではありません。
画像が表示されない場合や、スクリーンリーダーでページを利用する場合に、画像が伝えていた情報を補います。
また、検索エンジンが画像の内容や周辺の文章との関係を把握するときの手がかりにもなります。
ただし、alt属性を設定しただけで、Webページの検索順位が大幅に上がるわけではありません。
本文の品質や検索意図との一致、内部リンク、ページ表示速度などと同様に、検索エンジンと利用者が内容を理解しやすい状態を作る基礎施策として捉える必要があります。
まずはalt属性、title属性、キャプション、画像ファイル名の役割を整理し、目的に合った情報を適切な場所へ記載しましょう。
alt属性とは画像の内容を伝える代替テキスト！
alt属性とは、HTMLのimg要素に記述する画像の代替テキストです。
基本的には、<img src=”画像のURL” alt=”画像の内容を表す文章”>のように設定します。
通信エラーやファイルの削除などによって画像を読み込めない場合は、設定したテキストが画像の代わりとして表示されることがあります。
スクリーンリーダーなどの支援技術でも読み上げられるため、視覚だけでは画像を確認できない利用者に、画像が持つ意味や機能を伝えられます。
たとえば、商品の写真であれば商品名や特徴を伝え、操作ボタンとして使う画像であれば実行される操作を示します。
検索エンジンにとっても、alt属性は画像のテーマを理解する材料の一つです。
ただし、画像の見た目を細かく描写すればよいとは限りません。
ページ内で必要な情報が「商品の色」なのか、「グラフの結論」なのか、「リンク先」なのかによって、適切な文章は変わります。
なお、「altタグ」という名称も広く使われていますが、HTML上ではaltは独立したタグではなく、img要素に付ける属性です。
そのため、より正確な名称はalt属性または代替テキストです。
alt属性がSEOに役立つ3つの理由を押さえよう！
alt属性がSEOに役立つ理由は、主に画像内容の理解、ページ内容の補足、画像リンクの説明という3点にあります。
検索エンジンは画像そのものだけでなく、alt属性、画像の前後にある文章、見出し、キャプション、ファイル名などを組み合わせて内容を判断します。
画像の内容と一致したalt属性を設定すれば、画像と検索語句の関連性を伝えやすくなり、Google画像検索に表示される可能性を支えられます。
また、本文で説明している内容と画像の関係が明確になるため、ページ全体のテーマを理解する補助情報にもなります。
画像をリンクとして使用している場合は、alt属性がリンク先を説明するアンカーテキストに近い役割を持ちます。
そのため、リンク画像のalt属性を空にすると、リンクの目的が検索エンジンや支援技術へ伝わりにくくなる場合があります。
ただし、alt属性だけを修正して通常検索の順位が急上昇するとは限りません。
検索順位を直接操作する裏技ではなく、画像SEOとアクセシビリティを支える設定として取り組むことが大切です。
画像の内容を正確に説明した結果としてキーワードが自然に含まれる状態を目指し、順位だけを目的とした不自然な文章は避けましょう。
title属性やキャプションとの違いを整理しよう！
alt属性と混同されやすいものに、title属性、キャプション、画像ファイル名があります。
alt属性は、画像を確認できない状況でも、画像の意味や機能を代替できるようにする情報です。
一方、title属性は要素に補足情報を持たせるための属性ですが、利用環境によって表示や読み上げのされ方が異なるため、alt属性の代わりにはなりません。
重要な情報をtitle属性だけに記載すると、マウスを使わない利用者やスマートフォン利用者へ届かない可能性があります。
キャプションは、画像の下などに表示され、画像を見ることができる利用者にも共有される文章です。
撮影場所、データの条件、図の背景、注意事項など、画像の理解を深める補足説明に向いています。
画像ファイル名も内容を伝える手がかりになりますが、画面上の画像を代替する文章ではありません。
たとえば、IMG0001.jpgよりもalt-seo-setting.jpgのような分かりやすい名称が望ましいものの、それだけでalt属性の役割を満たすわけではありません。
同じ文章をalt属性、title属性、キャプションへ一括で入れるのではなく、それぞれの目的に応じて情報を分けることが重要です。
画像の役割に合わせてalt属性を書き分けよう！
alt属性の内容は、画像の種類ではなく、そのページで画像が果たしている役割を基準に決めます。
同じ企業ロゴでも、会社名を示す画像として掲載されている場合と、トップページへ戻るリンクとして使われている場合では、求められる説明が異なります。
まず、画像を取り除いたときに、本文の意味や操作方法が失われるかを確認しましょう。
情報が不足するなら、画像は内容を伝える画像または機能を持つ画像であり、適切なalt属性が必要です。
取り除いても内容の理解や操作に影響がなければ、装飾画像として空のalt属性を設定できる可能性があります。
写真、商品画像、リンク画像、ボタン、グラフ、図解などを一律に処理せず、それぞれについて「何を伝える画像なのか」を考えることが重要です。
画像だけで重要な情報を伝えきろうとせず、複雑な内容は本文、表、キャプションなども組み合わせて補いましょう。
内容を伝える画像には具体的な説明を入れよう！
写真、イラスト、商品画像、図解など、本文を理解するうえで必要な画像には、画像の要点が伝わるalt属性を設定します。
判断するときは、画像が表示されない状態でalt属性だけを読んでも、本文の理解に必要な情報を補えるかを確認します。
たとえば、商品紹介ページに赤い革製バッグの画像を掲載する場合は、「バッグ」だけでなく、「赤い本革製のショルダーバッグ」のように、選択や理解に必要な特徴を含めます。
一方、社員紹介記事の写真であれば、服装や背景を細かく説明するより、人物名や役職を示すほうが文脈に合う場合があります。
alt=”画像”やalt=”写真”だけでは、何が写っているのか分かりません。
画像であることは支援技術側から伝わることも多いため、「画像：」「写真：」といった前置きも通常は不要です。
画像内に料金、開催日時、手順などの重要な文字が含まれる場合は、必要な内容をalt属性または本文にも記載します。
ただし、長い文章をすべてalt属性へ詰め込むと読みづらくなります。
画像の要点を短く示し、詳しい情報は本文でも確認できる構成にすると、利用者にも検索エンジンにも伝わりやすくなります。
装飾目的の画像はalt属性を空にしよう！
区切り線、背景模様、意味を持たないアイコンなど、見た目を整えることだけを目的とした画像には、alt=””を設定します。
空のalt属性を設定すると、スクリーンリーダーが画像の内容を読み上げず、本文の理解に必要な情報へ集中しやすくなります。
ここで重要なのは、alt属性を削除するのではなく、値を空にしたalt属性を明示することです。
alt属性そのものを省略すると、環境によってはファイル名などが読み上げられ、利用者に不要な情報を与える可能性があります。
装飾画像かどうか迷った場合は、画像を非表示にしても本文の意味や操作方法が変わらないかを確認します。
消しても情報が欠けない場合は、装飾として扱える可能性があります。
ただし、見た目が単純なアイコンでも、注意、警告、完了、エラーなどの状態を示している場合は情報を持っています。
その場合は空にせず、状態や意味を伝える必要があります。
また、デザイン目的の画像は可能であればCSSの背景画像として設置すると、文章構造と装飾を分けやすくなります。
画像の形ではなく、ページ内で意味を持つかどうかを基準に判断しましょう。
リンク画像やボタン画像は移動先と操作を伝えよう！
リンクやボタンとして使われる画像では、外見よりもクリックしたときに何が起こるかをalt属性で伝えます。
たとえば、封筒のアイコンを使った問い合わせボタンであれば、alt=”封筒のイラスト”ではなく、alt=”お問い合わせ”とするほうが目的を理解しやすくなります。
資料請求バナーなら「サービス資料を請求する」、ダウンロードボタンなら「料金表をダウンロードする」など、移動先や操作結果を具体的に示します。
企業ロゴがトップページへのリンクになっている場合は、会社名だけでも意味が通じることがありますが、サイト構成に応じて「会社名トップページ」とすると目的が明確になります。
一方、画像の隣に同じリンク先を示すテキストがあり、画像と文字が一つのリンクにまとめられている場合は、内容の重複を防ぐために画像側のalt属性を空にできることがあります。
スクリーンリーダーで同じ言葉が繰り返されると、操作しにくくなるためです。
「こちら」「詳しくはこちら」といった表現だけでは、リンク先の内容を判断できません。
画像を見なくても移動先や操作を理解できる文章を設定し、リンク先のページ内容とも一致させましょう。
グラフや図解は結論が伝わる説明にしよう！
グラフや図解のalt属性では、色、形、配置を順番に説明するより、画像から読み取ってほしい結論や関係性を優先します。
たとえば、右肩上がりの折れ線グラフに対して「青い線が左下から右上へ伸びている」と書くだけでは、情報の意味が伝わりません。
「画像検索からの流入が1月から6月にかけて増加している」のように、グラフが示す結果を記載すると理解しやすくなります。
比較に使う具体的な数値が重要な場合は、alt属性だけに情報を閉じ込めず、本文や表にも掲載します。
複雑な組織図、フロー図、手順図では、すべての要素を長文でalt属性へ入れると、かえって内容を把握しにくくなります。
alt属性では「alt属性を設定する判断手順を示したフロー図」のように概要を伝え、詳細は画像の近くに文章で用意する方法が有効です。
画像内の文字をそのまま全文転記するのではなく、読者が判断や行動に必要とする情報を選びます。
短い代替テキストと詳しい本文を組み合わせることが、複雑な画像を分かりやすく伝えるポイントです。
SEOと読みやすさを両立する書き方・設定・確認方法を実践しよう！
alt属性は、画像の役割を判断したうえで、短く具体的な文章に整えます。
文字数だけを基準にするのではなく、画像が伝える情報を過不足なく説明できているかを重視しましょう。
検索キーワードを含める場合も、画像の内容と自然に一致していることが前提です。
キーワードを不自然に繰り返すと、スクリーンリーダーでの読み上げが分かりにくくなり、検索エンジンから過剰な最適化と判断されるおそれもあります。
設定後は、WordPressなどの管理画面に入力しただけで完了とせず、実際に公開されたHTMLへ反映されているかを確認します。
さらに、重要なページから順番に、未設定、重複、キーワードの羅列、内容との不一致を点検します。
alt属性だけで画像SEOを完結させず、周辺の文章、ファイル名、画像品質、表示速度、独自性も合わせて改善することが重要です。
短く具体的で文脈に合うalt属性を書こう！
分かりやすいalt属性を書くには、画像を一文で説明する感覚で、必要な情報を簡潔にまとめます。
ただし、画像だけを見て外見を説明するのではなく、ページ内で何を伝えるために掲載されているかを考えます。
たとえば、同じオフィスの写真でも、採用ページでは職場環境を示し、会社案内ページでは所在地や設備を示している可能性があります。
掲載目的が変われば、適切なalt属性も変わります。
「画像」「写真」「イラスト」などの言葉は、内容を説明していないため、原則として省きます。
ただし、写真とイラストの違い自体が情報として重要な場合は、文脈に応じて含めても問題ありません。
また、「きれいな」「すてきな」「魅力的な」といった主観的な表現より、色、形、商品名、人物名、状態などの具体的な情報を優先します。
文章を長くしすぎず、画像の近くにある本文と同じ説明をそのまま繰り返さないことも大切です。
画像がなくても伝わる情報は本文に任せ、alt属性では不足する部分を補います。
画像の目的、周辺の文章、読み上げ時の分かりやすさを確認しながら調整しましょう。
SEOキーワードは自然に含めよう！
alt属性へSEOキーワードを含めること自体は問題ありませんが、画像の内容を正確に説明できる場合に限ります。
たとえば、alt属性の設定画面を示す画像なら、「WordPressでalt属性を設定する画面」のように、検索キーワードが自然に入ります。
一方、人物写真へ「alt属性 SEO 画像SEO 検索順位」のような関連語を詰め込んでも、画像の内容は伝わりません。
このような記述は利用者の体験を損ない、検索エンジンにも不自然な最適化として受け取られる可能性があります。
対策キーワードを必ず入れるというルールを設けるのではなく、画像を正確に説明した結果として自然に含まれる状態を目指しましょう。
地域名、商品名、サービス名も同様です。
画像に写っていない情報や、ページの順位を上げるためだけの言葉を追加してはいけません。
同じページに複数の画像がある場合も、すべてへ同じキーワードを設定するのではなく、それぞれの違いが伝わる文章にします。
検索キーワードより先に、画像を確認できない利用者へ何を伝えるべきかを考えることが重要です。
役に立ち、内容が豊かで、ページの文脈と一致した説明に整えれば、SEOとアクセシビリティの両立につながります。
よくあるNG例を修正できるようにしよう！
alt属性で特に多い間違いは、抽象的すぎる説明、キーワードの羅列、同じ文章の使い回しです。
alt=”画像”やalt=”商品写真”だけでは、画像の具体的な内容を判断できません。
一方、alt=”SEO SEO対策 画像SEO alt属性 上位表示”のようにキーワードを並べても、利用者に必要な情報にはなりません。
複数の画像へ記事タイトルや商品名を一括設定する方法も注意が必要です。
作業時間は短縮できますが、色や角度、機能、手順など、画像ごとの違いが伝わらなくなります。
ファイル名をそのままalt属性へコピーする運用も、IMG1234などの意味を持たない文章や、不自然な記号を生みやすいため避けましょう。
装飾画像へ長い説明を設定する一方で、グラフや商品画像を空にするなど、画像の役割と設定が逆になっているケースもあります。
画像周辺の本文と矛盾する説明や、実際には写っていない機能、価格、地域名を加えることも不適切です。
画像を非表示にしてalt属性を読んだとき、誤解なく意味や操作を理解できるかを基準に修正すると、問題を見つけやすくなります。
HTMLや管理画面から正しく設定しよう！
HTMLでは、img要素の中へalt=”画像の説明”を記述します。
情報を伝える画像には内容に合う文章を入れ、装飾画像にはalt=””を設定します。
空にするときは、引用符の間へスペースを入れず、完全に空の状態にします。
WordPressでは、画像を選択したときに表示される「代替テキスト」欄から入力できます。
ただし、「タイトル」「キャプション」「説明」と「代替テキスト」は役割が異なるため、入力欄を間違えないように注意が必要です。
利用しているテーマやページ作成ツールによっては、メディアライブラリに保存した文章が、すでに配置済みの画像へ自動反映されない場合があります。
設定後は公開ページのソースやブラウザの開発者ツールを確認し、実際のimg要素へalt属性が出力されているかを確かめましょう。
CSSの背景画像にはalt属性を設定できません。
商品名、料金、操作方法などの重要な情報を背景画像だけで表現せず、HTMLの文章としても掲載します。
レスポンシブ画像を使う場合も、画面幅ごとに表示画像が変わることを考慮し、最終的なimg要素へ適切なalt属性が設定されている状態を保ちましょう。
公開後にalt属性を確認して改善しよう！
alt属性は設定して終わりではなく、公開後の表示とHTMLを確認することが重要です。
まず、ブラウザの開発者ツールまたはページのソースを開き、img要素にalt属性が出力されているかを確認します。
管理画面へ入力していても、テーマやプラグインの処理によって、公開ページへ正しく反映されていない場合があります。
次に、画像を非表示にした状態で、本文の意味やリンクの操作方法を理解できるかを確認します。
可能であればスクリーンリーダーやブラウザのアクセシビリティ検査機能も使い、読み上げの重複や不自然な長文がないかを点検します。
画像数の多いサイトでは、クローラーツールを使って、alt属性の未設定、空欄、重複、長すぎる文章を一覧化すると効率的です。
ただし、alt=””は装飾画像に必要な正しい設定でもあるため、空欄をすべて誤りと判断してはいけません。
Google Search Consoleでは、検索タイプを画像に切り替え、画像検索における表示回数やクリック数の変化を確認できます。
商品ページ、主要なサービスページ、流入の多い記事、独自図解のある記事など、事業への影響が大きいページから優先して改善しましょう。
alt属性だけに頼らず画像全体を最適化しよう！
画像SEOでは、alt属性だけでなく、画像の周辺にある文章や技術的な設定も重要です。
画像の近くには、画像と関連する見出しや本文を配置し、何を説明するための画像なのかが自然に分かる構成にします。
ファイル名はIMG0001.jpgのような意味のない文字列を避け、画像内容を短く表す名称にすると管理もしやすくなります。
ただし、ファイル名へキーワードを大量に詰め込む必要はありません。
画像は表示サイズに合う寸法へ調整し、適切な形式と圧縮を使ってファイル容量を抑えます。
高画質な画像でも読み込みに時間がかかれば、ページの使いやすさを損なうためです。
重要な画像は、検索エンジンが見つけやすい標準的なimg要素で設置します。
サイトの構成や画像数に応じて、画像サイトマップ、商品やレシピなどの構造化データ、画像ライセンス情報の整備も検討できます。
他サイトと同じ素材だけに頼らず、独自の写真、比較表、検証結果、図解を作成すれば、ページの専門性や独自性も高められます。
alt属性、周辺テキスト、速度、発見しやすさ、独自性をまとめて改善することが、画像SEOの成果につながります。
まとめ
alt属性は、画像を見ることができない利用者と検索エンジンに、画像の意味や機能を伝えるための情報です。
検索順位だけを目的にキーワードを入れるのではなく、アクセシビリティとページ内容の理解を改善することを優先します。
写真、商品画像、グラフなど、情報を伝える画像には、文脈に合った具体的な説明を設定しましょう。
一方、区切り線や背景模様などの装飾画像には、alt=””を設定して不要な読み上げを防ぎます。
リンク画像やボタン画像では、見た目ではなく、移動先や実行される操作を伝えることが重要です。
キーワードは画像の内容と一致する場合だけ自然に含め、羅列や使い回しを避けます。
設定後は公開ページのHTMLを確認し、未設定、重複、内容との不一致がないかを点検します。
すべての画像を一度に修正するのが難しい場合は、商品画像、サービス紹介の図解、流入の多い記事、リンクとして使う画像から着手すると効率的です。
さらに、周辺の文章、ファイル名、画像容量、オリジナル画像の活用も合わせて見直します。
画像が表示されなくても内容や操作を理解できるかという基準を持てば、alt属性の要否や書き方を判断しやすくなります。
Webマーケにお悩みなら、「AI×経験×アイディア」のぎあはーとへ！
合同会社ぎあはーとは「AI×プロの経験×アイディア」で強いマーケ戦略を着実にお届けする会社です。
| ・月間売上を前年比277.4%に （3,479,415円→9,653,169円） （上場アパレルメーカーM社：2021年 運用1年） ・新規サイトで月間コンバージョン数を31件へ （ メディア系SaaSツールC社：2025年 施策10ヶ月） ・Webイベントで1,330名の参加者集客 （メディア系SaaSツールC社：2026年 イベント期間30日） |
こんな実績を持つマーケティングのプロが、他にできない強い施策を素早く回転させます。
戦略からコンテンツ運用、結果分析までをワンストップで受けつけております。また、10本で8,8000円という格安にてSEO記事制作もお受けしております。
料金表
| 内容 | 基本料金 |
| マーケティング顧問業務 LLMO戦略立案・コンテンツ制作・レポート | 月額・要お見積もり |
| SEO記事の制作1本（スポット依頼） 5,000字以上、追加料金なし キーワード選定等ワンストップ | 9,900円（税込） |
| SEO記事の制作10本（スポット依頼） 合計50,000字以上、追加料金なし キーワード選定等ワンストップ | 88,000円（税込） |
まずはオンライン面談によるお見積もりや無料のサイト診断ができますので、ぜひお気軽にご相談ください！
