Altテキスト

TL;DR — Altテキストは、画像が何のためにあるかを、見えない人や検索エンジンに伝えるために画像へ追加する短い代替文です。alt属性を<img>要素に付けて記述します。アクセシビリティの1つの入力（それだけで完全な準拠を保証するものではありません）であり、画像検索で画像が表示されるのにも役立ちます。画像が何を見せているかだけでなく、そのページで何をしているかを説明し、キーワードを詰め込まず、純粋に装飾的な画像には空のalt=""を使い、アイコンボタンやリンク画像では操作や遷移先を説明してください。

Altテキストとは

ウェブページに画像を置くと、コードは次のようになります。

<img src="dalmatian-puppy.jpg" alt="Dalmatian puppy playing fetch in a park">

そのalt="..."の部分がAltテキストです。alternative text（代替テキスト）の略で、画像の代わりに表示する短い説明です。画像が見えないときは、画像の代わりにAltテキストが使われます。

「altタグ」と呼ぶ人をよく見かけます。一般的な呼び方ですが、厳密には正しくありません。<img>がタグで、altはその属性です。ここでは「Altテキスト」と「alt属性」を使いますが、「altタグ」と言っても意味は通じます。

良いAltテキストは固定の説明テンプレートではありません。視覚的に何が写っているかだけでなく、そのページで画像が何をしているかに合わせて選びます。伝えたいことや周囲の文章がすでに説明している内容によって、同じ写真でも場所が変われば別のAltテキスト（またはAltテキストなし）が必要になることがあります。

重要な理由

Altテキストには2つの重要な役割があります。

• アクセシビリティ。 視覚障害者や弱視の人は、ページを読み上げるスクリーンリーダーを使います。スクリーンリーダーが画像に到達すると、Altテキストを読み上げます。Altテキストがなければ役立つ情報が何も得られず、さらに悪い場合は画像のファイル名を読み上げます。これは「あればよい」ものではありません。Altテキストの欠落は、ウェブサイトのアクセシビリティ訴訟で最も頻繁に指摘される問題の1つです。
• 画像SEO。 検索エンジンは、人間のように画像を「見る」ことはできません。画像が何についてのものかをGoogleやBingに伝える主な方法がAltテキストであり、画像が画像検索に表示されるのに役立ちます。

良いAltテキストの書き方

簡単なルールがいくつかあります。

• ページの文脈で、画像に実際に写っているものを説明する。 「公園でボールを取って遊ぶダルメシアンの子犬」は良い例です。「puppy dog pup pups doggies」はキーワード詰め込みなので、やめてください。
• 「Image of」や「Photo of」から始めない。 検索エンジンとスクリーンリーダーは、すでに画像だと分かっています。説明だけを書きます。
• 短く保つ。 語句または1文で十分です。段落は必要ありません。
• 装飾的な画像には空のalt=""を使う。 区切り線や背景の装飾など、情報を何も加えない画像には、引用符の間を空にしたalt=""を指定します。スクリーンリーダーにスキップさせるためです。alt属性自体を完全に省略しないでください。そのほうが悪い結果になります。ページが別の場所ですでに伝えている以上の情報を画像が加えていなければ、装飾的です。
• アイコンだけのボタンとコントロールでは、アイコンではなく操作を説明する。 虫眼鏡アイコンの検索ボタンなら、alt="Magnifying glass"ではなくalt="Search"とします。利用者が有効にしたとき何が起こるかを知る必要があるからです。

多くの人が間違える点

Altテキストは通常のウェブ検索順位ではなく、主に画像検索に役立ちます。 多くのガイドは、画像にAltテキストを追加すれば通常の検索結果でページの順位が上がるように示唆しますが、実際はそうではありません。GoogleのJohn Muellerも何度も述べています。Altテキストは画像が画像検索で見つかる助けになり、ページに少しテキストを加えますが、ウェブ検索の順位を上げる魔法のレバーではありません。

正確な説明（Googleの引用、画像検索とウェブ検索の違い、装飾画像、リンク画像、Altテキストの欠落を大規模に見つける方法）を知りたいなら、Advancedタブに切り替えてください。

TL;DR — Altテキストは、<img>要素のalt属性の値です。HTMLで必須であり、アクセシビリティに必要で、検索に関する画像メタデータで最も重要な要素です。多くのガイドが取り違える点は、主に画像検索に影響し、ウェブ検索の順位には影響しないことです（Muellerは繰り返し説明しています）。GoogleはAltテキストをコンピュータビジョンとページの文脈に合わせて読み取るため、単なる説明ではなく文脈のために書きます。キーワードを詰め込まず、「image of」で始めず、装飾画像には欠落属性ではなくalt=""を使います。リンク画像では、Altテキストがアンカーテキストとして働きます。Googleによる文字数制限はなく、155文字は執筆上の目安です。Altテキストの欠落はウェブ上で最も多い技術的問題で、**80,4%**のサイトに少なくとも1つあります。

Altテキストの正体

Altテキストは、HTMLの<img>要素にあるalt属性の値です。

<img src="dalmatian-puppy.jpg" alt="Dalmatian puppy playing fetch">

画像の短い代替文であり、スクリーンリーダー利用者、クローラー、画像が無効になったり読み込みに失敗したりしたブラウザのために使います。用語について1つ正確にしておきましょう。**「altタグ」**と呼ばれることが多いものの、これは誤称です。タグは<img>で、altはそのタグ上の属性です。呼び方が定着しているので争うつもりはありませんが、正確な用語はalt属性で、その中のテキストがAltテキストです。

HTML仕様では、<img>要素にalt属性が必須です。完全に省略すると準拠違反になります。空の値（alt=""）は有効で意味があり、装飾画像を示す正しい方法です（詳しくは後述します）。

何を書くかは、普遍的な説明レシピを順番に実行して決めるものではありません。適切なAltテキストは、フレーム内に何があるかの一覧ではなく、ページ上のその場所での画像の目的に応じて決まります。画像がどこに置かれ、周囲のコンテンツが何をすでに伝えているかによって、同じ画像でも別のAltテキストや空のAltテキストが正当に必要になることがあります。文脈から独立した「唯一の正しい」キャプションはありません。

Altテキストには2つの別々のSEO上の役割がある — その1つは過大評価されている

これは、ほとんどの「SEOのためのAltテキスト」ガイドが曖昧にする違いであり、このページの本当の価値がある部分です。Altテキストは検索に対して2つの異なる働きをします。

1. ページにテキストを加える。 GoogleはAltテキストをページ上のテキストの一部として数えます。Muellerはこう述べています。“The alt text is essentially shown when the images are turned off in most browsers, so that’s something that we would count as part of the on-page text.” (翻訳) 「ほとんどのブラウザで画像をオフにすると基本的にAltテキストが表示されるため、ページ上のテキストの一部として数えます」。これは実際の効果ですが、小さなものです。

2. 画像が何についてのものかを示す — 画像検索のために。 こちらが主な役割です。Googleの公式ドキュメントはAltテキストを画像メタデータを提供するための*“the most important attribute”* (翻訳) 「最も重要な属性」と呼び、Muellerはその効果が画像検索にあると説明しています。“if someone is searching in Google Images for something that kind of matches the alt text, then we can use that to understand that your image is relevant.” (翻訳) 「誰かがGoogle画像検索でAltテキストに近いものを検索していれば、画像が関連していると理解するために使えます」。

ここは理解しておくべき点です。画像があるという理由だけでAltテキストを追加しても、ページがウェブ検索で上位になるわけではありません。Muellerは直接こう言っています。“It’s not the case that we would say a textual webpage has more value because it has images. It’s really just we see the alt text and we apply that to the image, and if someone searches for the image we can use that to better understand the image.” (翻訳) 「画像があるからテキストのウェブページの価値が高いとは言いません。Altテキストを見て画像に適用し、誰かが画像を検索したら画像をよりよく理解するために使うだけです」。

目的が画像検索での可視性（そこから生まれるリファラルトラフィックを含む）なら、Altテキストは非常に重要です。Altテキストだけで青いリンクのウェブ順位も上げたいと思っているなら、道具を間違えています。これはJavaScript SEOの記事でも述べた点です。ウェブ検索ではAltテキストはページ上のテキストとして数えられますが、その重要性は過大評価されがちで、本当の効果は画像検索とアクセシビリティにあります。

Googleが使うシグナルはこれだけではない

Altテキストは単独で読まれるわけではありません。Googleはこう説明しています。“Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.” (翻訳) 「Googleはコンピュータビジョンのアルゴリズムとページの内容に加えてAltテキストを使い、画像の主題を理解します」。コンピュータビジョンは、画像がビーチだとすでに判別できます。Altテキストの役割は、モデルが推測できないこと、つまり文脈です。このページに画像がある理由と、ここで何を意味するかです。だからこそMuellerの2024年の助言は説得力があります。AIが*「photo of a beach」と出力するのは画素を技術的に説明していますが、“the alt-text is unique in that it’s what directly connects the image to the page with context.”* (翻訳) 「Altテキストは、画像を文脈とともにページへ直接つなぐものという点で独自です」という機会を無駄にします。同じビーチ写真でも、サーフィンのページ、不動産の掲載ページ、気候の記事では別のAltテキストが適切です。

アクセシビリティ — そして法的な重み

Altテキストは、SEOの資産である前にアクセシビリティの要件です。WCAG 2.x 成功基準1.1.1（非テキストコンテンツ）、レベルAは、非テキストコンテンツにテキストによる代替を求めています。スクリーンリーダー利用者はこれに依存します。なければ画像はページ上の死角になり、alt属性を省略すると生のファイル名を読み上げるリーダーもあります。

これは数十ある成功基準の1つにすぎません。画像のAltテキストを正しく設定すれば、画像について1.1.1を満たせますが、それだけでページやサイト全体のWCAG準拠やADA準拠が成立するわけではありません。色のコントラスト、キーボード操作、フォームラベル、見出し構造など、別の基準にも依存します。Altテキストはアクセシビリティに必要な一部であり、全体ではないと考えてください。

これは軽い話ではありません。Alt属性の欠落は、米国で毎年数千件に上るADAのウェブサイトアクセシビリティ訴訟で日常的に指摘されています。私のJavaScript SEOガイドでも、“missing alt attributes are an accessibility issue, which may turn into a legal issue.” (翻訳) 「Alt属性の欠落はアクセシビリティの問題であり、法的な問題になる可能性がある」と書いています。これは修正の位置付けを変えます。まずコンプライアンス上の対応であり、SEO上の対応はその次です。SEOクローラー（Ahrefs Site Auditを含む）が技術的な問題としてAlt属性の欠落を指摘する理由もそこにあります。

機能するAltテキストの書き方

• キャプションではなく文脈から始める。 画像が視覚的に何であるかだけでなく、ページにとって何を意味するかを説明します。画像検索についてMuellerはこう言っています。“you don’t necessarily need to describe exactly what is in the image, but rather kind of like what this image means for your particular page.” (翻訳) 「画像に何があるかを正確に説明する必要は必ずしもなく、むしろこの画像があなたのページにとって何を意味するかを説明する」。
• 「Image of」や「Photo of」で始めない。 GoogleのLizzi Sassmanはこう述べています。“We already are aware that it’s an image. You don’t need to say, ‘It’s an image of’ and then the thing.” (翻訳) 「すでに画像だと分かっています。『これは〜の画像です』と言ってから対象を書く必要はありません」。説明的な語句で十分で、完全な文でなくても構いません。
• キーワードは自然に使い、決して詰め込まない。 Googleは*“focus on creating useful, information-rich content that uses keywords appropriately and is in context.”* (翻訳) 「キーワードを適切に、文脈に沿って使う有用で情報豊富なコンテンツ作成に集中する」としています。また、“Avoid filling alt attributes with keywords… as it results in a negative user experience and may cause your site to be seen as spam.” (翻訳) 「Alt属性をキーワードで埋めるのは避ける。ユーザー体験を損ない、サイトがスパムと見なされる可能性がある」と警告しています。Gary Illyesの言葉では、Altテキストは*“shouldn’t be what you want to rank for, but what’s in the image.”* (翻訳) 「順位を上げたいものではなく、画像にあるものを書くべき」です。
• 周囲の段落をAltにコピーしない。 Muellerは*“I wouldn’t just blindly copy and paste the same text that you already have on a page as an alt text.”* (翻訳) 「ページにすでにある同じテキストを、考えずにAltテキストとしてコピー＆ペーストすることはしません」と言っています。alt属性は文脈を加える固有の機会であり、重複ではありません。
• Googleの文字数制限はない。 Muellerは*“we don’t have any guidelines with regards to how long your alt text can be.”* (翻訳) 「Altテキストの長さについてのガイドラインはありません」と述べています。広く引用される「125文字」はアクセシビリティツールに由来し、GoogleのDeveloper Style Guideは厳しい上限ではなく、執筆上の目安として155文字以下を提案しています。Googleが切り詰めるからではなく、長い説明がスクリーンリーダー利用者の読み上げを妨げるから短くします。
• 繰り返す画像には一貫したAltテキストを使う。 同じ画像が複数箇所に登場するなら、同じAltテキストを付けます。

装飾画像：欠落したaltではなくalt=""

スペーサー、区切り線、情報を持たない背景装飾など、純粋に装飾的な画像の正しいパターンは、空のalt属性です。

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

alt=""は、支援技術に画像が装飾的でスキップしてよいと伝えます。属性を省略するのと同じではありません。altを完全に省略するのはHTML仕様違反で、一部のスクリーンリーダーがファイル名を読み上げる原因になります。つまり、装飾画像にはalt=""（空の値を持つ属性）を指定し、属性を欠落させず、説明も書きません。私のJavaScript SEOガイドでも、主要なコンテンツ画像のAltを修正し、プレースホルダーや装飾画像はAltを空にしてよい（つまりalt=""）と説明しています。

「装飾的」の判定は、画像がページのどこか別の場所（周囲の文章、キャプション、ページの構造）ですでに伝えている以上の情報を加えるかどうかです。加えないなら（スペーサー、同じ内容をすでに示すテキストの隣にある繰り返しアイコン、純粋な視覚的な穴埋めとして使うストック写真など）、装飾的なのでalt=""にします。画像が小さいか装飾的に見えるかに関係なく、ページ上の他の要素が提供しない情報を加えるなら装飾ではありません。

機能画像：アイコンではなく操作を説明する

画像には、純粋に装飾的なものでも単純な情報画像でもなく、コントロールであるものがあります。アイコンだけの検索ボタン、ハンバーガーメニューのアイコン、動画サムネイルの再生ボタンなどです。これらでは、Altテキストはアイコンの見た目ではなく、コントロールを有効にすると何が起きるかを説明します。

<!-- Weak: describes the icon -->
<button><img src="magnifying-glass.svg" alt="Magnifying glass icon"></button>

<!-- Better: describes the action -->
<button><img src="magnifying-glass.svg" alt="Search"></button>

スクリーンリーダー利用者が「虫眼鏡アイコン」と聞いても、コントロールを有効にすると何が起きるか分かりません。「検索」ならすぐに分かります。これは後述するリンク画像にも当てはまる原則です。ページ上での画像の機能をAltテキストにします。ただし、<a>が関与しない場合にも適用されます。

リンク画像：Altテキストがアンカーテキストになる

画像がリンク（<a>で囲まれているもの）になると、Altテキストはそのリンクのアンカーテキストとして機能します。Googleは*“Alt text in images is useful as anchor text if you decide to use an image as a link.”* (翻訳) 「画像をリンクとして使うなら、画像のAltテキストはアンカーテキストとして役立つ」としています。空のAltを持つ画像だけのリンクは、空のアンカーテキストと同じです。スクリーンリーダーが遷移先を説明できないためアクセシビリティに悪く、リンクシグナルにも悪影響があります。リンク画像のAltテキストは、画像が何を見せるかだけでなく、リンク先を説明します。

ここは正確に範囲を定めましょう。Googleが文書化しているのは、クロール可能なリンクでAltテキストをアンカーテキストとして使うことです。ブラウザと支援技術が使う完全な「アクセシブルな名前」の計算より狭い概念で、計算にはaria-label、aria-labelledby、周囲のリンクテキストも使われます。Altテキストはその広い計算への1つの入力であり、すべてではありません。

SVGは別物

インラインの<svg>要素はalt属性を取りません。altは<img>用です。インラインSVGにアクセシブルな名前を付けるには、aria-labelledbyから参照する<title>要素を使います。

<svg role="img" aria-labelledby="logo-title">
  <title id="logo-title">Acme Corp logo</title>
  <!-- paths… -->
</svg>

<img src="logo.svg">経由で参照されるSVGは、他の画像と同じ通常のalt属性を使います。ここで述べているのはインラインSVGのマークアップだけです。

避けるべきアンチパターン

• キーワードの詰め込み — Googleが明確に警告しているスパムシグナルです。
• 周囲の段落をそのままAlt属性にコピーする。
• 「Image of」や「Photo of」で始める — 冗長です。
• 装飾画像のaltを省略する — alt=""を使うべきです。
• **ページの文脈を無視した、AI生成の「photo of X」**という説明。
• 空のAlt属性に会社名を入れる。 Muellerはこれについて率直に、“It makes no sense, it seems like a waste of time to me: once wasted time to implement, and again wasted time to clean up later on.” (翻訳) 「意味がありません。私には時間の無駄に思えます。実装に一度時間を無駄にし、後で片付けるためにもう一度無駄にします」と述べています。
• alt属性とtitle属性を混同する。 title属性はホバーツールチップとして表示されるもので、Altテキストではなく、SEOやアクセシビリティへの重みもほとんどありません。

欠落したAltテキストを見つけて修正する

Alt属性の欠落は例外ではありません。ウェブのデフォルトの失敗状態です。百万超のドメインを対象にしたサイト監査調査では、80,4%のサイトで少なくとも1ページにAlt属性の欠落があり、私たちが見つけた技術的SEO問題の中で最も多いものになりました。

見つけるには、次の方法があります。

• Ahrefs Site Audit → Imagesレポートは、サイト全体でAlt属性が欠落した画像を指摘します（Ahrefs Webmaster Toolsは、確認済みサイトなら無料で使えます）。
• 手動のスポットチェック — 重要なコンテンツ画像で要素を検証するか、ブラウザのアクセシビリティ拡張機能を使います。

修正するときの優先順は次のとおりです。

1. まず主要なコンテンツ画像 — 意味を持ち、画像検索のトラフィックを得られる画像です。
2. 次にリンク画像 — ここでAltを空にすると、アンカーテキストとアクセシビリティの両方で損をします。
3. 最後に装飾画像 — 修正は説明を追加することではなく、alt=""にすることです。

期待値について1つ注意があります。Altテキスト追加のSearchPilot分割テストは、ウェブ順位について結論が出ていない／統計的に有意ではない結果でした。Altテキストの効果はウェブ順位の向上ではなく、画像検索とアクセシビリティにあるという、ここまでの説明と一致します。ゼロから始めるサイトについてMuellerが安心させるように、“if you’re just adding alt text for the first time, then sometimes, even any alt text is better than nothing.” (翻訳) 「初めてAltテキストを追加するなら、何らかのAltテキストでも、何もないより良い場合があります」と述べています。

率直に言うと、このページのどこにも、Altテキストを修正すれば順位、トラフィック、AI検索の引用が一定量動くという保証はありません。確認済みの公式ソースもその約束をしておらず、上の分割テストの証拠も結論が出ていません。Altテキストが確実に行うのは、アクセシビリティの空白を埋め、Googleの画像検索アルゴリズムに、明示的に利用すると説明されているメタデータを渡すことです。

より大きな全体像（ファイル名、画像サイトマップ、遅延読み込み、フォーマット、レスポンシブ画像）については、この記事が属する画像SEOハブを参照してください。

AIサマリー

Advanced版の要点をまとめると、次のとおりです。

• Altテキストとは： <img>要素のalt属性の値であり、画素の一覧ではなく、画像の目的と文脈に合わせて選ぶ短い代替文です。HTMLで必須です。「altタグ」と呼ばれがちですが、<img>がタグでaltが属性です。
• 2つのSEO上の役割、その1つは過大評価： (1)ページ上のテキストを加える — 実際の効果ですが小さいものです。(2)画像が何についてのものかを画像検索に知らせる — 主な価値です。ページに画像があるというだけでAltテキストを追加しても、ウェブ順位は上がりません（Muellerが繰り返し説明）。確認済みの公式ソースも、追加による順位、トラフィック、AI引用の結果を約束していません。
• 唯一のシグナルではない： GoogleはAltテキストをコンピュータビジョンとページの文脈とともに読み取ります。したがって、単なる「photo of a beach」というキャプションではなく、文脈（なぜこの画像がこのページにあるか）のために書きます。
• アクセシビリティと法的側面： WCAG 1.1.1（レベルA）はテキストによる代替を求め、Altの欠落はADA訴訟で頻繁に取り上げられます。ただし1.1.1は数十ある基準の1つです。Altテキストだけでページやサイト全体のWCAG準拠やADA準拠が成立するわけではありません。まずコンプライアンス、その次にSEOです。
• 執筆ルール： 文脈から始め、「image of」で始めず、キーワードは自然に使い（詰め込みや固定の公式は使わず）、周囲の段落をコピーしません。Googleの文字数制限はありません（155文字はスタイルガイド上の執筆目標であり、上限ではありません）。
• 装飾画像： alt=""（空の値を持つ属性）を使います。欠落した属性でも説明でもありません。 ページが別の場所ですでに伝えていない情報を画像が加えるかをテストし、加えなければ装飾です。
• 機能画像： アイコンだけのボタンやコントロール（検索アイコン、ハンバーガーメニューなど）には、アイコンの見た目ではなく操作を説明するAltテキストを付けます。
• リンク画像： Altテキストはクロール可能なリンクのアンカーテキストとして働きます。ただし、支援技術が使う完全な「アクセシブルな名前」の計算より狭い概念です。
• SVG： インラインSVGはaltではなく<title> + aria-labelledbyを使います。
• アンチパターン： キーワードの詰め込み、空のAltへの会社名（Muellerは「時間の無駄」と表現）、altとtitleツールチップ属性の混同です。
• 問題の規模： **80,4%**のサイトに少なくとも1つAlt属性の欠落があり、ウェブで最も多い技術的問題です。Ahrefs Site AuditのImagesレポートで監査し、まずコンテンツ画像、最後に装飾画像（alt=""）を修正します。

公式ドキュメント

検索エンジンの一次資料です。

Google

• Google Images best practices — Altテキストを「最も重要な属性」とする説明、キーワード詰め込みへの警告、画像をリンクにした場合のアンカーテキスト、良い例と悪い例を含む中心資料。
• SEO Starter Guide — descriptive alt text — Altテキストを「画像とコンテンツの関係を説明する」テキストとして扱う説明。
• Developer Documentation Style Guide — alt text — 155文字の執筆目安、装飾画像のalt=""、「Image of」や「Photo of」を使わないこと、句読点を含めること。
• Write helpful alt text (Technical Writing) — 短く保つ、文脈で説明する、繰り返す画像でAltを統一するというGoogleのアクセシビリティ中心の手引き。
• web.dev — 画像の代替テキスト — 重要な画像には説明的なAlt、装飾画像には空のalt=""を使うという説明。

Bing / Microsoft

• SEO向けコンテンツ設計（SEM 101） — 画像を「ボットにとっての死角」と捉え、Alt属性で説明する方法を示した古いBing記事（関連するキーワードを使い、無理に詰め込まない）。
• Bing画像検索エコシステムへの参加 — ファイル名とAltテキストが、ウェブ検索の1ページ目に順位付けされなくても画像カルーセルにページを表示させる助けになるという説明。

ソースからの引用

Googleによる記録された発言です。ページがテキストを公開している場合、リンクは引用箇所へ直接移動するディープリンクです。

Googleのドキュメント — Altテキストの目的

• “The most important attribute when it comes to providing more metadata for an image is the alt text… which also improves accessibility for people who can’t see images on web pages.” (翻訳) 「画像にメタデータを追加するうえで最も重要な属性はAltテキストであり、ウェブページの画像を見られない人のアクセシビリティも改善します」 引用箇所へ
• “Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.” (翻訳) 「Googleはコンピュータビジョンのアルゴリズムとページの内容に加えてAltテキストを使い、画像の主題を理解します」 引用箇所へ
• “Avoid filling alt attributes with keywords (also known as keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.” (翻訳) 「Alt属性をキーワードで埋めること（キーワード詰め込みとも呼ばれる）は避けてください。ユーザー体験を損ない、サイトがスパムと見なされる可能性があります」 引用箇所へ
• “Alt text in images is useful as anchor text if you decide to use an image as a link.” (翻訳) 「画像をリンクとして使うことにした場合、画像のAltテキストはアンカーテキストとして役立ちます」 引用箇所へ

GoogleのJohn Mueller — Altテキストは画像検索のためのもの

• “When it comes to the alt text, we primarily use that to better understand the image. So if someone is searching in Google Images for something that kind of matches the alt text, then we can use that to understand that your image is relevant for that alt text on that specific page.” (翻訳) 「Altテキストは主に画像をよりよく理解するために使います。誰かがGoogle画像検索でAltテキストに近いものを検索していれば、その特定のページで画像がそのAltテキストに関連すると理解するために使えます」 — Office Hours、2022年3月18日。 聞く · SEJの報道
• “It’s not the case that we would say a textual webpage has more value because it has images. It’s really just we see the alt text and we apply that to the image, and if someone searches for the image we can use that to better understand the image.” (翻訳) 「画像があるからテキストのウェブページの価値が高いとは言いません。Altテキストを見て画像に適用し、誰かが画像を検索したら画像をよりよく理解するために使うだけです」 — Office Hours、2022年3月18日。
• “I think the important part here is we don’t have any guidelines with regards to how long your alt text can be.” (翻訳) 「ここで重要なのは、Altテキストの長さについてのガイドラインがないことだと思います」 — Office Hours、2022年3月18日。
• “The alt-text is unique in that it’s what directly connects the image to the page with context… if you use AI to create alt texts based on the image file, and get ‘photo of a beach’ as the alt text for that image, you’re not getting the most out of the alt text, both for users & search engines.” (翻訳) 「Altテキストは画像を文脈とともにページへ直接つなぐ点で独自です。画像ファイルに基づいてAIでAltテキストを作り、その画像のAltテキストが『photo of a beach』になったなら、利用者にとっても検索エンジンにとってもAltテキストを最大限に活用できていません」 — Reddit r/SEO、2024年9月。 スレッド · SEJの報道
• 会社名を空のAlt属性に入れることについて：“It makes no sense, it seems like a waste of time to me: once wasted time to implement, and again wasted time to clean up later on.” (翻訳) 「意味がありません。私には時間の無駄に思えます。実装に一度時間を無駄にし、後で片付けるためにもう一度無駄にします」 — Twitter、2022年6月2日。報道

GoogleのLizzi Sassman — 「image of」と書かない

• “We already are aware that it’s an image. You don’t need to say, ‘It’s an image of’ and then the thing.” (翻訳) 「すでに画像だと分かっています。『これは〜の画像です』と言ってから対象を書く必要はありません」 — Search Off the Record、「画像SEOについて話す」、2022年10月。 トランスクリプト

GoogleのGary Illyes — 画像を説明し、キーワードを狙わない

• “Make sure to add alt attribute. This text shouldn’t be what you want to rank for, but what’s in the image.” (翻訳) 「Alt属性を必ず追加してください。このテキストは順位を上げたいものではなく、画像にあるものであるべきです」 — Pubcon基調講演、2018年10月17日。 報道

Altテキスト監査チェックリスト

本当に重要なAltテキストの問題を見つけるためのチェックです。まずアクセシビリティ、次に画像SEOを確認します。

• コンテンツ画像にalt属性がない — 最大の問題です（80,4%のサイトに少なくとも1つあります）。最初に修正します。
• 装飾画像にはalt=""を使う（空の値を持つ属性）。欠落した属性でも説明でもありません。
• どこにもaltを省略しない — 属性の欠落はHTML仕様違反で、スクリーンリーダーがファイル名を読み上げる原因になります。
• リンク画像には意味のあるAltを付ける — 遷移先を説明します（リンク画像ではAlt = アンカーテキスト、空のAlt = 空のアンカーテキスト）。
• 機能画像（アイコンだけのボタン／コントロール）は操作を説明する — alt="Search"であり、alt="Magnifying glass icon"ではありません。
• キーワードを詰め込まない — 同義語や対象キーワードを連ねません。
• 「Image of」や「Photo of」で始めない — 説明へ直接入ります。
• Altを周囲の段落のコピーにしない — その画像に固有の文脈を加えます。
• Altは視覚情報だけでなく文脈を説明する — 一般的な「photo of a beach」ではなく、このページで画像が何を意味するかを書きます。
• 空のAlt属性に会社名を入れない（Mueller：「時間の無駄」）。
• altとtitleを混同しない — title属性はホバーツールチップで、Altテキストではありません。
• 繰り返す画像はAltテキストを統一する。
• インラインSVGはaltではなく<title> + aria-labelledbyを使う。
• モバイル = デスクトップのAltテキスト — モバイル版にもデスクトップと同じAltテキストを持たせます（モバイルファーストインデックス）。
• 大規模に監査する — Ahrefs Site AuditのImagesレポート（または確認済みサイトなら無料のAhrefs Webmaster Tools）を使います。

時間を使う価値のあるリソース

私の関連執筆

• JavaScript SEO Issues & Best Practices — JavaScriptフレームワークが残す空のAlt属性、アクセシビリティと法的側面、Altテキストのウェブ検索での重要性が過大評価されがちな理由を扱います。
• Ahrefs Site Audit Study — 百万超のドメインを調査し、Alt属性の欠落が最も多い技術的SEO問題（80,4%のサイト）と分かった研究です。
• The Beginner’s Guide to Technical SEO — 画像とAltテキストの扱いを、より大きな技術的な全体像の中で位置付けます。

公式資料

• GoogleのGoogle Images best practices — Altテキストと画像メタデータの標準的な参照資料です。
• GoogleのDeveloper Documentation Style Guide — alt text — 具体的な執筆ルール（155文字、alt=""、「Image of」を使わない）です。
• WCAG 2,1 — Non-text Content (1.1.1) — Altテキストの背景にあるアクセシビリティ成功基準です。

他の資料

• SearchPilotのAltテキスト分割テスト — Altテキストの追加（結論が出ていない）と一覧画像への説明的Altテキスト（推定上昇だが統計的に有意ではない）です。「Altテキストでウェブ順位が上がる」という見方を現実に合わせて調整する資料です。
• Search Engine Journal — Mueller on alt text for SEO (March 2022) — Muellerが画像検索とウェブ検索の線引きを明確にしたOffice Hoursの報道です。
• Search Engine Journal — Mueller’s 2024 “photo of a beach” context advice — AI生成の説明がAltテキストの要点を逃す理由についてのRedditコメントを扱います。
• SE Roundtable — Google on company names in blank alt text (June 2022) — 空のAltテキストへの会社名追加をMuellerが「時間の無駄」と呼んだことを報じます。
• Search Off the Record — 「画像SEOについて話す」（2022年10月、トランスクリプト） — 文脈優先のAltテキスト、「image of」で始める誤り、Altテキストがないより何らかのAltテキストが良い場合をMuellerとLizzi Sassmanが説明します。
• W3C — WCAG 2,1 Success Criterion 1.1.1 (Non-text Content) — Altの欠落がSEOだけでなくコンプライアンスの問題になる理由を支えるレベルAのアクセシビリティ要件です。
• web.dev — 画像の代替テキスト — 意味のある画像には説明的Alt、装飾には空のalt=""を使うというGoogleの開発者向け指針です。

個別に名前を付ける価値のあるAltテキストの間違い

キーワード詰め込み、「image of」で始めること、装飾画像のAlt欠落は、私が最もよく見る3つの間違いです。しかし、それだけではありません。ここでは、それぞれの間違いがなぜ悪いのか、代わりに何をするかを説明します。

Alt属性へのキーワード詰め込み

なぜ悪いか： Googleはこれを明確に警告しています。“Avoid filling alt attributes with keywords… as it results in a negative user experience and may cause your site to be seen as spam.” (翻訳) 「Alt属性をキーワードで埋めるのは避けてください。ユーザー体験を損ない、サイトがスパムと見なされる可能性があります」。スクリーンリーダーはAltテキストを読み上げるため、alt="puppy dog pup pups doggies"はクローラーにとってスパム的なだけでなく、実際に聞く人には使えません。

代わりに： 文脈の中で、平易な言葉を使って画像を説明します。alt="Dalmatian puppy playing fetch in a park"なら、キーワードの山にせず同じ情報を伝えられます。

「Image of」または「Photo of」で始める

なぜ悪いか： GoogleのLizzi Sassmanはこれについて率直でした。“We already are aware that it’s an image. You don’t need to say, ‘It’s an image of’ and then the thing.” (翻訳) 「すでに画像だと分かっています。『これは〜の画像です』と言ってから対象を書く必要はありません」。冗長な書き出しに使う1文字1文字は、有用な文脈に使えない文字です。

代わりに： すぐ説明を始めます。alt="Dalmatian puppy playing fetch in a park"とし、alt="Image of a dalmatian puppy playing fetch in a park"とはしません。

装飾画像でAlt属性を省略する

なぜ悪いか： 空の文字列を設定するのではなくaltを完全に省略すると、HTML仕様違反になります。また、一部のスクリーンリーダーが無音のままにせず、生のファイル名を読み上げる原因になります。

代わりに： 区切り線や背景の装飾など、本当に装飾的な画像には、空の値で属性を存在させるalt=""を使います。支援技術に画像をきれいにスキップさせるためです。

ページの文脈を無視したAI生成の「photo of X」説明

なぜ悪いか： Muellerはこれを直接指摘しています。“photo of a beach” (翻訳) 「photo of a beach」と出力するAIツールは画素を技術的に説明しますが、“the alt-text is unique in that it’s what directly connects the image to the page with context.” (翻訳) 「Altテキストは、画像を文脈とともにページへ直接つなぐものという点で独自です」という本質を逃します。視覚的なキャプションだけでは、コンピュータビジョンにはできないAltテキストの役割を失います。

代わりに： このページで画像が何を意味するかを説明するように、書くかAIの下書きを編集します。同じビーチ写真でも、サーフィンのページと不動産の掲載ページでは別のAltテキストが必要です。

空のAlt属性に会社名を入れる

なぜ悪いか： Muellerはこのパターンを、努力の無駄だと明確に述べています。“It makes no sense, it seems like a waste of time to me: once wasted time to implement, and again wasted time to clean up later on.” (翻訳) 「意味がありません。私には時間の無駄に思えます。実装に一度時間を無駄にし、後で片付けるためにもう一度無駄にします」。利用者にも検索エンジンにも情報を加えず、後で片付ける負債になるだけです。

代わりに： 本当に画像に固有のAltテキストを書くか、本当に装飾的な画像にはalt=""を使います。定型的なブランド名をデフォルトにしないでください。

アイコンだけのコントロールの見た目を、操作ではなく説明する

なぜ悪いか： 検索ボタンにalt="Magnifying glass icon"を設定すると、スクリーンリーダー利用者には押したとき何が起きるかではなく、アイコンの見た目が伝わります。機能コントロールでは、見た目ではなく操作が有用な情報です。

代わりに： 操作または結果を名前にします。alt="Search"、alt="Close menu"、alt="Play video"です。リンク画像のAltテキストがアンカーテキストとして働くのと同じ原則で、Altテキストはコントロールの機能に役立つべきです。

alt属性とtitle属性を混同する

なぜ悪いか： title属性は多くのブラウザでホバーツールチップとして表示されます。Altテキストのようにスクリーンリーダーで読み上げられず、SEO上の重みもほとんどありません。Altテキストの代替として扱うと、アクセシビリティと画像検索の両方が未対応になります。

代わりに： すべての画像に必要な代替文にはaltを設定し、titleは本当に補足的なツールチップテキストが必要な場合だけ使います。

Altテキストの変更前／変更後の例

上のルールから直接取り出した、具体的な変更前／変更後の4つの組み合わせです。

キーワード詰め込みと説明的な文

<!-- Before: keyword stuffing -->
<img src="dalmatian-puppy.jpg" alt="puppy dog pup pups doggies dalmatian puppies for sale">

<!-- After: plain description -->
<img src="dalmatian-puppy.jpg" alt="Dalmatian puppy playing fetch in a park">

変更後のバージョンは、Googleが警告した同義語や購入意図の語句をすべて詰め込むのではなく、画像に実際にあるものを平易な言葉で1度説明しています。

一般的なキャプションと文脈に合ったAlt

同じビーチ写真でも、置かれるページによって必要なAltテキストは異なります。これは、文脈を問わず「photo of a beach」と出力するAIツールをMuellerが批判したときに示した違いです。

<!-- Generic, low-value -->
<img src="beach.jpg" alt="Photo of a beach">

<!-- On a surfing page -->
<img src="beach.jpg" alt="Surfer paddling out past the break at sunrise">

<!-- On a real-estate listing -->
<img src="beach.jpg" alt="Private beach access behind the oceanfront property">

同じ画素でも役割は3つあります。Altテキストは画像をただ語るのではなく、ページの目的に合わせるべきです。

装飾画像：空のAltと欠落したAlt

<!-- Wrong: attribute omitted entirely -->
<img src="divider.svg">

<!-- Right: empty value, attribute present -->
<img src="divider.svg" alt="">

一見するとどちらも似ていますが、挙動は異なります。省略した属性はHTML仕様違反で、一部のスクリーンリーダーがファイル名を読み上げる原因になります。空のalt=""は、支援技術に画像をスキップするよう正しく伝えます。

機能画像：操作と見た目

<!-- Weak: describes the icon -->
<button><img src="magnifying-glass.svg" alt="Magnifying glass icon"></button>

<!-- Better: describes what the control does -->
<button><img src="magnifying-glass.svg" alt="Search"></button>

ボタンはリンクでも装飾でもなく、コントロールです。アイコンの名前だけでは、押したとき何が起きるかをスクリーンリーダー利用者に伝えられません。操作の名前なら伝わります。

リンク画像：Altをアンカーテキストに

<!-- Weak: doesn't describe the destination -->
<a href="/pricing/"><img src="cta-button.png" alt="Button"></a>

<!-- Better: alt describes where the link goes -->
<a href="/pricing/"><img src="cta-button.png" alt="View pricing plans"></a>

画像がリンクで囲まれているため、Altテキストはアンカーテキストとして機能します。「Button」ではスクリーンリーダー利用者に遷移先が何も伝わりませんが、「View pricing plans」なら伝わります。

この画像にはどんなAltテキストを付けるべきか

ほとんどすべての画像で出てくる判断を、3つの簡単な分岐にします。装飾か、画像ではなくコントロールか、リンクで囲まれているかです。

Altテキストのよくある問題

監査やアクセシビリティレビューで実際に現れるAltテキストの問題について、症状、原因、修正を4つ示します。

スクリーンリーダーが説明ではなく生のファイル名を読み上げる

症状： スクリーンリーダーが説明の代わりに「dalmatian-puppy-jpg」や「IMG_4021」のような文字列を読み上げます。

考えられる原因： alt属性が空の文字列に設定されるのではなく、<img>要素から完全に省略されています。これはHTML仕様違反であり、デフォルトの失敗状態です。百万超のドメインを対象にしたAhrefsのサイト監査調査によると、**80,4%**のサイトでAlt属性の欠落が見られます。

修正と確認： コンテンツ画像には説明的なaltを、真に装飾的な画像にはalt=""を追加します。ブラウザのアクセシビリティ拡張機能か要素検証で確認します。どちらの場合も属性は存在しているはずです。

サイト全体でAlt属性の欠落が指摘される

症状： 監査ツールが、Alt属性の欠落した画像を数百、数千件も指摘します。

考えられる原因： 画像をアップロードするときにAltテキストを追加する体系的なプロセスがありません。アップロード時にAltを必須にしないCMSやテーマが、問題を悪化させることもあります。

修正と確認： 主要コンテンツ画像（意味を持ち、画像検索のトラフィックを得られる）を最初に、リンク画像（空のAltはアンカーテキストも失わせる）を次に、装飾画像（ここでの修正は説明ではなくalt=""）を最後に、順番に優先します。各回の後でImage SEO Checkerまたはサイト監査ツールを再実行し、数が減っていることを確認します。

AltテキストがあるのにGoogle画像検索に画像が表示されない

症状： コンテンツ画像にはAltテキストがありますが、関連するGoogle画像検索には表示されません。

考えられる原因： Altテキストが「photo of a beach」のような一般的な視覚キャプションで、そのページで画像が何を意味するかという文脈に沿った説明になっていません。Muellerは、このような一般的なAI生成Altテキストは期待した成果を出さないと述べています。Altテキストは1つのシグナルにすぎず、Googleはコンピュータビジョンとページの文脈を組み合わせるため、周囲のページが薄いか無関係だと、Altテキストが良くても画像の表示を妨げることがあります。

修正と確認： 画素だけでなく、ページの実際の主題と目的を反映するようAltテキストを書き直します。Googleが再クロールして再処理する時間を置いてから、Search Console → Performance → Search type: Imageでパフォーマンスを再確認します。

アイコンだけのボタンがスクリーンリーダー利用者に操作を伝えない

症状： アイコンだけのコントロールの前に、スクリーンリーダーが「虫眼鏡アイコン」や「ボタン画像」のように読み上げますが、押すと何が起きるかは分かりません。

考えられる原因： Altテキストがコントロールの操作ではなくアイコンの見た目を説明しています。画像がリンクでも純粋な装飾でもない通常の写真に見えるため、よく起きる混同です。

修正と確認： アイコンではなく操作や結果（alt="Search"、alt="Close menu"、alt="Play video"）を名前にするようAltテキストを書き直します。キーボードでコントロールまでTab移動し、スクリーンリーダーの読み上げを聞いて確認します。

リンク画像の遷移先がスクリーンリーダー利用者に分からない

症状： スクリーンリーダーでリンク（または画像）を移動する利用者が、画像だけのリンクを有効にする前に役立つ情報を何も聞きません。

考えられる原因： リンク画像のAltテキストが空か欠落しています。テキストリンクで空のアンカーテキストになるのと同じ状態です。

修正と確認： 画像が何を見せるかだけでなく、リンク先を説明するAltテキストを書きます（変更前／変更後はExamplesタブを参照）。キーボードでリンクまでTab移動し、スクリーンリーダーが何を読み上げるかを確認するか、要素を検証します。

Altテキストの継続的なKPI

一度きりの修正の後だけでなく、継続的に追跡する価値があるものは2つです。サイトのどれだけにAltテキストがあるか、そしてAltテキストが実際に画像検索での可視性を得ているかです。

サイト全体のAltテキストのカバー率

• 指標 — サイト全体の<img>要素のうち、空でなく装飾的でもないalt属性を持つ割合（コンテンツ画像だけを対象。装飾画像は正しくalt=""を示すべきなので、これは欠落ではありません）。
• 分かること — Altテキストが一度きりの修正なのか、継続的な習慣なのか。Ahrefsのサイト監査調査では**80,4%**のサイトに少なくとも1つAlt属性の欠落があるため、定期的に確認しなければ新しいコンテンツが公開されるたびにカバー率は再び低下します。
• 取得方法 — ページ上のImage SEO Checker、サイト全体をクロールしたAhrefs Site AuditのImagesレポート、またはスポットチェック用のブラウザアクセシビリティ拡張機能を使います。
• ベンチマーク／現実的な範囲 — 普遍的な目標割合はありません。装飾的な背景画像が多いサイトは、写真中心のブログよりalt=""が多くても正当です。最初に自分の現在のカバー率を基準にし、新しいページを公開しても後退していないか見ます。
• 頻度 — 定期確認として四半期ごとに、画像のアップロード方法に影響する一括コンテンツ移行やCMS／テーマ変更の直後にも確認します。

画像検索のパフォーマンス（Google画像検索のインプレッション／クリック）

• 指標 — 画像検索結果に絞り込んだサイトのインプレッション、クリック、CTR。
• 分かること — 書いているAltテキストが、実際に画像検索の可視性とトラフィックにつながっているか。これはMuellerが繰り返し説明しているAltテキストの主な役割であり、ウェブ順位の向上とは異なります。
• 取得方法 — Search Console → Performance → Search type: Image。
• ベンチマーク／現実的な範囲 — サイトとテーマがどれだけ画像中心かに完全に依存するため、説明可能な普遍的な数字はありません。最初にこのレポートを取得したとき自分の基準値を作り、外部のベンチマークと比較するのではなく、Altテキストや画像コンテンツを変更した後の傾向を追います。
• 頻度 — 定期確認として毎月行い、Altテキストを一括で書き換えた後は数週間、変化があるか詳しく見ます。

Altテキストを監査・修正するツール

• Image SEO Checker — alt属性、遅延読み込みのヒント、画像フォーマットなど、HTMLの画像シグナルを直接監査します。修正の前後に1ページのAltテキストカバー率をスポットチェックする最速の方法です。
• On-Page SEO Checker — 見出し、リンク、その他のページ上要素とともに画像を対象とする高度な生HTMLチェックと、優先順位付きのページ上メモを提供します。1ページで監査する複数項目の1つがAltテキストの場合に役立ちます。
• Ahrefs Site Audit — Imagesレポート — サイト全体のクロールでAlt属性のない画像を指摘します（Ahrefs Webmaster Toolsなら確認済みサイトで無料）。Ahrefsのサイト監査調査にある80,4%という欠落率も、この方法で測定されました。
• Search Console — Performance、Search type: Image — Altテキストが実際に画像検索のインプレッションとクリックを得ているかを知る基準データです。
• ブラウザのアクセシビリティ拡張機能／要素検証 — 重要なコンテンツ画像の手動スポットチェックと、スクリーンリーダーが実際に読み上げる内容の確認に使います。

自分をテスト：Altテキスト

Altテキストが実際に何をするか、どう書くかについての簡単な5問です。それぞれ答えを選んでから確認してください。

変更履歴