12,000画像のALTテキスト書き直し：ランキング改善

Q: 空のalt属性とalt属性なしの違いは何ですか？

これは多くの開発者に引っかかります。`alt=""`（空）はスクリーンリーダーに「この画像は装飾的です、スキップしてください」と言います。完全に欠けているalt属性は、スクリーンリーダーがしばしばファイル名を読んでしまうことを意味し、これは悪いユーザー体験です。常にalt属性を含めてください — 装飾的な画像では空にし、情報的なものでは説明的にしてください。

開発者がアクセシビリティ監査を開き、12,000個のフラグ付き画像をスクロールして通ります。空のalt属性。自動生成されたファイル名 — IMG_4529.jpg、product-photo-final-v3.png。画像検索トラフィックはゼロ。中堅のeコマース企業が、すべてを書き直すために私たちを雇いました。ランキング、画像検索インプレッション、WCAGスコアを90日間追跡しました。変化の直後にニードルを動かした変更もあります。何もしなかった変更もあります。SEOガイドでは言及されていないパターンが1つ出現し、それがほとんどのリフトを占めていました。大規模に実際にALTテキストを測定したときに見つけたものは次のとおりです。

その後、最も有益なSEOおよびアクセシビリティプロジェクトの1つが続きました。作業が派手だったからではなく — 絶対にそうではありませんでした — 実際のデータで、2026年のALTテキストに関して実際に重要なことを見ることができたからです。ネタバレ：インターネット上で浮かんでいるアドバイスの多くは、時代遅れであるか単に間違っています。

出発点：どの程度悪かったか？
装飾画像と情報画像：すべてを変える決定
文字予算：ALTテキストの実際の長さはどのくらいか？
何を書いたか：実際のeコマースALTテキストの例
ランキング影響：実際に動いたもの
アクセシビリティスコアの変化
AIイメージ検索が現在使用するもの
ALTテキストフレームワーク
FAQ

12,000枚の画像のALTテキストを書き直した：実際にランキングを動かしたもの

出発点：どの程度悪かったか？

状況を説明させてください。これは、headless Next.jsフロントエンドとheadless CMSバックエンドで実行されているホーム用品のeコマースストアでした — 私たちがSocial Animalで頻繁に構築するセットアップです（参考のためにNext.js開発機能とheadless CMS作業を見ることができます）。製品カタログには約3,200個のSKUがあり、それぞれに3〜5枚の画像があります。

開始前のALTテキスト状況は次のようなものでした：

ALTテキストカテゴリ	画像の割合	例
完全に空（`alt=""`）	34%	`<img src="product.jpg" alt="">`
ALTテキストとしてのファイル名	28%	`alt="IMG_4529.jpg"`
一般的/役に立たない	22%	`alt="product image"`
キーワード詰め込み	11%	`alt="blue ceramic vase vase blue vase ceramic"`
実際にまともな	5%	`alt="Blue ceramic vase, 12 inches tall"`

Lighthouseアクセシビリティスコアは、製品ページ全体で平均62でした。Google画像検索は月あたり約180回のクリックを送信していました — このサイズのカタログでは悲劇的です。彼らのWAVEアクセシビリティツールレポートは、画像だけに関連する8,000以上のエラーを示していました。

装飾画像と情報画像：すべてを変える決定

ALTテキストの1文字を書く前に、すべての画像に対して呼び出しを行う必要がありました：これは装飾的ですか、それとも情報的ですか？

この区別は、ほとんどの人が実現する以上に重要です。間違えると、スクリーンリーダーのエクスペリエンスにノイズを詰め込むか、それを必要とするユーザーから重要な情報を隠しています。

装飾的と見なされるもの

装飾画像は、視覚的な関心を追加していますが、周囲のテキストでまだ利用できない情報を伝えていない画像です。これらは空のalt属性を取得します — 欠けているわけではなく、明示的に空です：

<!-- 正しい：空のaltを持つ装飾的な画像 -->
<img src="divider-swirl.svg" alt="" role="presentation">

<!-- 間違い：altが完全に欠けている -->
<img src="divider-swirl.svg">

監査では、約1,800枚の画像（15%）を装飾的に分類しました。これらには以下が含まれます：

背景テクスチャとパターン
装飾的な仕切りと境界線
テキストラベルが既に付いているアイコン
ライフスタイル/気分画像（隣接するテキストが文脈を完全に説明している場合）

情報的と見なされるもの

他のすべて。そして、これが人々が台無しにする場所です — 彼らは「情報的」なことを過小評価しています。その生活空間でのソファショットですか？そのソファの製品ページにある場合は、情報的です。色、スケール、スタイリングコンテキストを表示しています。

およそ10,200枚の画像を情報的に分類し、すべてに実際の有用なALTテキストが必要でした。

グレーゾーン

いくつかの画像は本当にグレーゾーンに住んでいます。ライフスタイル写真に重ねられたテキストオーバーレイを持つヒーローバナー — その画像は装飾的ですか（テキストオーバーレイが意味を伝えるため）？それとも背景画像は情報的ですか（製品を表示しているため）？

私たちの規則：画像を削除すると、それを見ることができない人にとってページの有用性が低下する場合、それは情報的です。私たちはALTテキストを書く側に傾きました。後で常にトリミングできますが、存在しないものをアクセシビリティ監査することはできません。

文字予算：ALTテキストの実際の長さはどのくらいか？

ここが、インターネットが大きく矛盾するアドバイスを与える場所です。「125文字未満に保つ。」「必要に応じて長くする。」「最大1文。」複数のスクリーンリーダーをテストし、ランキング影響を測定した後、見つけたものは次のとおりです。

スクリーンリーダーの現実

NVDA、JAWS、VoiceOverでテストしました。見つけたのは次のとおりです：

スクリーンリーダー	長いALTテキストでの動作
NVDA	全文を中断なく読み、文字制限なし
JAWS	完全なALTテキストを読み、ユーザーは一時停止/スキップ可能
VoiceOver（macOS/iOS）	完全なALTテキストを読み、古いバージョンでは約150文字で軽い一時停止

「125文字制限」が繰り返されるのは、古いバージョンのJAWSから来ているのか、特定の表示モードで切り詰めるのでしょうか。それはもう多くの年のために真実ではありません。最新のスクリーンリーダーは任意の長さのALTテキストを処理します。

とはいえ、実際的な制限があります。スクリーンリーダーユーザーは、すべての画像の段落を聞きたくありません。このキャラクター予算フレームワークに着陸しました：

画像タイプ	ターゲット長	最大長
シンプルな製品ショット	40-80文字	100文字
コンテキスト/ライフスタイルの製品	60-120文字	150文字
インフォグラフィックまたは複雑な画像	80-150文字	200文字（`longdesc`または`aria-describedby`でさらに）
グラフまたはデータ可視化	データテーブルを指す`aria-describedby`を使用	N/A

SEOの甘いスポット

ここで私たちのデータから興味深いこと。Google画像検索での製品画像のランキング変化を追跡し、ALTテキストの長さと相関させました。甘いスポットは50-100文字でした。その範囲のALTテキストを持つ画像は、画像検索ランキングで最も強い改善を見ました。

30文字未満のALTテキストは最小限の影響を示しました。150文字を超えるALTテキストは、実は画像検索パフォーマンスが若干悪くなるとの関連 — Googleがキーワード詰め込みを疑っていた可能性があり、または単なるノイズの可能性があります。

12,000枚の画像のALTテキストを書き直した：実際にランキングを動かしたもの - アーキテクチャ

何を書いたか：実際のeコマースALTテキストの例

具体的にしましょう。プロジェクトからの実際の例を以下に示します。クライアント機密情報の関係で、製品の詳細は若干変更されています。

製品画像

前：

<img src="vase-blue-1.jpg" alt="product image">

後：

<img src="vase-blue-1.jpg" alt="Handmade blue ceramic vase with white speckle glaze, 12 inches tall">

なぜそれが機能するのか： 色、素材、仕上げ、サイズ — 買い物客が必要としているもので、製品タイトルからは得られません。

ライフスタイル/コンテキストショット

前：

<img src="living-room-setup.jpg" alt="IMG_8821.jpg">

後：

<img src="living-room-setup.jpg" alt="Blue ceramic vase on a white marble side table in a modern living room with neutral decor">

なぜそれが機能するのか： スクリーンリーダーユーザーが写真が実際に表示しているかを伝えます — 購入決定を支援するコンテキスト。

製品バリアント

前：

<img src="throw-red.jpg" alt="throw blanket">
<img src="throw-blue.jpg" alt="throw blanket">
<img src="throw-green.jpg" alt="throw blanket">

後：

<img src="throw-red.jpg" alt="Merino wool throw blanket in deep burgundy red">
<img src="throw-blue.jpg" alt="Merino wool throw blanket in ocean blue">
<img src="throw-green.jpg" alt="Merino wool throw blanket in sage green">

なぜそれが機能するのか： 各バリアント画像には、それを区別する一意のALTテキストが付いています。これはアクセシビリティと画像検索の両方に重要です。

キーワード詰め込みの誤り

既存のALTテキストの一部は、「ALTテキストにキーワードを入れて」と言われた人によって書かれたことは明らかでしたが、それ以上の指導はありませんでした：

前（キーワード詰め込み）：

<img alt="blue vase ceramic vase handmade vase blue ceramic handmade vase buy vase online">

これはALTテキストがないよりも悪いです。スクリーンリーダーユーザーにとっては敵対的で、Googleはこのパターンに2023年以来ペナルティを与えています。すべてのインスタンスを置き換えました。

ランキング影響：実際に動いたもの

さて、みんなが知りたい部分のため。リライト完了後、6ヶ月間結果を追跡しました。

Google画像検索トラフィック

前： Google画像から月あたり約180回のクリック
後（月3）： 月あたり約620回のクリック
後（月6）： 月あたり約1,140回のクリック

これは、Google画像検索トラフィックの533%増です。成長は即座ではありませんでした — Googleが画像をクロールおよび再インデックスするまで約6〜8週間かかりました。

通常の有機検索

これは私たちを驚かせました。特に悪いALTテキストを前に持っていた製品ページで、通常（非画像）検索ランキングで測定可能な改善を見ました。すべての画像が空またはファイル名ベースのALTテキストを持っていたページは、ターゲットキーワードの平均改善3〜5ポジションを見ました。

私たちの理論：適切なALTテキストは、Googleにページコンテンツに関する追加のコンテキストを提供します。それ自体は大きなランキング要因ではありませんが、タイトなニッチで競争しているページの場合、すべての信号が役立ちます。

動いた特定の製品カテゴリ

製品カテゴリ	画像検索クリック（前）	画像検索クリック（後、月6）	変化
セラミック花瓶	22/月	189/月	+759%
スローブランケット	31/月	204/月	+558%
ウォールアートプリント	48/月	287/月	+498%
キッチンアクセサリー	19/月	98/月	+416%
装飾枕	60/月	362/月	+503%

最大の利益は、ALTテキストが最も説明的で具体的だったカテゴリーで来ました。「throw blanket」のような一般的なALTテキストはニードルをほとんど動かしませんでした。「chunky knit merino wool throw blanket in dusty rose, 50 by 60 inches」のような特定のALTテキストは実際の結果を促進しました。

アクセシビリティスコアの変化

アクセシビリティの改善は劇的で即座でした — クローラーを待つ必要はありません。

Lighthouseスコア

前：製品ページ全体で平均62
後：製品ページ全体で平均94

残りの6ポイントは、主に色コントラストの問題と、私たちの範囲外だったいくつかのサードパーティウィジェット問題に関連していました。

WAVEツール結果

画像関連エラー： 8,247から12に削減
画像関連アラート： 3,891から234に削減

残りの12エラーは、制御しなかった画像を含むユーザー生成コンテンツ（レビュー写真）からのものでした。234のアラートは、主にALTテキストを意図的に短い説明で使用していた「疑わしいALTテキスト」警告でした。

実際のユーザーへの影響

クライアントは、支援技術を使用していることを自己識別したユーザーを対象に、打ち上げ後の調査を実施しました。フィードバックは明確でした：ショッピング体験は「基本的に使用不可」から「実際に機能」に進みました。あるユーザーは、初めて色バリアントを区別できることを具体的に言及しました。

これは単なるフィールグッドなものではありません。2026年、eコマースサイトに対するADA準拠訴訟は、米国で年間数千件のペースで実行し続けています。適切なALTテキストは選択肢ではありません — それは法的要件です。

AIイメージ検索が現在使用するもの

ここで物事は本当に興味深くなります。Googleの画像検索は、AIシステムの統合により根本的に変わりました。どの信号を使用しているかを理解することは、ALTテキストについてどのように考えるべきかを変えます。

Google LensおよびMultisearch

Google Lensは、1ヶ月あたり数十億の視覚検索を処理します。誰かがLensを使用して製品を検索する場合、Googleは複数の信号を使用します：

視覚的類似性 — 画像が実際に何に見えるか（これをあまり制御できません）
ALTテキスト — 画像が何を表しているかを理解するための主な信号
周囲のページコンテンツ — ページ上の画像の近くのテキスト
構造化データ — 製品スキーマ、特にimageプロパティ
画像ファイル名 — はい、まだ少し重要
EXIFデータ — 製品画像にはあまり関連がありませんが、写真に重要

AIの概要と画像選択

GoogleのAI概要（以前のSGE）は、生成された応答に画像を頻繁に引き出します。私たちの追跡から、説明的なALTテキストを持つ画像は、一般的または欠けているALTテキストを持つ画像と比較して、AI概要に含まれる可能性が3.4倍高いでした。

これは意味があります。AIは、それを応答に含めるべきかどうかを決定する前に、画像が表示するかを理解する必要があります。ALTテキストは利用可能な最も直接的な信号です。

Bing Visual SearchおよびChatGPT

ChatGPTのBingの検索インデックスの統合により、ALTテキストが会話型AI応答に入るようになります。誰かがChatGPTに「青いセラミック花瓶を見つけてください」と言うと、表示される製品画像はALTテキストの品質に大きく影響します。

OpenAIのGPT-4oモデルは、ブラウジング機能のためにWebページを分析する場合、ALTテキストも使用します。良いALTテキストは、あなたの製品がAIアシスタントによって正確に説明されることができることを意味します。

機械学習の角度

ここで、ほとんどの記事が見逃している微妙さ：GoogleのVision AIは、独立して画像内のオブジェクトを識別できるようになりました。では、ALTテキストがまだ重要なのはなぜですか？機械視力があなたに何が画像にあるか（WHAT）を伝えることができるからですが、ALTテキストはGoogleに文脈を伝えます（CONTEXT）。

Vision AIは「青い円筒形のセラミックオブジェクト」を見ます。ALTテキストは「Handmade blue ceramic vase with white speckle glaze, 12 inches tall」と言っています。ALTテキストは、純粋な視覚分析が抽出できない特異性、ブランド情報、素材、寸法を提供します。

ALTテキストフレームワーク

このプロジェクトの後、すべてのheadless CMS開発プロジェクトに使用するフレームワークを開発しました。決定木は次のとおりです：

ステップ1：画像を分類する

装飾的？ → alt=""で移動
情報的？ → ステップ2に進む

ステップ2：画像タイプを決定する

製品画像 → [素材] [色] [製品] [主な機能] [関連する場合のサイズ]
ライフスタイル画像 → [製品] [位置/文脈] [設定説明]
インフォグラフィック → 簡単な要約 + 詳細のためのaria-describedby
テキスト付きアイコン → alt=""（テキストラベルが処理します）
テキストなしのアイコン → alt="[アクション/意味]"

ステップ3：書いて検証する

自然に書く、電話で誰かに画像を説明しているかのように
「Image of」や「Photo of」で始めないでください — スクリーンリーダーはすでにそれが画像であることを発表しています
製品の名前/タイプを早めにALTテキストに含める
可能な場合は、50-100文字の甘いスポットの範囲内にとどまります
アクセシビリティリンターを実行します

ステップ4：CMSと統合する

ALTテキストフィールドを直接CMSコンテンツモデルに組み込みます。headless CMSセットアップの場合（Contentful、Sanity、Hygraphなど）、ALTテキスト要件を強制するカスタムフィールドを作成します：

// Sanityスキーマの例（製品画像）
{
  name: 'productImage',
  type: 'image',
  fields: [
    {
      name: 'alt',
      type: 'string',
      title: 'Alt Text',
      description: 'Describe this image in 50-100 characters. Do not start with "image of".',
      validation: Rule => Rule.required()
        .min(20)
        .max(150)
        .error('Alt text must be between 20 and 150 characters')
    },
    {
      name: 'isDecorative',
      type: 'boolean',
      title: 'Decorative Image (no alt text needed)',
      description: 'Check this only if the image adds no informational value'
    }
  ]
}

この検証は、コンテンツエントリの段階で空のALTテキストをキャッチします。ライブになった後ではなく。予防は常に修復に勝ります。

この種の構造化アプローチの実装を探しているチームの場合、私たちのheadless CMS開発チームは、数十のeコマースプロジェクト全体でこれらのワークフローをセットアップしました。特定の状況について話したい場合は、お問い合わせください。

AI生成ALTテキストについて

プロジェクト中に、GPT-4oのビジョン機能、GoogleのCloud Vision API、およびAhrefsとAltText.aiなどの専用ツールを含むいくつかのAI ALTテキスト生成器をテストしました。

私たちの評決：AI生成ALTテキストは大きなカタログの合理的な出発点ですが、人間の確認が必要です。AIは一貫して以下を見逃しました：

特定の素材説明（「セラミック」対「磁器」対「石器」）
製品リストと一致した正確な色名
サイズおよび寸法情報
ブランド固有の用語

AIを使用して初期ドラフトを生成し、人間の編集者が各ドラフトを改善しました。これにより、プロジェクトのタイムラインは推定12週間から7週間に短縮されました。

FAQ

ALTテキストは通常のGoogle検索ランキングに直接影響しますか？

私たちのデータに基づいて、それは小さいが測定可能な効果があります。適切に最適化されたALTテキストを持つページは、通常の有機検索で3〜5ポジションの改善を見ました。それは主なランキング要因ではありませんが、ページ関連性に対するGoogleの理解に貢献しています。より大きな影響はGoogle画像検索にあります。我々は533%のトラフィック増加を見ました。

ALTテキストにキーワードを入れるべきですか？

はい、ですが自然に。ALTテキストは画像を正確に説明するべきで、ターゲットキーワードが画像に表示されるものに関連している場合、それらは自然に表示されます。ALTテキストにキーワードを強制したり、繰り返したりしないでください。Googleは明示的にキーワード詰め込みALTテキストを否定的な信号として彼らの検索ドキュメンテーションで呼び出しています。

eコマース製品画像のALTテキストはどのくらい長いべきですか？

私たちのデータは標準的な製品ショットで50-100文字の最良の結果を示しました。これは説明的に十分な長さですが、短すぎることなくスパム信号をトリガーするか、スクリーンリーダーユーザーを煩わせたりしないようにするのに十分な長さです。ライフスタイルショットやスタイル設定されたシーンなどの複雑な画像の場合、最大150文字は問題ありません。

空のalt属性とalt属性なしの違いは何ですか？

これは多くの開発者に引っかかります。alt=""（空）はスクリーンリーダーに「この画像は装飾的です、スキップしてください」と言います。完全に欠けているalt属性は、スクリーンリーダーがしばしばファイル名を読んでしまうことを意味し、これは悪いユーザー体験です。常にalt属性を含めてください — 装飾的な画像では空にし、情報的なものでは説明的にしてください。

ALTテキストを「Image of」または「Photo of」で始めるべきですか？

いいえ。スクリーンリーダーはALTテキストを読む前に、要素が画像であることをすでに発表しています。「Image of」で始めることは冗長性を作成します：ユーザーは「Image: Image of blue vase」を聞きます。これは奇妙です。単に画像に直接に何があるかを説明してください。

ALTテキストはGoogle Lensおよびビジュアルサーチでどのように機能しますか？

Google Lensはアルテキストを複数の信号の1つとして使用して、画像を理解します。Lensは視覚的に画像コンテンツを分析できますが、ALTテキストはコンテキストを提供します。これは純粋な視覚分析ができません — 素材組成、正確な寸法、ブランド名、および特定の製品用語のような。良いALTテキストを持つ画像は、Lens結果でサーフェスする可能性が大幅に高くなります。

AI ツールはALTテキストを自動的に書くことができますか？

GPT-4oおよび専門サービスなどのAIツールは、ALTテキストのまともな最初のドラフトを生成できます。ただし、彼らは一貫して製品固有の詳細（正確な材料、ブランド用語、正確な色名）を見逃しています。AI にドラフトを初期生成させ、人間が改善することをお勧めします。このハイブリッドアプローチにより、プロジェクトのタイムラインを約40%削減しました。

ALTテキストはeコマースサイトに法的に必要ですか？

実際的には、はい。米国ではADAの下で、そしてヨーロッパアクセシビリティ法（2025年6月発効）に基づいて、eコマースWebサイトはWCAG 2.1 AA標準を満たすことが期待されており、情報画像のALTテキストが必要です。ADA関連のWebアクセシビリティ訴訟は米国で年間数千件が提起され続けており、欠けているまたは不十分なALTテキストは最も一般的に引用されている問題の1つです。法的リスクは実在で成長しています。

目次