可访问性：产品图片的 Alt 文本模式
发布于 2024年6月8日
什么是 Alt 文本，它为什么重要？
替代文本（或“alt 文本”）是嵌入在 HTML 代码中的图片书面描述。它有三个关键作用：
- 可访问性： 屏幕阅读器会向视力障碍用户朗读 alt 文本，让他们能够理解图片的内容。
- SEO： 像 Google 这样的搜索引擎使用 alt 文本来理解图片的内容，这有助于您的产品图片在 Google 图片搜索中获得排名。
- 图片损坏： 如果图片加载失败，浏览器将显示 alt 文本作为替代，为用户提供上下文。
对于电子商务网站而言，写得好的 alt 文本不仅是一项技术要求，更是提升客户体验和搜索可见性的工具。
优秀产品 Alt 文本的构成
好的 alt 文本应简洁而富有描述性。它应该传达一个视力正常的人能从图片中获取的相同信息。
一个简单的遵循模式是： [产品名称] - [拍摄类型] - [关键细节]
包含的关键元素：
- 产品身份： 清晰说明产品是什么。使用官方产品名称。
- 拍摄类型： 是在白色背景上吗？是生活方式照片吗？还是某个功能的特写？
- 重要细节： 提及关键的视觉信息，如颜色、材质、纹理或正在突出的特定功能。
- 上下文： 如果产品正在被使用，描述该动作（例如，“一个人穿着绒面革登山靴走在崎岖的小径上”）。
应避免的内容：
- 以“……的图像”或“……的图片”开头： 屏幕阅读器已经会宣告这是一个图像。
- 关键词堆砌： 不要只罗列关键词（例如，
alt="靴子 鞋子 登山 便宜 立即购买"）。这会损害可访问性和 SEO。 - 留空： 一个空的
alt=""属性会告诉屏幕阅读器忽略该图片。仅对纯装饰性图片这样做，而产品图片并非如此。
实用的 Alt 文本模式与示例
这里有一些适用于不同类型产品照片的即用型模式。
1. 标准影棚照片（白色背景）
这是最常见的产品图片。目标是清晰地描述产品。
- 模式：
从[角度]展示的[产品名称]。 - 示例：
alt="从正面展示的 NeatForge 保温咖啡杯。" - 好的示例：
alt="一个带黑色翻盖盖子的 12 盎司不锈钢旅行杯。" - 坏的示例：
alt="杯子"
如果您的产品有多种颜色变体，请具体说明。
- 示例：
alt="森林绿色的'探险家'背包。"
2. 生活方式或情境照片
这种图片展示了产品的使用场景。上下文与产品本身同样重要。
- 模式：
[人物/场景]正在使用[产品名称]进行[动作]。 - 示例：
alt="一个徒步者坐在圆木上休息，正在用 NeatForge 保温咖啡杯喝水。" - 好的示例：
alt="一个人的手在'Pro-Type'机械键盘上打字的特写，可以看到 RGB 背光。" - 坏的示例：
alt="带键盘的人"
3. 特写/细节照片
这种图片突出展示了特定的功能、材质或纹理。
- 模式：
[产品名称]上[功能]的特写，展示了[细节]。 - 示例：
alt="'Pro-Type'键盘的编织 USB-C 数据线特写，展示了加固的连接器。" - 好的示例：
alt="'探险家'背包上缝制的皮革标志的细节照片。" - 坏的示例：
alt="标志"
4. 尺寸或对比照片
这种图片将产品与另一物体并列展示，以提供其尺寸感。
- 模式：
[产品名称]与[常见物体]并列展示，以说明其尺寸。 - 示例：
alt="迷你'口袋无人机'与一部智能手机并列展示，以说明其紧凑的尺寸。"
最终核对清单
在保存您的产品列表之前，请对每张图片进行快速核对：
- alt 文本是否准确描述了图片？
- 是否提到了产品名称？
- 是否简洁（理想情况下少于 125 个字符）？
- 是否没有行话和关键词堆砌？
- 如果您看不到图片，alt 文本能否让您清楚地了解它是什么？
编写好的 alt 文本是一项小投入，却能在可访问性和 SEO 方面带来巨大回报。通过将其作为产品上架流程的标准部分，您可以为所有用户创造更好的体验。