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
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
