alt属性是HTML中必需属性，必须设置：装饰图用alt=""，信息图需一句话准确说明其功能或上下文意图，不可堆砌关键词、泛化描述或复用文案。
alt 属性不是“可加可不加”的装饰项
没写 alt，搜索引擎会直接忽略这张图的语义关联；写了但空着（alt=""）或乱填（如 alt="图片123"），等同于放弃一次关键词锚点和内容可信度信号。Google 明确将 alt 作为图像理解的首要依据——它不看文件名，不猜尺寸，只信 alt 里那句话。
电商详情页、博客配图、信息图表的 alt 写法差异极大
同一张图在不同上下文里，alt 必须重写，不能复用：
- 商品图（如 iPhone 15 Pro 钛金属蓝色）：
alt="iPhone 15 Pro 128GB 钛金属蓝色正面实拍图，显示灵动岛与超窄边框"—— 含型号、容量、颜色、关键视觉特征 - 博客配图（文章讲 CSS Grid 布局）：
alt="CSS Grid 布局示意图：三列两行网格容器，每个网格项标注 grid-area 名称"—— 强调结构与教学意图 - 纯装饰图（如分隔线 SVG）：
alt=""—— 仅限真正无信息量的图形，且必须确认该元素已用role="presentation"或 CSSbackground-image实现
常见错误：alt 堆砌关键词、照抄标题、留空后还加 title
title 属性对 SEO 几乎无影响，也不能替代 alt。以下写法全是负向信号：
-
alt="手机 手机价格 手机官网 苹果手机"—— 关键词堆砌，触发质量评估降权 -
alt="iPhone 15 Pro"—— 太简略，没说明是图、是截图、是渲染图还是真机图 -
alt=""+title="iPhone 15 Pro 官方售价"——title不被爬虫读取，无障碍用户也听不到 - 用中文逗号或顿号分隔多个概念：
alt="iPhone,15 Pro,钛金属,蓝色"—— 屏幕阅读器会逐字念出标点，体验断裂
本地开发时怎么快速检查 alt 是否合格
别等上线后被 Google Search Console 报告“图像缺少替代文本”。本地验证更高效：
- 浏览器按
Ctrl+Shift+I打开 DevTools → 切到Elements面板 → 搜索→ 逐个核对
alt值是否非空、非泛化、匹配上下文 - 用 Lighthouse（在 DevTools 的
Lighthouse标签页）跑一次 Accessibility 审计 → 查看 “Image elements have[alt]attributes” 是否 100% 通过 - 禁用图片加载（Chrome 设置 →
Preferences → Appearance → Show all images关掉）→ 直观看到alt文本是否能独立传达信息
真正难的不是写 alt，而是每次插入图片前，先问自己一句：“如果这图完全消失，用户还能不能知道它本该传递什么关键信息？” 这个判断过程没法自动化，也最容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
