图片alt属性实用填写指南：兼顾SEO优化与无障碍体验
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /2f44fff5fc99.html
📄
图片的alt属性，简单说就是给图片配的一段文字说明。它有三个核心作用：图片加载不出来时，用户能看到这段文字；搜索引擎靠它理解图片内容；视障用户通过屏幕阅读器能听到图片的描述。写alt时把这三件事放在一起权衡，才能给出合格的替代文本。
1. 动笔之前先判断图片的角色定位
写好alt的第一步，是弄清楚这张图在页面里承担什么职责。如果图片传递着实质信息，比如产品实拍、统计图表、操作界面截图，alt就要把核心信息讲明白。例如一张展示季度营收的柱状图，alt可以写成“二季度营收柱状图，对比一季度增长12%”。反过来，如果图片只是装饰用途，比如页面分隔线、背景纹理或纯色块，正确的处理方式是让alt保持空值（alt=""），既不要删掉这个属性，也不要填入“装饰图”这类没有意义的描述。
电商页面里产品图的alt，建议带上品牌、型号和关键卖点，比如“海尔变频滚筒洗衣机 10公斤 高温除菌”。最容易犯的错是只写“产品图”“照片”这类笼统词，或者干脆把整个页面标题复制进alt里，这两种做法对用户和搜索引擎都没帮助。
2. 顾排名与阅读体验的写法技巧
搜索引擎确实会把alt当作判断图片主题的重要信号，但这不等于可以在alt里堆砌关键词。自然的写法通常先用一句话说清图片内容，再顺势带出目标关键词。比如一张西湖断桥的照片，写成“西湖断桥雪景，杭州热门打卡地”就比“杭州旅游 杭州景点 西湖门票”顺眼得多，后者读起来生硬，还可能被搜索算法判定为关键词堆砌。
同时要分清alt和title两个属性的差异。alt是图片的替代文字，必须有；title是鼠标悬停时冒出的提示条，可有可无。千万别因为觉得alt难写，就指望靠title来弥补信息缺失，title并不能替代alt的作用。
3. 不同类型图片的alt填写规则
实际工作中，图片用途五花八门，需要按类型分别处理。
- 按钮类图片：alt直接写按钮的动作结果，比如“添加到购物车”“立即预约”“确认支付”。
- 超链接图片：alt描述点击后到达的内容，例如图片指向一篇测评文章，alt写“查看详情：2025年蓝牙耳机横向测评”。
- 人物肖像：真实人物写清楚姓名和身份，比如“创始人王芳在发布会上发言”；若是通用的默认头像，alt留空即可。
- 长图或信息图：alt概括整张图的主题，比如“家庭收纳技巧全攻略信息图”，图中的细节内容在正文里展开说明。
- 功能图标：直接写明功能含义，比如齿轮图标alt写“设置”，放大镜图标alt写“搜索”，不要写“齿轮图标”“放大镜图形”这种描述外观的词。
4. 新手最常见的几种错误
alt写得不合适，轻则拖累搜索表现，重则破坏用户体验。
- 完全漏掉alt属性，或者写了但值是空的（除非是装饰图）。这样屏幕阅读器会把文件名读出来，用户听到的就是“IMG_20250420_0930”这类乱码。
- alt写成长篇大论，比图片本身还复杂。原则上一句话能说清就好，控制在20字以内更稳妥。
- 重复正文已经讲过的信息。如果正文段落已经写了“本季度净利润同比增长18%”，alt再写一遍纯属多余，还会让读屏用户感到厌烦。
- 忽略装饰性图片的处理。给它们空的alt属性是对的，但不写alt属性是错的，两者效果完全不同。
5. 常见问题
5.1 图片alt里要不要加品牌名和关键词？
可以加，但前提是自然融入。比如产品图里品牌和型号本来就在视觉范围内，把“品牌+型号+核心卖点”组合进alt是合理的。但不要为了凑关键词把无关的词硬塞进去，那样容易被搜索引擎处罚。
5.2 如果一张图片内容很复杂，alt写不下怎么办？
alt适合承载简短说明，复杂内容建议在图片下方的正文段落里展开描述。alt只需概括这张图的主题，详细数据、流程步骤等内容放在正文中交代即可，这样既服务了普通用户，也方便读屏用户获取完整信息。
5.3 图片已经配了说明文字，还要写alt吗？
需要。屏幕阅读器会先读alt，再读旁边的正文说明，如果两者内容重叠，读屏用户会听到两遍差不多的信息。此时alt应简短概括，正文说明负责详细展开，两者分工不同、互不冲突。
6. 总结
写alt并不复杂，核心判断依据就是图片在页面里有没有实际作用。有，就把关键信息写清楚，兼顾描述性和关键词；没有，就留空。每次写完检查一遍：文字是否简短、是否重复正文、是否准确对应图片内容。养成这个习惯，页面在搜索表现和无障碍体验上都会有明显改善。
