图片alt文本怎么写？兼顾SEO与无障碍的实用指南
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /2f71a4d4d7cb.html
📄
图片alt文本是一段嵌入在图片标签里的文字说明，用于在图片无法加载时显示替代内容，同时帮助搜索引擎识别图片主题，也让依赖屏幕阅读器的视障用户能够理解图片信息。写好alt文本，既是对网站搜索流量的基本投资，也是提升页面可访问性不可或缺的一环。
1. 先判断图片性质，再决定怎么写
写alt之前，先问自己一个问题：这张图片在页面里承担什么角色？不同角色的图片，处理方式截然不同。
1.1 信息型图片：精准概括核心内容
当图片本身承载着重要信息，比如商品实拍、数据截图或流程示意图，alt文本就要把图中最关键的信息提炼出来。例如一张季度销售对比图，可以写“公司第三季度各地区营收对比柱状图，华东区领先”，而不是一句“销售数据图”就草草带过。写完后可以自测：如果遮住图片只读alt，用户能否获得与看图相当的信息量？
1.2 装饰型图片：直接留空处理
对于背景纹理、分割线、纯装饰性插图，正确的做法是将alt设为空值，即alt=""。这样屏幕阅读器会直接忽略，不会打断视障用户的朗读节奏；搜索引擎也不会对无意义的装饰图做错误解读。请避免填入“装饰图片”“示例图”这类文字，它们既不能提供信息，又浪费了资源。
2. 关键词融入要自然，别让堆砌毁了体验
alt文本是搜索引擎判断图片主题的重要信号，但这并不意味着要把关键词硬塞进去。用一个通顺的句子描述图片，在恰当的位置放入关键词，效果远好于机械罗列。
比如一张咖啡店门头的图片，写成“上海某社区咖啡店门口摆放着绿植和手写菜单黑板”就比“咖啡店 咖啡 上海 门头 绿植”自然得多。后一种写法读起来生硬，还容易触发搜索引擎的堆砌识别机制，反而得不偿失。
另外要留意alt与title属性的分工：alt是解释图片内容的主力，对SEO和无障碍都至关重要；而title只在鼠标悬停时短暂显示，属于辅助性提示。不要把关键信息只放在title里而忽略alt，那样依赖屏幕阅读器的用户会完全失去这部分内容。
3. 常见图片类型的写法参考
不同类型的图片在实操中可以采用有针对性的描述策略，这里列举几种常见情况供参考。
- 按钮图片：直接写明功能用途，例如“提交订单”“下载PDF版本”“开始免费试用”。
- 链接图片：描述目标页面的主题，比如一张指向退换货政策的图片，可写“查看七天无理由退换货规则”。
- 人物照片：标明姓名身份，如“运营主管王芳在年度总结会上发言”；若是通用的默认头像，则留空。
- 流程长图：用一句话概括整张图的主旨，比如“咖啡豆从烘焙到萃取的全流程示意图”，具体细节交给正文文字说明。
- 功能图标：写出交互意图，如“购物车”“搜索”“菜单”，而不是描述外观“一个购物车的形状”。
4. 常见错误与避坑要点
在撰写alt时，以下问题比较常见，值得提前留意。
- 把所有图片都写一样：页面多张相似图片使用同一套alt，容易让搜索引擎分不清主次，建议每张图结合自身上下文写出差异。
- alt写得过长：搜索引擎和屏幕阅读器对超长文本的容忍度有限，一般控制在几句之内，详细信息留给正文处理。
- 忽略图片周围的语境：如果图片旁边已经有文字说明，alt就不必重复全部信息，只需补充关键差异即可。
- 直接复制文件名：类似“DSC_0023.jpg”这类文件名没有任何语义价值，务必手动撰写有意义的描述。
一个实用的检查技巧：写完alt后大声读一遍，如果听起来像正常人在介绍图片，那通常就是合格的写法。
5. 常见问题
5.1 alt文本有没有字符数限制？
没有严格的硬性限制，但建议控制在125个字符以内。过长的alt可能出现截断，而且屏幕阅读器会连续朗读长文本，影响收听体验。
5.2 图片标题和alt文本可以重复吗？
不建议完全重复。alt负责解释图片内容，而title属性是悬停提示，两者的定位不同。如果重复，既浪费了title的辅助作用，也会让屏幕阅读器用户听到两遍相同的信息。
5.3 所有图片都必须写alt吗？
不是。纯装饰性图片应该将alt留空，信息型图片才需要认真填写。判断标准是：如果去掉这张图片，页面的信息或功能是否受影响，若不受影响则属于装饰用途。
6. 结语
写好alt文本并不复杂，核心在于先判断图片类型，再用一句通顺自然的话概括图片的关键价值，同时兼顾搜索关键词的融入。建议从今天开始，对网站中信息量较大的产品图、流程图和链接图逐一补充规范的alt描述，并定期检查是否有堆砌或遗漏的情况。长期坚持下来，网站的搜索可见性和用户访问体验都会得到切实提升。
