不规范的alt属性不会触发seo处罚，但会导致图片完全不被索引；undefined或空格字符串（如alt="undefined"或alt=" "）均视同未写，必须显式fallback为alt=""。
不规范的 alt 属性不会触发“SEO处罚”，但会导致图片完全不被索引——搜索引擎直接跳过这张图，等于你在图片搜索里彻底隐身。
alt 写成 undefined 或空格字符串会怎样
React/Vue 动态渲染时，alt={item.alt} 若 item.alt 是 undefined，最终 HTML 会输出 alt="undefined"；若后端 fallback 成 " "（空格），读屏器会读作“空白”，爬虫则视同无效。这两种情况都等价于没写 alt。
- 必须显式 fallback 到空字符串：
alt={item.alt || ""}（React）或:alt="item.alt || ''"（Vue） - CMS 后台未填描述时，后端模板应输出
alt=""，而非硬塞alt="image"或文件名 -
alt=" "（含空格）和alt=""（纯空）效果不同：前者会被读作“空白”，后者被跳过
关键词堆砌是自废武功，不是加分项
搜索引擎识别 alt 的逻辑是语义可信度，不是关键词密度。写 alt="无线耳机 蓝牙耳机 降噪耳机 便宜耳机" 不会提升排名，反而触发垃圾信号判定，连带降低整页图片权重。
- 有效写法是自然句式：包含主体+状态+上下文，如
alt="黑色Sony WH-1000XM5佩戴在人耳上，正在演示主动降噪功能" - 避免重复 title：如果
title="Sony WH-1000XM5"，alt就不该再写一遍，否则读屏器会读两遍 - 文件名本身也是信号源，
black-sony-wh1000xm5-noise-cancellation.jpg比IMG_1234.jpg更可信
装饰图、功能图、内容图的 alt 处理逻辑完全不同
同一张图在不同场景下，alt 的职责可能翻转——错配类型，轻则失效，重则干扰辅助技术。
- 装饰图（分隔线、背景花纹）：必须写
alt=""，删掉属性或写alt="decorative"都不行 - 功能图（图标按钮、筛选箭头）：描述动作意图，如
alt="按价格升序排列"，不是alt="向上箭头图标" - 链接中的图片：
alt要说明目标，如alt="进入iPhone 16 Pro技术白皮书PDF下载页"，而非alt="iPhone 16 Pro截图" - 内联
<svg></svg>不支持alt，必须用<title></title>标签 +aria-hidden="false"
最常被忽略的不是怎么写，而是谁来兜底：CMS 上传流程是否强制校验 alt 字段？模板层有没有 fallback 到 "" 的默认逻辑？没有这两层保障，再规范的写作指南也只是一纸空文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
