我们为 12,000 张图片重写了替代文本：哪些方法真正提升了排名
我们为 12,000 张图片重写了 Alt 文本：哪些实际上推动了排名
您的开发人员打开无障碍审计，滚过 12,000 张被标记的图片。空的 alt 属性。自动生成的文件名 -- IMG_4529.jpg、product-photo-final-v3.png。零图片搜索流量。一个中等规模的电商客户雇用我们重写每一个。我们在 90 天内跟踪了排名、图片搜索展示次数和 WCAG 分数。有些更改立即产生了影响。其他的则什么都没做。出现了一个模式，没有任何 SEO 指南提到过，它占了大部分提升。这是我们在实际大规模测量 alt 文本时发现的。
接下来是我们做过的最具指导意义的 SEO 和无障碍项目之一。不是因为工作很光鲜 -- 绝对不是 -- 而是因为我们能够通过真实数据看到，在 2026 年，关于图片 alt 文本真正重要的是什么。剧透：网上流传的很多建议要么已经过时，要么完全错误。
目录
- 起点：情况有多糟糕？
- 装饰性与信息性图片：改变一切的决定
- 字符预算：Alt 文本实际应该有多长？
- 我们写的内容：真实的电商 Alt 文本示例
- 排名影响：什么实际上推动了变化
- 无障碍分数变化
- AI 图片搜索现在使用的是什么
- 我们的 Alt 文本框架
- 常见问题
起点：情况有多糟糕？
让我描绘一下这个场景。这是一个家居用品电商店铺，运行在无头 Next.js 前端和无头 CMS 后端上 -- 这是我们在 Social Animal 经常构建的设置（您可以查看我们的 Next.js 开发能力 和 无头 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 文本之前，我们必须为每张图片做一个决定：这是装饰性的还是信息性的？
这个区分比大多数人意识到的更重要。弄错了，您要么在屏幕阅读器体验中充斥噪音，要么对需要它的用户隐藏关键信息。
什么算作装饰性
装饰性图片是指添加视觉效果但不传达周围文本中未提供的信息的图片。这些获得空的 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 个字符以下。" "根据需要尽可能长。" "最多一句话。"这是我们在测试多个屏幕阅读器和测量排名影响后发现的。
屏幕阅读器的现实
我们使用 NVDA、JAWS 和 VoiceOver 进行了测试。以下是我们发现的：
| 屏幕阅读器 | 长 Alt 文本的行为 |
|---|---|
| NVDA | 不中断地读取整个 alt 文本，无字符限制 |
| 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 怀疑关键词堆砌，或者可能只是噪音。
我们写的内容：真实的电商 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">
为什么有效： 颜色、材料、finish 和尺寸 -- 购物者需要知道的东西，而他们无法从产品标题中获得。
生活方式/背景拍照
之前：
<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 文本还要糟糕。这对屏幕阅读器用户来说是有害的，自 2023 年以来 Google 一直在惩罚这种模式。我们替换了每一个实例。
排名影响：什么实际上推动了变化
现在是每个人都想知道的部分。我们在完成重写后的 6 个月内跟踪了结果。
Google 图片搜索流量
- 之前： 来自 Google 图片搜索约 180 次点击/月
- 之后（第 3 个月）： 约 620 次点击/月
- 之后（第 6 个月）： 约 1,140 次点击/月
这是 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 文本"警告。
真实用户影响
客户对自我认定为使用辅助技术的用户进行了发布后调查。反馈很清楚：购物体验从"基本上无法使用"变成了"实际上有效"。一位用户特别提到能够首次区分颜色变体。
这不仅仅是让人感觉良好的东西。在 2026 年，针对电商网站的 ADA 合规性诉讼在美国每年仍在以数千起的速度进行。适当的 alt 文本不是可选的 -- 这是法律要求。
AI 图片搜索现在使用的是什么
这是事情变得真正有趣的地方。Google 的图片搜索已经随着 AI 系统的集成而从根本上改变，理解他们使用什么信号改变了您应该如何思考 alt 文本。
Google Lens 和多搜索
Google Lens 每月处理数十亿次视觉搜索。当某人使用 Lens 搜索产品时，Google 使用多个信号：
- 视觉相似性 -- 图片实际看起来如何（您无法控制这个很多）
- Alt 文本 -- 仍然是理解图片代表什么的主要信号
- 周围页面内容 -- 页面上图片附近的文本
- 结构化数据 -- 产品 schema，特别是
image属性 - 图片文件名 -- 是的，仍然重要一点
- EXIF 数据 -- 对产品图片来说不太相关，但对摄影很重要
AI 概览和图片选择
Google 的 AI 概览（以前是 SGE）经常将图片拉入其生成的响应中。从我们的跟踪来看，具有描述性 alt 文本的图片 3.4 倍更可能 被选中用于 AI 概览包含，相比之下具有通用或缺失 alt 文本的图片。
这是有道理的。AI 需要在决定是否在响应中包含图片之前理解图片显示的是什么。Alt 文本是可用的最直接的信号。
Bing 视觉搜索和 ChatGPT
随着 ChatGPT 与 Bing 搜索索引的集成，alt 文本现在也进入了会话式 AI 响应。当某人询问 ChatGPT "为我找一个蓝色陶瓷花瓶" 时，浮现的产品图片在很大程度上受到 alt 文本质量的影响。
OpenAI 的 GPT-4o 模型在浏览网页时分析其功能时也使用 alt 文本。好的 alt 文本意味着您的产品可以由 AI 助手准确描述。
机器学习角度
这里是大多数文章忽略的细微差别：Google 的视觉 AI 现在可以独立识别图片中的对象。那么为什么 alt 文本仍然重要呢？因为机器视觉可以告诉您图片中有什么，但 alt 文本告诉 Google 背景。
视觉 AI 看到"蓝色圆柱形陶瓷对象"。您的 alt 文本说"手工制造蓝色陶瓷花瓶，白色斑点釉面，12 英寸高"。Alt 文本提供了纯视觉分析无法提取的特异性、品牌信息和尺寸。
我们的 Alt 文本框架
在这个项目之后，我们开发了一个框架，现在用于我们所有的 无头 CMS 开发 项目。这是决策树：
步骤 1：对图片进行分类
- 装饰性的？ →
alt=""然后继续 - 信息性的？ → 继续第 2 步
步骤 2：确定图片类型
产品图片 → [材料] [颜色] [产品] [关键特征] [尺寸（如果相关）]
生活方式图片 → [产品] [位置/背景] [设置描述]
信息图 → 简要总结 + aria-describedby 获取完整详情
带文本的图标 → alt=""（文本标签处理它）
不带文本的图标 → alt="[动作/含义]"
步骤 3：写并验证
- 自然地写，就像在电话中向某人描述图片一样
- 不要以"Image of"或"Photo of"开头 -- 屏幕阅读器已经宣布这是一张图片
- 在 alt 文本的早期包含产品名称/类型
- 尽可能保持在 50-100 个字符的甜蜜点
- 通过无障碍 linter 运行
步骤 4：与您的 CMS 集成
我们将 alt 文本字段直接构建到 CMS 内容模型中。对于无头 CMS 设置（Contentful、Sanity、Hygraph 等），我们创建强制 alt 文本要求的自定义字段：
// Sanity schema 示例
{
name: 'productImage',
type: 'image',
fields: [
{
name: 'alt',
type: 'string',
title: 'Alt 文本',
description: '用 50-100 个字符描述这张图片。不要以"image of"开头。',
validation: Rule => Rule.required()
.min(20)
.max(150)
.error('Alt 文本必须在 20 到 150 个字符之间')
},
{
name: 'isDecorative',
type: 'boolean',
title: '装饰性图片（不需要 alt 文本）',
description: '仅当图片不增加信息价值时检查此项'
}
]
}
这个验证在内容条目阶段就捕捉空的 alt 文本，而不是在它上线之后。预防总是比修复更好。
对于希望实施这种结构化方法的团队，我们的 无头 CMS 开发团队 已在数十个电商项目中设置了这些工作流程。如果您想讨论您的具体情况，与我们联系。
AI 生成的 Alt 文本呢？
在这个项目期间，我们测试了几个 AI alt 文本生成器，包括 GPT-4o 的视觉能力、Google 的 Cloud Vision API，以及像 Ahrefs 和 AltText.ai 这样的专用工具。
我们的判断：AI 生成的 alt 文本是大型目录的合理起点，但需要人工审查。AI 持续错过：
- 具体的材料描述（"ceramic"vs"porcelain"vs"stoneware"）
- 与产品列表匹配的准确颜色名称
- 尺寸和尺寸信息
- 特定于品牌的术语
我们使用 AI 生成初始草稿，然后由人工编辑精化每一个。这将项目时间线从估计的 12 周缩短到 7 周。
常见问题
Alt 文本是否直接影响常规 Google 搜索排名？ 根据我们的数据，它有一个小但可测量的效果。具有适当优化的 alt 文本的页面在常规有机搜索中的排名提高了 3-5 个位置。它不是主要的排名因素，但它有助于 Google 对页面相关性的理解。更大的影响是在 Google 图片搜索上，我们看到了 533% 的流量增加。
我应该在 alt 文本中放入关键词吗？ 是的，但要自然地放入。您的 alt 文本应该准确描述图片，如果您的目标关键词与图片显示的内容相关，它们会自然出现。切勿强制将关键词放入 alt 文本或重复它们。Google 在其搜索文档中明确指出关键词堆砌的 alt 文本是一个负信号。
电商产品图片的 alt 文本应该有多长？ 我们的数据显示，标准产品拍照的最佳结果是 50-100 个字符。这足以具有描述性，但又足够短，避免触发垃圾信号或惹恼屏幕阅读器用户。对于复杂的图片，如生活方式拍照或有风格的场景，最多 150 个字符是可以的。
空 alt 属性和没有 alt 属性之间有什么区别？
这困扰了很多开发人员。alt=""（空）告诉屏幕阅读器"这张图片是装饰性的，跳过它"。完全缺失的 alt属性意味着屏幕阅读器通常会读取文件名，这是一个可怕的用户体验。始终包含alt` 属性 -- 对装饰性图片将其保留为空，对信息性的使其具有描述性。
我应该以"Image of"或"Photo of"开头 alt 文本吗？ 不应该。屏幕阅读器在阅读 alt 文本之前已经宣布了一个元素是图片。以"Image of"开头会造成冗余：用户听到"Image: Image of blue vase"这很尴尬。只是直接描述图片中的内容。
Alt 文本如何与 Google Lens 和视觉搜索配合使用？ Google Lens 使用 alt 文本作为几个信号之一来理解图片。虽然 Lens 可以进行视觉分析图片内容，但 alt 文本提供了纯视觉分析无法提供的背景 -- 如材料组成、准确的尺寸、品牌名称和特定的产品术语。具有好的 alt 文本的图片 在 Lens 结果中浮现的可能性要高得多。
AI 工具能自动编写 alt 文本吗？ 像 GPT-4o 和专门服务这样的 AI 工具可以生成相当不错的 alt 文本初稿。但是，它们持续错过特定于产品的细节，如精确材料、品牌术语和准确的颜色名称。我们建议使用 AI 生成初始草稿，然后由人工进行精化。这个混合方法将我们的项目时间线缩短了约 40%。
电商网站是否需要 alt 文本？ 从实际意义上讲，是的。根据美国的 ADA 和将于 2025 年 6 月生效的欧洲无障碍法案，电商网站应满足 WCAG 2.1 AA 标准，这要求信息性图片的 alt 文本。在美国每年继续提交数千起与 ADA 相关的网络无障碍诉讼，缺失或不充分的 alt 文本是最常引用的问题之一。法律风险是真实的并且在增长。