Alt 文本
Alt 文本(替代文本)是写在 HTML <img> 标签 alt 属性中的描述性文本字符串。当图片无法渲染或无法被视觉感知时,它会替代图片显示。
Alt 文本(替代文本)是写在 HTML <img> 标签 alt 属性中的描述性文本字符串。当图片无法渲染或无法被视觉感知时,它会替代图片显示。
为什么它很重要
Alt 文本在无障碍和 SEO 两方面都发挥着关键作用。
第一,屏幕阅读器会朗读 alt 属性的值,使视障用户能够理解图片的内容。WCAG(网页内容无障碍指南)A 级标准要求为所有非文本内容提供替代文本。
第二,搜索引擎爬虫无法直接“看见”图片,因此它们依靠 alt 属性来理解图片的主题。Google 已正式确认 alt 文本是图片搜索的排名信号。撰写得当的 alt 文本能让图片更有可能出现在 Google 图片搜索以及 Google Lens 等视觉搜索工具中。
第三,ChatGPT 和 Perplexity 等生成式 AI 系统在分析图片时也会把 alt 文本作为重要的信息来源,这使其从 GEO(生成式引擎优化)的角度变得日益重要。
撰写指南
- 要具体。围绕这个问题来撰写:“如果用户看不到这张图片,他们会遗漏哪些信息?”
- 控制在 125 个字符以内。大多数屏幕阅读器会截断超过约 125 个字符的 alt 文本。
- 自然地融入相关关键词。把一两个与页面内容上下文契合的关键词自然地编织进去。
- 省略“image of”“photo of”或“picture of”之类的前缀。屏幕阅读器已经会把该元素朗读为
<img>,因此这些是多余的。 - 对装饰性图片使用空 alt(
alt="")。为不承担内容功能的装饰性图片添加描述,会给屏幕阅读器用户带来不必要的干扰。
好例子与坏例子
| 类型 | Alt 文本 | 原因 |
|---|---|---|
| 好 | 白色盘子上的手工纯素巧克力蛋糕 | 具体、简洁,传达了图片的核心信息 |
| 好 | 展示 2025 年每月自然流量趋势的折线图 | 清楚地描述了图表类型和数据主题 |
| 坏 | 蛋糕 | 过于含糊,无法判断是哪种蛋糕 |
| 坏 | 蛋糕照片图片甜点美味蛋糕巧克力蛋糕手工蛋糕纯素蛋糕 | 关键词堆砌,可能被标记为垃圾内容 |
| 坏 | IMG_20250301_142055.jpg | 原始文件名,对用户和搜索引擎都毫无意义 |
常见错误
- 关键词堆砌:在 alt 文本中反复罗列关键词可能被 Google 归类为垃圾内容,并严重损害用户体验。关键词应在上下文中自然地融入。
- 对所有图片使用相同的 alt 文本:在一个页面的多张图片上复制粘贴相同的描述,可能导致搜索引擎将它们视为重复内容。每张图片都应有反映其具体内容的独特描述。
- 完全省略 alt 文本:如果 alt 属性本身缺失,屏幕阅读器会朗读文件名,严重降低无障碍性。即使是装饰性图片也必须包含一个空的 alt 属性(
alt="")。 - 不加审核地使用 AI 生成的 alt 文本:AI 工具建议的 alt 文本可能未能充分反映上下文。始终需要人工审核并针对页面内容进行优化。
- 逐字照抄正文:把图片旁边出现的同一段说明文字或正文放进 alt 文本,会让屏幕阅读器用户听到同样的内容两次。Alt 文本应补充而非重复周围的文本。
Sources:
相关 inblog 文章
inblog 如何提供帮助
inblog 的编辑器在插入图片时提供 Alt 文本输入框,并在其留空时显示警告。