商品列表必须用结构以支持无障碍导航和富片段识别；是json-ld生效的必需容器；须按一级分类语义化划分区块。
电商商品列表必须用 常见错误包括： 正确结构要点： Google 要求 Product 类型的 JSON-LD 中 <ul></ul> + <li>，不是 <div> 堆砌；<code><main></main> 是 JSON-LD 富片段能生效的硬性前提；<section></section> 按一级分类划分区块，不是靠 class 模拟结构。为什么商品列表必须用
<ul></ul> 而不是 <div><p>屏幕阅读器对 <code><div> 只读作“division”，无法识别这是商品集合；而 <code><ul></ul> 会明确播报“列表，共12项”，用户可按 A 键跳转到下一个商品。电商列表天然满足「项目间无顺序依赖」——筛选、排序都是动态重排的，不构成执行逻辑，所以一律用 <ul></ul>，别用 <ol></ol>。
- 用 <div class="product-grid"> 包裹所有商品卡片<br>- 商品卡片内部用 <code><div class="product-item"> 而非 <code><li>
- <li> 缺失 id，或内部没包含 <h3></h3>（如商品名）
- 每个 <li> 必须有唯一 id（如 id="product-1024"），否则键盘导航无法锚定
- <li> 内必须含至少一个 <h3></h3> 或更高级标题
- 禁止把整个商品列表塞进一个 <div> ——这会让辅助技术误判为“单篇长文”<h3>
<code><main></main> 不是可选标签，而是 JSON-LD 富片段的校验锚点
"@id" 字段必须匹配页面中某个真实 DOM 元素的 id 属性，且该元素必须位于 <main></main> 内。如果价格、库存、评价等字段散落在多个 <div class="product"> 中，即使 JSON-LD 写得再规范，爬虫也大概率无法对齐内容，导致富片段不展示或显示错误价格。<p>关键约束：<br>- 页面只能有一个 <code><main></main>，且必须包裹商品标题（<h1></h1>）、主图（<figure></figure>）、价格、库存等核心字段
- <aside></aside>（促销弹窗）、<footer></footer>（相关推荐）不能混入 <main></main>，否则污染内容可信度评分
- JSON-LD 中的 "url" 必须与当前页面 URL 完全一致（含协议、域名、路径、查询参数）用
<section></section> 划分一级分类，别用 <div class="category-laptop">
<p>每个一级分类（如「笔记本」「手机」「配件」）应独立包裹在 <code><section id="laptop"></section> 中，并配 <h2></h2> 标题。这样既支持锚点跳转（#laptop），又方便 CSS 按区块控制间距、背景或响应式断点。
实操建议：
- <section></section> 是 HTML5 明确定义的分区元素，浏览器和爬虫都认；<div class="category-laptop"> 没语义，无法被屏幕阅读器识别，也不利于 SEO<br>- 单品内部推荐用 <code><figure></figure> 放主图 + <figcaption></figcaption> 放标题/价格，再用 <dl></dl> 展示规格参数（品牌、CPU、内存等）
- 筛选逻辑应依赖 data-category 属性（如 <li data-category="laptop">），而不是 class 或 id —— 它才是筛选唯一可信源
价格、按钮、库存状态的语义化绑定不能只靠视觉
纯视觉对齐的“价格 ¥299”文字，屏幕阅读器不会自动关联到对应商品；点击“加入购物车”若只是 <div onclick="">，键盘用户无法聚焦，读屏无法识别动作为“按钮”。<p>必须做到：<br>- 价格用 <code><span itemprop="price"></span> 或嵌入 <strong></strong> + aria-hidden="true" 配合视觉隐藏文本
- “缺货”状态必须用 JS 动态更新 itemprop="availability" 的 content 值，不能仅靠颜色变化
- 所有操作按钮必须是 <button type="button"></button>，禁用 <div role="button"> —— 后者不触发原生 focus/keyboard 事件链<p>容易被忽略的一点：微格式标记（如 JSON-LD）本身不直接触发富片段，它只是“数据声明”；真正起作用的是 HTML 结构是否能让搜索引擎把这段声明，精准映射回页面上那个真实的 <code><span id="price-1024"></span> 节点。结构松散，标记就等于白写。
