alt属性必须准确描述图片内容，内容图写具体场景和关键词，装饰图留空alt=""，链接图说明动作；title仅在必要时添加且不重复alt；role="img"仅用于非img元素，不可替代alt。
alt 属性怎么写才不算白填
alt 不是“随便写个描述”，而是搜索引擎判断图片内容的唯一文本依据，也是屏幕阅读器向视障用户传达信息的全部来源。填错或留空，等于把这张图从SEO和无障碍里直接抹掉。
- 内容图片（比如产品图、示意图）必须写具体描述：
alt="黑色无线降噪耳机侧视图，佩戴在人耳上，背景为浅灰渐变"—— 包含主体、颜色、状态、场景，自然带入关键词“无线降噪耳机” - 纯装饰性图片（如分割线、背景花纹）应明确留空：
alt=""，不是删掉属性，也不是写“无意义图片”或“spacer” - 避免堆砌关键词：
alt="耳机 蓝牙耳机 降噪耳机 无线耳机 便宜耳机"这类写法会被视为垃圾信号，可能降低整页可信度 - 如果图片是链接的一部分（如图文按钮），alt 要说明点击后的动作，比如：
alt="查看iPhone 16 Pro详细参数"，而非只说“iPhone图片”
title 属性要不要加？加了有什么副作用
title 属性在图片上会触发浏览器悬浮提示，但它对SEO几乎零贡献，Google 明确表示不将其作为图片理解依据。加它，更多是权衡用户体验与潜在干扰。
- 仅在有明确交互价值时添加，例如：
title="点击查看高清拆解图"，给用户一个操作预期 - 避免和
alt内容重复，更不要写成关键词搬运，比如title="无线耳机 降噪耳机 蓝牙耳机" - 移动端基本不显示
title提示，且部分屏幕阅读器会重复读出alt和title，造成冗余 - 如果图片已用
aria-label或包裹在button中，title就完全多余
role="img" 是什么？什么时候必须加
role="img" 是 ARIA 属性，用于告诉辅助技术“这个容器（比如 div 或 svg）本质上是一张图片”，但它**不能替代 alt**。只有当图片无法用 <img alt="HTML怎么设置图像SEO优化属性_HTML alt title role综合教程【搜索】" > 标签原生实现时，才需要它配合 aria-label 或 aria-labelledby 使用。
- SVG 图标常用：
<svg role="img" aria-label="搜索图标">...</svg>—— 因为 SVG 本身没有alt属性 - CSS 背景图（
background-image）无法被爬虫和读屏器识别，此时需额外用语义化 HTML +role="img"+ 文本替代，但强烈建议优先改用<img alt="HTML怎么设置图像SEO优化属性_HTML alt title role综合教程【搜索】" > - 误用常见坑：
<img src="..." alt="logo" role="img">——<img alt="HTML怎么设置图像SEO优化属性_HTML alt title role综合教程【搜索】" >已自带语义，加role="img"属于画蛇添足，甚至可能干扰某些读屏器
文件名和 srcset 都影响 SEO，但优先级不同
搜索引擎在解析图片时，会按顺序参考：文件名 → alt → srcset 中的路径名 → 页面上下文。其中文件名是第一眼看到的信息，而 srcset 主要服务响应式加载，间接影响 SEO（通过提升页面速度）。
立即学习“前端免费学习笔记（深入）”；
- 文件名必须小写+连字符：
red-running-shoes-front-view.jpg，而非IMG_2345.JPG或red_running_shoes.png -
srcset本身不传递语义，但路径中若含描述性单词（如/images/shoes/red-running-shoes-2x.webp），可辅助理解；别为了 SEO 故意改路径，保持结构清晰更重要 - WebP/AVIF 格式能显著减小体积，加快 LCP（最大内容绘制），而 LCP 是 Core Web Vitals 的关键指标，直接影响排名 —— 所以压缩格式不是“锦上添花”，是硬性门槛
- 懒加载用
loading="lazy"即可，无需 JS 库；但首屏关键图（如 banner 主图）务必去掉该属性，否则可能被延迟渲染，影响 SEO 抓取和用户感知
最容易被忽略的一点：很多开发者以为只要写了 alt 就算完成图片 SEO，其实文件名、格式、加载时机、是否被 CSS 遮盖或 JS 动态插入——这些都会让搜索引擎“看不见”那张图。优化得闭环，才真有效。
