alt属性是图片被搜索引擎识别的底线，必须准确回答“图里有什么”和“为什么放这张图”，装饰图写alt=""，功能图描述动作，动态图需防undefined，堆砌关键词、模糊描述、重复title等写法均导致失效。
alt 属性不是 SEO 的“加分项”，而是图片能否被搜索引擎识别的底线——没写、写错、堆砌关键词，等于这张图在搜索里彻底消失。
alt 属性怎么写才算有效描述
搜索引擎和屏幕阅读器只认 alt 里的文字，它必须回答两个问题：“图里有什么”和“为什么放这张图”。
- 内容图（如产品、截图、信息图）：用一句话说清主体+状态+关键上下文，例如
<img src="dashboard.png" alt="用户后台仪表盘截图，显示2024年Q1活跃用户增长23%，右上角有‘导出数据’按钮’> - 装饰图（分隔线、背景花纹）：必须写
alt=">（空字符串），不能删掉属性，也不能写 <code>alt="decorative"或alt="spacer" - 功能图（按钮、图标）：描述动作，不是形状，例如
alt="筛选订单状态"，而不是alt="下拉箭头图标" - 动态生成图（React/Vue 渲染）：避免
v-bind:alt="item.alt"直接绑定未定义值，应 fallback 到空字符串：v-bind:alt="item.alt || ''"
哪些写法会让 alt 失效甚至被惩罚
看似写了 alt，但实际等于没写，甚至触发垃圾信号判定。
- 纯关键词堆砌：
alt="SEO优化 HTML教程 前端开发 免费下载 高清图"—— 搜索引擎不信任，读屏器用户听不懂 - 模糊泛化：
alt="一张图片"、alt="风景"、alt="产品图"—— 没提供任何可索引语义 - 重复
title：alt="无线耳机"+title="无线耳机"——title对图片 SEO 零贡献，还可能造成读屏冗余 - 误加
role="img"：<img src="logo.png" alt="公司logo" role="img">——<img>已自带语义，加role="img"可能干扰辅助技术
响应式图片和 SVG 的 alt 处理要点
srcset 和 <picture></picture> 不改变语义，SVG 内嵌需额外处理，否则 alt 会失效。
-
<source></source>和<img>共享同一个alt—— 不要为不同尺寸写不同alt，例如桌面版全景图和手机版裁切人脸，仍统一描述核心对象：“团队合影，五人穿工装站在公司门口” - 内联
<svg></svg>必须配<title></title>标签（不是title属性），且包裹在<svg aria-hidden="false"></svg>中才可被读取 - 使用
background-image的“图片”：爬虫完全不可见，必须改用<img>，或退而求其次用语义化容器 +role="img"+aria-label，但这是次优解 - 文件名仍是第一眼线索：优先用
red-wireless-headphones.jpg而非IMG_8923.jpg，搜索引擎会先看文件名再读alt
最容易被忽略的是 CMS 或模板系统中 alt 的 fallback 逻辑——上传时没填描述，后端不该默认塞 “image” 或留空属性，而应检查是否为空字符串；JS 渲染时 undefined 会变成字面量 “undefined”，这种细节在无障碍审计里 100% 报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
