<picture>本身不提升SEO排名，它只是容器，真正被索引的是<img>的src和alt；无media或type的<source>无效，且多余嵌套反而拖慢LCP。
为什么只用 <picture> 不提升 SEO 排名
<picture> 本身不提供语义，搜索引擎不靠它识别图片内容。它只是个容器，真正被索引的是里面 <img> 的 src 和 alt。如果写成 <picture><img src="a.jpg" alt="..."></picture>，等于多套了一层 DOM，还可能拖慢 LCP——尤其当 <img> 在首屏时，loading="lazy" 会被浏览器忽略，但 <picture> 的解析开销仍存在。
<source> 必须带 media 或 type 才生效
没配 media（如 (max-width: 768px)）或 type（如 image/webp），<source> 就是摆设，浏览器直接退回到 <img> 的 src。常见错误包括：
- 只写
<source srcset="small.jpg">，没media也没type -
media值写错，比如max-device-width（已废弃）或漏括号：max-width: 768px→ 必须是(max-width: 768px) -
type写成webp而不是image/webp，导致现代浏览器跳过该<source>
alt 只属于最外层 <img>，和 <source> 无关
<picture> 里可以有多个 <source>，但 alt 属性只能、也必须写在闭合的 <img> 标签上。搜索引擎和读屏器只读这一处。容易踩的坑：
- 误以为不同尺寸图该配不同
alt，比如桌面版写“全景办公室”，手机版写“三人会议特写”——这是错的，语义必须统一 - 动态渲染时把
alt绑定到未定义变量，如 React 中写alt={item.alt}，而item.alt是undefined，结果生成alt="undefined"，比不写还糟 - 用 CMS 自动生成图片时，后端 fallback 写成
alt="image"或留空字段，实际应强制为alt=""
真正影响 SEO 的是文件名 + alt + 页面上下文，不是 <picture> 嵌套本身
<picture> 的价值在于加载性能：用 srcset 或 <source> 提供 WebP/AVIF 或响应式尺寸，缩短 LCP，间接提升排名。但 Google 不会因为你用了 <picture> 就给图片加权。决定能否进 Google Images 的，还是这三样：
立即学习“前端免费学习笔记（深入）”；
- 文件名是否含描述性关键词，比如
red-wireless-headphones.jpg而非IMG_1234.jpg -
<img>的alt是否准确回答“图里有什么”和“为什么放这张图”，例如alt="AirPods Pro 第二代入耳佩戴效果，耳塞贴合耳道，背景为白色瓷砖浴室" - 图片是否出现在语义相关的内容区块中，比如产品页的
<figure>里，而不是孤立在<div>底部
最容易被忽略的是：哪怕你 <source> 配得再精准，只要 <img> 缺 alt，或者 alt 是空格、制表符、"image"，这张图对搜索引擎就等于不存在。
