alt属性是图片被搜索引擎索引的底线，未写、为undefined或堆砌关键词将导致图片被忽略；内容图、装饰图、功能图及链接中图片的alt写法各不相同，动态渲染和响应式场景下需特别注意空字符串处理与语义替代方案。

alt属性不是SEO加分项，而是图片被索引的底线

没写alt、值为undefined、或堆砌关键词（如alt="SEO优化 HTML教程"），搜索引擎会直接忽略这张图——它根本不会出现在图片搜索结果里。Google 不识别图像内容，只信任alt里的文字是否真实回答两个问题：“图里有什么”和“为什么放这张图”。填错 = 主动注销这张图。

内容图、装饰图、功能图的alt写法完全不同

同一张图在不同上下文里，alt的职责可能彻底改变：

在SEO发布前，从路由清单生成XML网站地图和robots.txt

当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。

下载

• 内容图（产品图、截图、信息图）：用一句话说清主体 + 状态 + 关键上下文，例如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% 报错：

• 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

文件名、CMS fallback 逻辑、<svg></svg>的<title></title>替代方案，这些点最容易被跳过，但恰恰是线上环境出问题最多的环节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！