Alt Text（替代文字）：是什么、为什么重要、怎么写才不尴尬
Alt Text 帮助搜索引擎和读屏软件理解图片。本文给出写法、例子、常见坑，以及如何快速审计缺失的 alt。
2026-03-01
·
1 分钟阅读
Alt Text（替代文字）就是给图片配的一段文字，用来在“看不到图片”的时候告诉人和机器：这张图是什么。HTML 里大概长这样：
<img src="/images/lcp-example.png" alt="LCP 折线图：优化后 Largest Contentful Paint 降到 2.1 秒">
我自己写 alt 的底线很简单：这句话读出来要像人写的，且放在这个页面上说得通。
为什么 alt 重要（以及什么时候没那么重要）
Alt Text 主要解决三件事：
- 无障碍可访问性： 读屏软件会把 alt 读出来。写成“img_123”那种，基本等于让真实用户吃苦。
- 图片理解： 搜索引擎会用 alt 作为线索来理解图片，尤其是截图、图表、产品图这类“信息型图片”。
- 图片加载失败的兜底： 图片挂了，alt 往往是页面上唯一还能说明情况的东西。
如果是一张纯装饰图（比如背景点缀、分割线），alt 的重要性就低很多，甚至应该用空 alt。
好的 alt vs 坏的 alt（快速对比）
坏（太空）：
- “image”
- “screenshot”
坏（堆词，很像作弊）：
- “best seo audit tool free seo checker website audit seo tools”
好（具体、短、贴合上下文）：
- “Fennec SEO Checker 审计摘要截图：3 个 Critical 问题”
- “产品图：红色跑鞋，侧面，白色鞋底”
- “流量图：canonical 配错后自然流量下滑 40%“
一个不容易写崩的写法
我一般用这个小模板：
- 它是什么？（照片 / 截图 / 图表 / 图标）
- 关键信息是什么？（读者需要记住的点）
- 必要时补一点上下文（比如页面名、指标名、关键标签）
不用写作文，也不必把 UI 的每个按钮都描述出来。
常见坑
1）装饰图别写成“有意义”的 alt
纯装饰图建议写空 alt：
<img src="/images/divider.svg" alt="">
这样读屏软件会跳过，不会在长文里反复读“divider / 装饰图”，听起来真的会崩溃。
2）图片当链接时，alt 就是“链接文字”
如果图片本身是一个链接，alt 经常会变成链接的可读文本。建议写得更像按钮：
<a href="/audit/">
<img src="/images/button.png" alt="开始免费 SEO 审计">
</a>
3）截图怎么写
截图尽量包含“页面名 + 你想让人看到的那一点”：
- “GSC 仪表盘：最近 28 天点击与曝光趋势”
不要把全屏所有控件都念一遍，那是转录，不是 alt。
怎么快速审计 alt 问题
大多数时候你只需要抓两类问题：
- 缺失 alt：
<img ...>没有alt属性。 - 空 alt 用错地方：
alt=""用在图表、产品图、关键截图上。
如果你在修一个站点，不想手动翻几十页，可以用爬虫型的审计；如果只是快速看单页，用扩展更省事。
回到词汇表
想看一句话定义，可以从这里跳回去：Glossary 里的 Alt Text。