结论：用++组合配合语义化容器、准确alt和loading属性可满足基础seo；缩略图需点击切换主图时，关键图片url必须在html中直出，不可藏于js。
直接说结论：用 <figure></figure> + <img> + <figcaption></figcaption> 组合，配合语义化容器和正确的 alt、loading 属性，就能满足基础 SEO 要求；但若缩略图需点击切换主图，必须用 JS 控制 src 时，得避免把关键图片 URL 放在 JS 里——否则搜索引擎根本抓不到。
为什么 <figure></figure> 比 <div> 更利于 SEO
<p>搜索引擎（尤其是 Google）会把 <code><figure></figure> 视为一个独立的、有上下文的内容单元，它天然关联 <figcaption></figcaption> 中的文字描述。而纯 <div> 包裹的 <code><img> 缺少这种语义锚点，容易被当成装饰性资源忽略。
-
<figure></figure> 内的 <img> 的 alt 值 + <figcaption></figcaption> 文本，共同构成该图的语义权重，比单靠 alt 更强
- 如果画廊是产品页核心内容，
<figure></figure> 能帮助页面主题聚焦，提升相关关键词匹配度
- 注意：
<figcaption></figcaption> 必须紧邻 <img>（前后顺序不限），且不能嵌套在其他块级标签里，否则语义断裂
alt 和 title 怎么写才不算堆砌关键词
<figure></figure> 内的 <img> 的 alt 值 + <figcaption></figcaption> 文本，共同构成该图的语义权重，比单靠 alt 更强<figure></figure> 能帮助页面主题聚焦，提升相关关键词匹配度<figcaption></figcaption> 必须紧邻 <img>（前后顺序不限），且不能嵌套在其他块级标签里，否则语义断裂alt 和 title 怎么写才不算堆砌关键词alt 是强制项，title 是可选项；前者影响索引和可访问性，后者只影响鼠标悬停提示，对 SEO 几乎无作用。
-
alt必须描述图中「实际可见内容」，比如alt="白色陶瓷马克杯，手柄朝右，杯身印有蓝色几何图案"，而不是alt="马克杯-促销-特价" - 缩略图的
alt也要具体，例如alt="侧面视角：马克杯配木质托盘与绿植"，不要写成alt="缩略图1" - 主图区域若由 JS 动态切换，每个
<img>的alt都得随图片真实内容更新，不能固定写死 -
title可省略，或仅用于补充交互提示，如title="点击查看高清细节"，别塞关键词
缩略图列表如何兼顾 SEO 与交互逻辑
常见错误是把所有缩略图做成 JS 渲染的 <li>，导致 HTML 源码里只有占位符——搜索引擎看不到任何图片资源。
- 缩略图必须在初始 HTML 中真实存在，即每个
<img>标签都要有src、alt和loading="lazy" - 主图区域建议用静态
<img>，初始加载首张图；切换时仅替换src和alt，不销毁/重建 DOM - 缩略图点击事件绑定到
<img>或其父<button></button>，避免用<a href="#"></a>—— 空链接对 SEO 无益，还可能被误判为垃圾导航 - 如果缩略图数量多（>20 张），考虑分页或懒加载容器，但首屏 6–8 张务必直出 HTML
哪些属性一加就掉 SEO 分
不是加得越多越好，有些看似“优化”的写法反而干扰爬虫理解。
-
aria-hidden="true"加在<figure></figure>或<img>上——等于告诉搜索引擎“这图不用看”，除非真是装饰图 -
width/height写死像素值（如width="300"）却不配srcset——现代爬虫会质疑图片适配能力，影响移动友好度评分 - 用
<picture></picture>时漏掉<img>作为 fallback——部分爬虫仍不解析<source></source>，没<img>就当图不存在 - 所有图片共用同一段
alt（如都写“产品图”）——触发重复内容惩罚，尤其在电商多 SKU 页面
最易被忽略的一点：缩略图的 src 路径必须能被爬虫直接请求返回图片二进制数据，不能依赖后端重定向或权限校验。否则即使 HTML 里写了，也等于没写。
