图片alt属性设置指南：SEO优化与无障碍访问关键要点
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /5ea5f67091d4.html
📄
图片的alt属性是为无法直接查看图片的用户和机器准备的一段文字说明。当图片加载失败时，这段文字会替代图片显示；搜索引擎通过它理解图片内容；视障人士借助屏幕阅读器听取这段描述。真正合格的alt文本，需要同时兼顾这三个用途。
1. 判断图片角色再决定怎么写alt
动笔写alt之前，先想清楚这张图在页面里承担什么职责。如果图片携带实质性信息，比如商品外观、数据图表、操作界面截图，alt就要把图中核心内容讲透。例如一张展示用户增长趋势的曲线图，alt可以写成“2024年1月至6月月活用户增长曲线，6月突破500万”。反过来，如果图片只是为了点缀排版，比如分割线、背景纹理或装饰性图形，正确做法是把alt设为空值（alt=""），既不能删掉这个属性，也不要填入“装饰图”“点缀”这类毫无信息量的词。
商品图片的alt建议包含品牌、型号和关键卖点，例如“戴森V12吸尘器 无线轻便 大吸力”。要避免只写“照片”“商品图”，也不要简单复制页面标题充当alt。
2. 关键词融入要有技巧，别硬塞
搜索引擎确实把alt当作识别图片主题的重要信号，但这不意味着可以堆砌关键词。自然的写法是先描述图片内容，再把目标关键词自然地接在末尾。比如一张深秋银杏大道的照片，写成“北京钓鱼台银杏大道秋景，京城赏秋热门去处”就比“北京旅游 银杏大道 赏秋攻略 北京景点”更符合阅读习惯。后者刻意堆砌，容易被识别为作弊。
还要分清alt和title的区别。alt是图片的替代内容，不可或缺；title只是鼠标悬停时的气泡提示，可有可无。不要指望用title来补救缺失或劣质的alt文本。
3. 区分图片类型，采用不同写法
实际场景里图片用途五花八门，分类处理更稳妥。
- 按钮类图片：alt直接写按钮动作，例如“确认付款”“发送验证码”“下载报告”。
- 带链接的图片：alt描述点击后的目的地，比如图片指向某篇教程，alt写“查看详情：如何保养机械手表”。
- 人物照片：真实人物写姓名和身份，如“产品经理张晓在发布会上演示新功能”；如果是系统默认的头像占位图，alt留空。
- 信息图或长图：alt概括整体主题，比如“咖啡豆从种植到烘焙全流程示意图”，细节内容在正文中补充。
- 功能图标：直接写功能含义，购物车图标写“购物车”，放大镜图标写“搜索”，而不是“放大镜图形”。
4. 这些坑坚决不能踩
alt写不好，轻则拖累搜索表现，重则破坏用户体验。
- 完全不写alt或留空值。这样屏幕阅读器会把图片文件名读出来，比如“DSC02345.JPG”，对用户毫无意义。
- alt写成长篇大论。原则上控制在三五句话以内，能在一句话里说完最好。
- 复制正文已有内容。如果正文已经写明“本月销售额环比增长12%”，alt再重复一遍纯属冗余。
- 忽略装饰性图片。给装饰图写空的alt（alt=""）是规范做法，而直接不写alt属性会让屏幕阅读器读出文件名，两者效果截然不同。
5. 常见问题
5.1 alt文本建议写多少字合适？
一般控制在15到50个中文字符之间，说清楚图片的核心信息即可。以能在一两秒内读完为衡量标准，过长的描述反而稀释关键信息。
5.2 产品图片的alt要不要写价格？
不建议写。价格变动频繁，alt写死容易过时，而且搜索引擎与用户更关心产品本身。把品牌、型号、规格写清楚就够了，价格放正文中展示更灵活。
5.3 背景图需要写alt吗？
CSS背景图本身不需要alt属性，因为它是纯装饰性的。但如果背景图中包含重要文字或信息，就应该写成HTML图片并补充alt，或者把文字内容放到正文里。
6. 总结
写好alt的核心，是先判断图片用途，再针对性地描述信息。内容图要把关键信息说清，按钮图要说明动作，装饰图留空即可。写入关键词时保持自然，不堆砌、不复制正文，控制好篇幅。每次发布前，可以随机抽查几张图片，用屏幕阅读器听一听alt的实际效果，很快就能发现哪些地方需要改进。把这几条落到实处，图片的SEO价值和可访问性都会明显提升。
