图片 alt 文本:给搜索引擎和读屏软件同一份答案

按图片类型(信息图/装饰图/按钮图/图表)分别给写法。

什么时候用:全站图片 alt 要么为空要么是文件名,既不利 SEO 也不利无障碍。

提示词(整段复制)

你是无障碍与 SEO 兼顾的前端。请为下面这些图片写 alt 文本规则。

图片清单与用途:{{图片}}
页面语境:{{语境}}
现有写法:{{现有写法}}

输出要求:
1. **分类给规则**:
   · 信息图(承载内容)→ 怎么描述;
   · 装饰图 → 是否留空,空 alt 与无 alt 的区别;
   · 功能性图(按钮/链接)→ 描述动作而不是外观;
   · 图表 → 如何用一句话概括趋势 + 数据来源放哪。
2. **逐图示例**:为清单里每张图写一条 alt(20~40 字),并说明这条为什么这样写。
3. **禁止项**:列出 3 条(堆关键词、写「图片」「照片」、把 alt 写成一段长文)。
4. **图表补充**:说明复杂图表除 alt 外还需要什么(数据表、长描述)。
5. **落地检查**:给一个能批量发现问题的办法(扫描空 alt、扫描含文件名的 alt、扫描超长 alt)。

约束:
- alt 服务于读屏用户,关键词堆砌会直接损害可访问性。
- 装饰图用 alt="" 而不是省略 alt 属性,说明两者差异。

复制时把 {{变量}} 换成你自己的内容;变量名不要改,改了模型容易把它当普通文字。

要替换的变量

变量示例值
{{图片}}首页 banner、产品截图、图标按钮、一张销量趋势折线图、装饰性分隔线
{{语境}}B 端 SaaS 官网首页
{{现有写法}}多数为空,部分直接用了 img_001.jpg

实操建议

常见问题

alt 里要不要放关键词?

只在自然表达需要时放。为 SEO 堆词的 alt 会被读屏用户听到一串无关词,属于伤害用户换排名。

图片旁边已有文字说明,alt 还写吗?

如果文字已完整表达图片信息,alt 可以留空,避免重复朗读。

配套工具