alt属性不提升通用搜索排名，但决定图片能否出现在图搜结果中；缺失、无效或堆砌关键词将导致图片不被收录，正确写法需按内容图、功能图、装饰图分类，精准描述主体、状态、意图或声明为空字符串。
alt 属性本身不提升页面在 Google 或百度主搜索中的排名，但它决定这张图能不能出现在图片搜索结果里——没写、写成 undefined、空格字符串 " " 或堆砌关键词，等同于主动让图片在图搜中“消失”。
alt 是图片被索引的唯一文字依据
搜索引擎不会分析像素，只读 HTML 中的文本。它靠 alt 判断“这张图是什么”和“为什么放这儿”。以下情况直接导致图片不被收录：
-
alt属性完全缺失 → 爬虫跳过该<img> -
alt=""（空字符串）→ 合规，明确声明“装饰图”，爬虫跳过但无障碍通过 -
alt=" "（含空格）或alt="image"→ 被视为无效值，等同于未设置 -
alt="{{item.desc}}"且后端未渲染 → 爬虫看到字面量{{item.desc}}，无语义
内容图、功能图、装饰图的 alt 写法完全不同
同一张图在不同上下文里，alt 必须重写，不能复用模板：
- 内容图（产品图、截图、信息图）：
alt="iPhone 16 Pro 拆机图,展示A18芯片与钛合金中框连接处"—— 主体 + 状态 + 关键上下文 - 功能图（按钮图标、链接缩略图）：
alt="筛选订单状态"—— 描述动作意图，不是图形外观 - 装饰图（分隔线、背景花纹）：
alt=""—— 必须是空字符串，不能删属性，也不能写alt="decorative" - 链接中的图：
alt="查看红色无线耳机详情页"—— 说明点击目标，不是描述图本身
动态渲染和响应式场景下最容易失效
React/Vue 模板、CMS 后台插入的图片，alt 常因数据缺失变成 undefined 或 fallback 到文件名（如 product-001.jpg），这类写法在 Lighthouse 审计中 100% 报错：
- Vue：用
:alt="item.alt || ''"，空字符串比undefined更可控 - React：避免
alt={item.alt}直接绑定，应加默认值alt={item.alt ?? ''} -
<picture></picture>和srcset不改变语义 —— 所有<source></source>共享同一个<img>的alt，别为 desktop/mobile 写不同描述 - 内联
<svg></svg>不支持alt，必须用<title></title>标签（不是title属性），并包裹在<svg aria-hidden="false"></svg>中
真正难的不是写对单个 alt，而是每次插入图片前，确认它周围的正文、<figcaption></figcaption>、标题是否语义一致；更关键的是，CMS 后台是否强制填写「图片描述」字段，未填时后端是否真的输出 alt=""，而不是硬塞 alt="image" 或文件名 —— 这些环节线上出问题的概率最高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
