alt属性是图片被搜索引擎索引的底线，未写、为undefined或堆砌关键词会导致图片被忽略；内容图需描述主体+状态+上下文，装饰图必须alt=""，功能图应说明动作意图。
alt 属性不是 SEO 加分项，而是图片被索引的底线
没写 alt、值为 undefined、或堆砌关键词（如 alt="SEO优化 HTML教程"），搜索引擎会直接忽略这张图——它根本不会出现在图片搜索结果里。Google 不识别图像内容，只信任 alt 里的文字是否真实回答两个问题：“图里有什么”和“为什么放这张图”。填错 = 主动注销这张图。
内容图、装饰图、功能图的 alt 写法完全不同
同一张图在不同上下文里，alt 的职责可能彻底改变：
- 内容图（产品图、截图、信息图）：用一句话说清主体 + 状态 + 关键上下文，例如
alt="iPhone 16 Pro 拆机图,展示A18芯片与钛合金中框连接处" - 装饰图（分隔线、背景花纹、纯排版留白）：必须写
alt=""（空字符串），不是删掉属性，也不是写alt="decorative"或alt=" " - 功能图（图标按钮、链接缩略图）：描述动作意图，不是图形外观，例如
alt="筛选订单状态"，而非alt="下拉箭头图标" - 链接中的图片：
alt要说明点击目标，比如alt="查看红色无线耳机详情页"，而不是 “红色耳机照片”
动态渲染和 CMS 场景下 alt 最容易失效
React/Vue 模板或 CMS 后台插入的图片，alt 常因数据缺失变成字面量 undefined 或 fallback 到文件名（如 product-001.jpg），这类写法在无障碍审计中 100% 报错：
- React：避免裸写
alt={item.description}，应写成alt={item.description || "无描述图片"} - Vue：用
:alt="item.alt || ''"，空字符串比undefined更可控 - Yii2：
Html::img()必须把alt塞进第二个参数数组，如['alt' => '公司首页']，不能漏掉 - CMS 后台应强制填写「图片描述」字段，未填则后端默认输出
alt=""，而非硬塞alt="image"或文件名
响应式图片、SVG 和 background-image 的 alt 处理陷阱
srcset 和 <picture></picture> 不改变语义，所有 <source></source> 和最终 <img> 共享同一个 alt 值——别为 desktop 版和 mobile 版写不同描述：
- 内联
<svg></svg>不支持alt属性，必须用<title></title>标签（不是title属性），并包裹在<svg aria-hidden="false"></svg>中 -
background-image的图片对爬虫和读屏器完全不可见，必须改用<img>；若真无法替换，退而求其次用语义化容器 +role="img"+aria-label，但这只是次优解 - 文件名仍是第一眼线索：优先用
red-wireless-headphones.jpg而非IMG_8923.jpg，搜索引擎会先看文件名再读alt
<svg></svg> 的 <title></title> 替代方案，这些点最容易被跳过，但恰恰是线上环境出问题最多的环节。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
