alt属性とは｜SEO・アクセシビリティへの影響と正しい書き方

alt属性は、画像に代替テキストを付与するHTMLの属性です。正しく設定すれば、検索エンジンへの画像情報の伝達とアクセシビリティ向上を同時に実現できます。一方、設定漏れや誤った記述はSEO評価の損失につながります。

この記事では、alt属性の基本的な意味から、SEOへの影響・正しい書き方・よくあるNG例・実際の確認方法まで、Web担当者・ブロガー・エンジニアが現場で使える知識を体系的に解説します。

alt属性とは

alt属性（オルト属性）は、HTMLのimgタグに付与する「代替テキスト」のことです。画像が表示されないとき、ブラウザ上にテキストを代わりに表示します。また、検索エンジンのクローラーや視覚障害者向けのスクリーンリーダーに画像の内容を伝える重要な役割も担っています。

alt属性の基本の書き方

記述形式は以下のとおりです。imgタグの中にalt="〇〇"を加えるだけで設定できます。

<img src="画像のURL" alt="画像の内容を説明するテキスト">

たとえば、東京スカイツリーの写真であれば次のように書きます。

<img src="tokyo-skytree.jpg" alt="夜景の東京スカイツリー">

alt属性はimgタグ内に記述する属性であり、省略すると検索エンジンやスクリーンリーダーに画像の内容が伝わりません。Googleも公式ガイドラインで、alt属性の適切な記述を推奨しています。
(出典: Google 検索セントラル – 画像SEO ベストプラクティス)

「altタグ」「altテキスト」との呼び方の違い

現場では「altタグ」「altテキスト」「代替テキスト」など複数の呼び方が使われます。ただし、正確な意味は少し異なります。

• alt属性：HTMLのimgタグに付与する「属性（アトリビュート）」の正式名称
• altタグ：厳密にはimgタグ自体を指すため誤用だが、現場では広く使われる通称
• altテキスト・代替テキスト：alt属性に入力するテキスト内容を指す表現

いずれも同じものを指していると理解して問題ありません。ただし、技術文書やSEOの文脈では「alt属性」が正式な呼称です。

altの読み方と語源

altは英語の「alternative（代替）」の略で、読み方は「オルト」です。「アルト」と読まれることもありますが、Web業界では「オルト」が一般的です。

キーボードの「Altキー」も同じ語源で「オルト（代替）キー」を意味します。覚え方のヒントとして押さえておくと便利です。

alt属性を設定すべき3つの理由

alt属性を設定する理由は、SEO・アクセシビリティ・UXの3軸に整理できます。「なんとなく書いておくもの」ではなく、それぞれに明確な根拠があります。3つの理由を順番に確認していきましょう。

理由①：検索エンジンのクローラーが画像の内容を読み取れる

検索エンジンのクローラーは、画像そのものを人間のように見て理解することができません。そのため、alt属性に書かれたテキストを手がかりに、画像が何を示しているのかを判断します。

Googleは画像内容を推測する際に「alt属性・画像ファイル名・画像周辺テキスト」の3要素を組み合わせて使っており、なかでもalt属性が最も重要な情報とされています。
(出典: Google 検索エンジン最適化（SEO）スターターガイド)

GoogleはOCR技術で画像内の文字も認識できますが、alt属性で補足することでより正確な理解につながると公式が推奨しています。クローラーが画像を正しく把握することでページ全体のコンテンツ評価精度が上がり、間接的なSEO貢献が期待できます。

alt属性はランキングを直接決める要因ではありません。ただし、alt属性なしではクローラビリティ（クローラーの情報収集しやすさ）が低下し、コンテンツ品質の評価が下がるリスクがあります。

理由②：スクリーンリーダーが音声で読み上げアクセシビリティが向上する

スクリーンリーダーとは、視覚障害者がWebページを利用する際に画面の内容を音声で読み上げるソフトウェアです。alt属性に書かれたテキストが、そのまま音声として読み上げられます。

全盲のユーザーはalt属性の音声を通じて画像の内容を理解し、弱視のユーザーは拡大表示や点字変換でテキスト情報を取得します。alt属性がなければ、画像の前後で突然情報が途切れてしまいます。

Webコンテンツのアクセシビリティ基準である「JIS X 8341-3:2016」（WCAG 2.0に準拠）では、画像などの非テキストコンテンツに代替テキストを提供することが達成基準として定められています。
(出典: ウェブアクセシビリティ基盤委員会（WAIC）ガイドライン一覧)

民間サイトへのアクセシビリティ対応は現状「努力義務」ですが、適合レベルAAへの準拠が推奨されています。政府機関・公的機関には準拠が求められており、今後は民間にも義務化の動きが広がる可能性があります。
(参考: デジタル庁 ウェブアクセシビリティ導入ガイドブック)

理由③：画像の読み込みエラー時にユーザーへ情報を伝えられる

通信環境の悪化や画像パスの誤りにより画像が表示されない場合、ブラウザはimgタグがある位置にalt属性のテキストを代替表示します。alt属性がなければ、その場所はただの空白になってしまいます。

「どんな画像か」をテキストで伝えることで、画像が表示されない状態でもUX（ユーザー体験）を維持でき、離脱を防ぐ効果があります。

特に注意が必要なのは、サイト名やページタイトルを画像で表現している場合です。alt属性がなければ、一部のブラウザやGoogle翻訳の環境ではサイトの内容すら伝わらなくなるリスクがあります。

どの画像にalt属性が必要か

alt属性はすべての画像に同じように設定するのではなく、画像の役割に応じて対応を変えることが重要です。画像の種類ごとの基本原則と設定優先順位を整理しておくことで、漏れのない対応ができます。

画像の役割による基本原則

画像はその用途によって、alt属性の扱いが異なります。コンテンツの理解に関わる画像には説明テキストを、装飾目的の画像には空値を設定するのが基本原則です。

• コンテンツ画像（写真・図解）：内容を具体的に説明するテキストを設定する
• リンク画像（ボタン・バナー）：リンク先のページ内容や操作を説明するテキストを設定する
• テキスト入り画像（インフォグラフィックなど）：画像内のテキストを書き起こす
• 装飾のみの画像：alt=""で空値を設定し、スクリーンリーダーにスキップさせる

なお、imgタグからalt属性そのものを削除するのはNGです。装飾画像であっても属性は残し、alt=""と空値にするのが正しい対応です。属性がないと、スクリーンリーダーがファイル名を読み上げてしまう場合があります。

設定優先順位の判断基準

すべての画像に同じ手間をかける必要はありません。優先度の高い順に設定を進めることが効率的です。

• コンテンツ画像（写真・図解）：内容を具体的に説明する
• リンク画像（ボタン・バナー）：リンク先のページ内容や操作を説明する
• テキスト入り画像（インフォグラフィックなど）：画像内のテキストを書き起こす
• 装飾画像：alt=""で空値を設定し、スクリーンリーダーにスキップさせる

alt属性がSEOに与える効果

alt属性は「設定するだけで検索順位が上がる」魔法の要素ではありません。ランキングへの作用は間接的ですが、複数の経路でSEOに貢献します。Googleの公式SEOスターターガイドでもalt属性の活用が明確に推奨されており、画像検索・リンク評価・ページ理解の3軸に加え、AI検索との関係も重要になっています。

Google画像検索での露出機会が増える

alt属性を適切に設定すると、Google画像検索での上位表示が期待できます。これはGoogle公式SEOスターターガイドにも明記されている基本施策です。

Googleはalt属性・画像ファイル名・周辺テキストの組み合わせで画像内容を理解し、検索結果に反映させます。単体の要素ではなく、これらが整合していることが重要です。

アパレル・家具・食品など、視覚で商品を確認したいユーザーが多いジャンルでは、画像検索が有力な集客チャネルになります。購入前に画像で確認したいユーザーはコンバージョン（購入・問い合わせ）に近い段階にいることが多く、質の高いトラフィックを獲得しやすい点が特徴です。

前提条件として、Googlebotが画像にアクセスできる状態（robots.txtでブロックしていない）が必要です。設定後はGoogle画像検索SEOベストプラクティスも合わせて確認しましょう。

画像リンクのアンカーテキストとして評価される

画像にリンクを設定している場合、そのalt属性はテキストリンクのアンカーテキストと同様に扱われます。これもGoogle公式SEOスターターガイドに明記されている重要な仕様です。

クローラーはアンカーテキストをリンク先ページのテーマ把握に活用します。そのため、バナー・アイコンボタン・ヘッダーロゴなどリンクを兼ねる画像には、ぜひalt属性を設定してください。内部リンクのSEO対策として特に効果的な場面です。

キーワードを詰め込んだalt属性は「不自然なリンク」としてGoogleガイドライン違反のリスクがあります。画像内容を自然に説明する文言にとどめることが大切です。

ページ全体のテーマ・文脈理解をサポートする

Googleはalt属性を、ページの文脈を把握するための材料の一つとして使っています。alt属性に記述されたキーワードが、ページ全体のテーマ理解を補助し、検索クエリとのマッチ精度向上に間接的に寄与します。

ただし、alt属性だけが独立して評価されるわけではありません。画像の配置位置・周辺テキスト・キャプション（figcaption）もGoogleが画像内容を把握する際の参考情報になります。alt属性と周辺テキストの内容が整合しているかを意識して記述することが重要です。

alt属性を適切に記述することでページのコンテンツ評価精度が向上し、検索順位への好影響が期待できます。テキストと画像が互いにテーマを補強し合う構成を意識しましょう。

AI検索・Googleレンズ時代における画像理解への影響

Googleレンズはカメラや画像をAIが分析して関連情報を検索できるサービスです。Googleの公式ブログ（2023年3月）によれば、世界中で月間100億回以上利用されており、ビジュアル検索の規模は継続的に拡大しています。

2026年現在、Google AI Overviews（旧SGE）と画像検索が統合され、通常のテキスト検索でも関連画像が同時提示されるケースが増えています。画像検索とテキスト検索の境界が曖昧になる中、alt属性による画像内容のテキスト化はGoogleの画像理解を補助する基本施策として引き続き有効です。

GoogleレンズはOCR技術で画像内テキストも認識できます。しかしalt属性で補足することでより正確な理解につながると公式が推奨しており、バナー・インフォグラフィックなどテキストを含む画像へのalt属性設定は特に重要といえます。

Googleレンズ経由のトラフィックはGA4のトラフィック獲得レポートで「lens.google.com」として確認できる場合があります。ただしGA4の仕様変更により確認方法が変わることがあるため、定期的に最新状況を確認することをおすすめします。

alt属性とtitle属性の違い

alt属性とtitle属性は、どちらも画像に付与できるため混同されがちです。しかし、付与できる要素・表示タイミング・SEOへの寄与度はまったく異なります。

「alt属性を設定したのにツールチップが表示されない」という疑問があれば、それはtitle属性と混同している可能性が高いです。以下の対比表で両者の違いを整理しましょう。

比較項目	alt属性	title属性
付与できる要素	imgタグ（画像）のみ	画像・テキスト・リンクなど ほぼすべてのHTML要素
表示タイミング	画像が表示されないとき、またはスクリーンリーダーによる読み上げ時	マウスオーバー（カーソルを乗せた）時のツールチップ表示
主な役割	画像の内容を代替するテキスト情報（アクセシビリティ・SEOに直結）	補足説明・追加情報のツールチップ表示（主にUX補助）
SEOへの寄与度	高い（Googleが公式に活用を推奨。画像検索やリンク画像のアンカーテキスト代替として機能）	限定的（UX向上を通じた間接効果にとどまる）
記述の必要性	コンテンツ画像・リンク画像には基本的に必須。装飾画像はalt=""と空値を設定	必須ではなく、補足説明が必要な場合のみ設定

Googleは公式のSEOスターターガイドでalt属性の適切な設定を推奨しています。一方、title属性のSEO効果は限定的です。
(出典: Google 検索エンジン最適化（SEO）スターターガイド)

「alt属性を設定してもツールチップが表示されない」という疑問は、title属性と混同していることが原因です。ツールチップ（吹き出し）を表示させたい場合はtitle属性を使います。alt属性の役割はあくまで「画像の代替テキスト」であり、ツールチップの表示とは無関係です。

title属性を多用すると、マウスオーバーのたびに吹き出しが表示されてページが見にくくなるリスクがあります。補足説明が本当に必要な箇所のみに絞って使いましょう。

alt属性の効果的な書き方

alt属性の書き方には「正確に・簡潔に・キーワードは控えめに」という3原則があります。Google検索セントラル「わかりやすい代替テキストを使用する」でも、画像の内容を明確に伝えることが最優先と明記されています。まずは書き方のルールを押さえましょう。

画像の内容を具体的かつ簡潔に説明する

alt属性は「画像が見えない状態でも内容がイメージできる文章」を目指して書きます。単語の羅列ではなく、端的な一文で記述するのが基本です。Googleのクローラーは単語の羅列を正確に理解しにくいとされているため、文章として意味が通る表現にしましょう。

画像の内容と直接関係のないキーワードや、ファイル名のままの記述、ページタイトルの流用はNGです。「何が写っているか・何を伝えているか」を起点に、わかりやすく簡潔な表現でまとめると、ユーザーにもクローラーにも伝わりやすくなります。

対策キーワードを自然に含め、詰め込みすぎない

画像の内容と関連するキーワードを自然な文章の中に盛り込むことはSEO上有効です。「重要語→特徴→補足」の順で組み立てると読みやすく、検索意図にも合いやすくなります。

ただし、キーワードを羅列するだけのalt属性はGoogleの品質ガイドライン違反となります。スパムとみなされ、インデックス削除や順位下落のリスクがあることはGoogle SEOスターターガイドにも明記されています。「キーワードを入れること」より「画像を正確に説明すること」を優先しましょう。

文字数は125文字以内（理想は50〜80文字）に収める

HTMLの仕様上、alt属性の文字数に公式な上限規定はありません。ただし、スクリーンリーダーの読み上げ効率やSEO観点から、英字換算で125文字以内が推奨される目安とされています（Google公式の明示的な数値ではなく、各ツールのガイドラインに由来する参考値です）。

長すぎると画像の意味が検索エンジンに伝わりにくくなり、スクリーンリーダー使用ユーザーにとっても情報過多になります。日本語の場合は50〜80文字程度を目安に、必要な情報をコンパクトにまとめるのが実践的な基準です。

「キーワードを2〜3語・20〜40文字程度」という目安を紹介しているガイドもありますが、あくまで参考値です。文章として自然に読めることを優先してください。

画像の種類別・alt属性の良い例とNG例

alt属性の書き方は画像の役割によって変わります。種類ごとの考え方と具体例を確認しましょう。

コンテンツ画像（写真・図解）の場合

写真や図解は、画像に写っている主体・状況・動作を端的な文章で説明します。

種別	記述例
良い例	「塀から塀へジャンプする猫」「静岡県側から見た雪を被った富士山」
NG例	「img001」「画像1」「富士山 観光 登山 日本 世界遺産」

ファイル名そのままの記述や、キーワードの羅列は検索エンジンにもユーザーにも意味が伝わりません。「その画像を見たことがない人に一文で説明するなら？」を基準に書くと迷いにくくなります。

テキスト入り画像（バナー・インフォグラフィック）の場合

GooglebotはOCR技術で画像内のテキストをある程度認識できます。それでも、alt属性にテキストの内容を記述することで検索エンジンの理解を補強できます。バナーであれば、書かれているキャッチコピーや商品名、リンク先の説明をalt属性に入れましょう。

インフォグラフィックは情報量が多いため、alt属性は概要のみにとどめます。詳細なデータは周辺の本文テキストやfigcaption要素で補完するのが効果的です。

リンク画像（ボタン・アイコン）の場合

リンク付き画像のalt属性は、テキストリンクでいうアンカーテキストの代わりになります。Google SEOスターターガイドでも、リンク画像のalt属性にはリンク先のページ内容や遷移先の説明を記述するよう明記されています。

種別	記述例
良い例	「お問い合わせページへ」「サービス一覧を見る」
NG例	「こちら」「クリック」「ボタン」

装飾のみの画像の場合（alt属性は空白にする）

背景画像・区切り線・デザイン上のアクセントなど、ページの内容理解に不要な装飾画像はalt属性を空値にします。

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

空値にすることで、クローラーに「この画像は装飾目的で意味を持たない」と伝えられます。alt属性ごと削除するのではなく、ぜひalt=""として属性を残すことが重要です。属性がないと、スクリーンリーダーがファイル名を読み上げてしまう場合があります。

グラフ・データ画像の場合

グラフや表を画像化している場合は、alt属性にグラフのタイトルと要点を記述します。たとえば「2024年度の売上推移グラフ：前年比120%」のように、見てわかる重要な結論を入れると効果的です。

詳細なデータはfigcaptionや本文テキストで補完し、alt属性は概要に絞りましょう。グラフ内の数値や凡例など重要情報は、可能な限り本文テキストとしてHTMLに記述することもGoogleは推奨しています。

alt属性の設定方法

alt属性の設定方法は、HTMLに直接記述するやり方とWordPressのGUI操作の2通りが主流です。どちらも基本構文は同じですが、a要素やh要素の中に画像を使う場合は特別な注意が必要なため、あわせて確認しておきましょう。

HTMLに直接記述する方法

<img>タグにsrc属性と並べてalt="画像の説明"を記述するのが基本構文です。テキストエディタ（VS Codeなど）でHTMLファイルを直接編集する場合に使います。

通常の画像には、画像の内容を具体的に説明するテキストを入れます。

<img src="sample.jpg" alt="青空の下に広がる夏の海岸線">

装飾目的の画像（区切り線・背景パターンなど）は、空のalt属性を記述します。alt属性そのものを省略すると一部の環境でファイル名が読み上げられるため、空値でぜひ残すことがポイントです。

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

alt属性を完全に省略するとスクリーンリーダーがファイル名をそのまま読み上げる場合があります。装飾画像でもalt=""と空値で記述しておくのが安全です。

WordPressのメディア画面で設定する方法

WordPressでは、メディアライブラリの「代替テキスト」欄に入力した内容がそのままalt属性として設定されます。HTMLを直接触らなくてよいため、コーディングに慣れていない方でも簡単に操作できます。

設定の手順は以下のとおりです。

• WordPress管理画面にログインする
• 左メニューの「メディア」→「メディアライブラリ」を開く
• 対象の画像をクリックして選択する
• 右側の「代替テキスト」欄にalt属性の内容を入力して保存する

また、記事投稿画面（ブロックエディタ／Gutenberg）でも設定できます。画像ブロックを選択すると、右サイドバーに「代替テキスト」欄が表示されるので、そこから直接入力する方法も手軽です。

メディアライブラリで後からalt属性を変更しても、すでに記事内に挿入済みの画像には反映されないケースがあります。WordPressのバージョンや使用プラグインによって挙動が異なるため、記事投稿画面でもぜひ値を確認してください。

a要素・h要素内の画像に設定する方法

画像をリンクとして使う場合（<a>要素でラップする場合）、alt属性がアンカーテキストの代わりとして機能します。Google 検索エンジン最適化（SEO）スターターガイドでも、リンク画像のalt属性には遷移先のページ内容がわかるテキストを記述するよう明記されています。

<a href="/contact"><img src="contact-btn.jpg" alt="お問い合わせページへ"></a>

見出し（<h2>など）の中で画像を使う場合も、見出しの内容をalt属性に書くことでクローラーとスクリーンリーダーの両方に内容が伝わります。

<h2><img src="heading.jpg" alt="サービスの特徴3選"></h2>

alt属性の設定状況を確認する方法

alt属性を設定したあとは、「正しく反映されているか」をぜひ検証しましょう。確認漏れがあると、せっかくの設定が効果を発揮できません。

ここでは、無料で使えるChrome拡張機能・ブラウザ標準機能・Googleの公式ツールを活用した3種類の確認方法を紹介します。

Chrome拡張機能「Alt & Meta viewer」で一括確認する

Chromeウェブストアから無料でインストールできる拡張機能「Alt & Meta viewer」を使うと、ページ内のすべての画像のalt属性を一括で確認できます。

操作の流れはシンプルです。

• 拡張機能をインストールする
• 確認したいページを開く
• ブラウザ右上の「ALT」ボタンをクリックする
• 各画像の近くにalt属性のテキストが表示される

alt属性が未設定の画像は「Alt：設定なし」のように表示されるため、漏れを一目で把握できます。ページ全体を俯瞰してalt属性の抜けや重複をチェックしたい場合に特に有効な方法です。

ブラウザの開発者ツール（検証機能）で個別確認する

Google Chromeに標準搭載されている「検証」機能（デベロッパーツール）を使えば、拡張機能のインストール不要でalt属性を確認できます。

確認したい画像を右クリックして「検証」を選択すると、画面右側にソースコードが表示されます。imgタグの alt="〇〇" 部分を直接目視することで、属性値を即座に確認できます。

特定の1枚の画像をすぐにデバッグしたいときに素早く使える方法です。拡張機能が使えない環境でも対応できます。

Googleサーチコンソールで画像インデックスの状態を確認する

Googleサーチコンソール（GSC）の「検索パフォーマンス」レポートで、検索タイプを「画像」にフィルタすると、画像検索経由のインプレッション数・クリック数・表示クエリを確認できます。

alt属性に設定したキーワードがどの検索クエリで表示されているかを把握することで、改善の優先順位付けに活用できます。また「URL検査」ツールで特定ページをチェックし、画像がGoogleにインデックスされているかも確認可能です。

alt属性を更新した後は、以下のワークフローで効果を定期検証しましょう。

• GSCの検索パフォーマンス（画像タブ）を開く
• 更新前後の期間を比較してインプレッション・クリック数の変化を確認する
• 新たに表示されたクエリをもとにalt属性をさらに改善する

Googleサーチコンソールの詳細はGoogleサーチコンソール公式サイトから確認できます。

まとめ

alt属性は、SEO・アクセシビリティ・UXの三方向に効果をもたらす、コストゼロで始められる施策です。正しい知識を持てば、今日から実践できます。

この記事で解説してきた内容を、最後に整理しておきましょう。

alt属性が果たす3つの役割

alt属性は、SEO・アクセシビリティ・UXの三方向に同時に効果をもたらします。

SEO面では、画像検索への露出、リンク画像のアンカーテキスト代替、ページ文脈のGoogleへの伝達という3つの働きがあります。アクセシビリティ面では、スクリーンリーダーが画像の内容を音声で読み上げる際の情報源になります。UX面では、画像の読み込みエラー時に代替テキストとして表示され、ユーザーへの情報補完を担います。

いずれも「画像に適切な説明をつける」という一つの行動で、同時に達成できる点が大きなメリットです。

設定優先順位の整理

すべての画像に同じ手間をかける必要はありません。優先度の高い順に設定を進めることが効率的です。

• コンテンツ画像（写真・図解）：内容を具体的に説明する
• リンク画像（ボタン・バナー）：リンク先のページ内容や操作を説明する
• テキスト入り画像（インフォグラフィックなど）：画像内のテキストを書き起こす
• 装飾画像：alt=""で空値を設定し、スクリーンリーダーにスキップさせる

Google公式が推奨する3原則

Google 検索エンジン最適化（SEO）スターターガイドおよびGoogle 画像検索 SEO ベストプラクティスが推奨する原則は、シンプルな3点に集約されます。

• 正確に：画像の内容を事実に基づいて説明する
• 簡潔に：125文字程度を目安に、冗長な説明を避ける
• キーワードを控えめに：自然な文脈でのみ使い、詰め込まない

ウェブアクセシビリティ基盤委員会（WAIC）のガイドラインも、同様の方向性を示しています。意味のある画像には説明テキストを、装飾目的の画像には空のaltを設定することが基本原則です。

alt属性はPDCAを回す施策

alt属性は一度設定すれば終わりではありません。Googleサーチコンソールで画像検索のパフォーマンスを定期確認し、表示回数やクリック数が伸び悩む画像のaltを見直すことが大切です。

コンテンツを更新するたびに新しい画像が増えます。追加のタイミングで設定漏れが起きやすいため、公開前のチェックリストに組み込む運用が効果的です。

今日からできるアクション

まずは自サイトの現状を把握することから始めましょう。Chrome拡張機能「Alt & Meta viewer」を使えば、ページ上のすべての画像のalt設定状況を一覧で確認できます。インストールして自サイトを開くだけで、設定漏れをすぐに発見できます。

ツールで現状を把握し、優先度の高い画像から順に修正する。この小さな一歩が、SEOとアクセシビリティの両方を着実に改善する出発点になります。