图片Alt文本怎样写才合格？SEO与无障碍兼顾的完整方法
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /f9692ffb6da3.html
📄
网页里每一张图片背后的Alt属性，看似只是段不起眼的代码，却同时在给搜索引擎和依赖屏幕阅读器的用户传递画面信息。写对了，图片有机会进入搜索结果、带来额外流量；写错了，轻则影响收录，重则让部分访客完全读不懂页面。掌握这套写法，是提升站点质量与访问体验最划算的投入之一。
1. 下笔前先分清图片的角色
不是每一张图都需要认真写一段描述。动手之前先做一次分类：一类图片承载真实信息，比如产品细节、数据报表、界面截图；另一类纯粹是视觉装饰，像是背景纹理、分隔横线、氛围插画。
判断标准很直接：假设这张图加载不出来，页面的核心内容会不会变残缺？若会，就必须配详尽描述；若不影响，直接把Alt写为空（alt=""）即可。举个例子，服饰详情页展示面料细节的近距离特写，必须写清楚材质和工艺；而文章末尾仅为版式美观添加的树叶点缀，就没必要让读屏软件特意念出一句“装饰性叶片图案”。
2. 把替代文本写准确的四条要领
定好哪些图需要处理之后，关键就是怎么写得既传神又简洁。下面四条规则几乎能覆盖所有内容场景。
2.1 说清画面内容，别堆砌搜索词
替代文本的核心任务是还原真实画面，而不是讨好排序算法。“原木色餐桌上一只白色陶瓷马克杯，杯口飘着热气”是合格描述；“餐桌 马克杯 咖啡 木头 家居 简约”这种词语拼接，读屏用户听得一头雾水，搜索端也几乎带不来有效匹配。若图中含有文字信息——比如宣传单上的活动时间、包装盒上的产品名称——请把文字原样照写出来，那往往是访客最想确认的内容。
2.2 写得精短，别超过必要长度
读屏软件会逐字朗读整段文字，描述越长，听众获得核心信息就越慢。一句话讲得清的，绝不要扩成段落。“夕阳下沙滩上的两行脚印”已经足够，无需再补成“傍晚时分的金黄色阳光照射在湿润沙滩上，沙滩表面留有并排行走留下的两行凹陷痕迹”这类冗长细节。若图片信息确实丰富，把详细解释放到图片下方的正文段落里更合适，替代文本只给概括性结论。
2.3 省略开场白，直接进入主题
“下图展示的是”“这张图片呈现了”都属于多余前缀——读屏软件播报前会自动提示“图片”类型，访客已经知道自己面对的是图。直接从画面主体开始写就好：“墨绿色帆布双肩包侧面的拉链口袋”显然比“这是一张展示墨绿色双肩包侧面口袋的图片”利落得多。
2.4 整图可点击时，写清去向
当图片本身就是一个链接，替代文本应说明点击后会发生什么，而不是描述画面外貌。顶部Logo链向品牌主站，应写“前往某某品牌官方网站首页”；一张推广新课程的横幅，不妨写“查看零基础摄影课程详情”，而非描写横幅上的人物姿态或配色组合。
3. 不同页面场景的描述落点
同一张素材放进不同语境，想传达的重点差异很大。参考这几类常见页面的偏好，能让描述更贴近读者的真实预期。
- 商品展示：优先确认品牌、型号、材质、规格、颜色。“某品牌户外保温杯 哑光黑 500毫升”远比“一个杯子”有用，用户若寻找同款，这类信息能直接命中。
- 操作教程截图：描述画面中正在发生的动作与按钮名称。比如“点击右上角‘导出’按钮后弹出的格式选择窗口”，这样读者即使看不清图中细节，也能跟上步骤。
- 文章配图（非核心）：写一句对理解正文有帮助的背景交代即可，如“街角咖啡馆门口摆放的露天座位”，不必额外描述光线、行人等与主题无关的元素。
- 信息图表：若图标文字较多，替代文本提炼核心结论；完整数据建议在正文或表格里呈现，避免让读屏用户听一长串数字。
4. 这些常见误区要避开
写替代文本时，有些习惯性做法看似省事，实则会让SEO和可访问性同时受损。
- 把关键词硬塞进每张图：在装饰图上硬安几个词，容易让搜索引擎判定为堆砌，反而不利于权重。
- 与正文内容完全重复：图片旁的段落已经详细说了数据涨幅，替代文本再原样抄一遍，读屏用户会听到两遍同样的信息，徒增疲惫。
- 滥用空Alt：凡是含有可见文字的图片（如带价格的优惠券），一律不能写成空值，否则这些信息对部分用户彻底消失。
- 用语模糊：“相关图片”“更多信息”这类替代文本等于没写，读者无法获得任何有效线索。
5. 常见问题
5.1 Alt属性可以留空不写吗
留空（alt=""）是合法且必要的做法，但只适用于纯装饰性图片。判断依据仍是：去掉这张图，内容是否完整。核心信息图、按钮图、含文字的图若留空，会同时伤害搜索引擎收录和无障碍体验。
5.2 替代文本写多长比较合适
没有硬性规定，但从读屏体验出发，建议控制在125个字符以内。大多数普通图片一到两句描述即可完成；确实信息密集的图，在正文里展开细述，替代文本只保留概括句。
5.3 图片文件命名和Alt文本有区别吗
有关系但相互独立。文件名（如white-mug-on-table.jpg）用于帮助搜索引擎初步识别图片内容，属加分项；Alt文本则是面向用户与爬虫的主要说明文字，优先级远高于文件名。两者最好都能体现画面重点，但不必写成完全一样。
6. 结语
给图片写替代文本，本质是为每一位访问者提供平等的理解机会。从今天开始行动：先清理现有页面里最关键的几张图，按“是否承载信息”分类，再遵循简洁、具体、不堆砌的原则重写一遍。顺手把做图时配的文件名也规范化，整套工作半小时内就能完成。坚持这个习惯，网站的搜索表现和访问友好度都会得到实实在在的提升。
