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