商品页必须用 Schema.org 微数据而非微格式，因百度、谷歌自2026年起已停止支持hCard等旧格式，仅识别schema.org/Product类型的结构化数据；需严格使用完整URI、嵌套offers子属性、避免混用与重复声明，并确保移动端可见性及字段值精确匹配枚举。
为什么商品页必须用 Schema.org 微数据而不是微格式
百度、谷歌在2026年已基本停止对旧式 hCard、hProduct 等微格式（Microformats）的富摘要解析支持，结构化数据抓取默认只识别 https://schema.org/Product 类型的 JSON-LD 或微数据。你用 class="price" 标记价格，爬虫大概率忽略；但加 itemprop="price" 并配 itemtype="https://schema.org/Product"，搜索结果就可能直接展示 ¥299、⭐4.8、有货等信息。
常见错误现象包括：页面源码里写了 rel="tag" 或 class="fn"，但 Google Rich Results Test 工具报“no structured data detected”；或百度搜索结果中商品图+价始终不出现，实际是标记类型未被识别。
- 必须用
itemtype="https://schema.org/Product"，不能简写为itemtype="Product"或省略协议头 -
itemprop="offers"必须嵌套完整子属性：price、priceCurrency、availability（值需为https://schema.org/InStock等标准 URI） - 避免混用：不要在同一个
div里既写微数据又塞 JSON-LD，百度会优先取 JSON-LD，但若 JSON-LD 语法有误（如逗号结尾、单引号），整个块失效
如何让服装商品在百度搜索结果中显示尺码与颜色选项
百度富摘要目前支持在商品卡片中展开“规格筛选栏”，前提是 https://schema.org/Product 下明确声明 offers 的多个变体，并通过 https://schema.org/AggregateOffer 或 https://schema.org/OfferCatalog 组织。单纯列几个 span 写“S/M/L”或“黑/白/灰”不会触发。
使用场景很具体：用户搜“连衣裙 女 夏季”，若你的页面能返回带尺码/颜色结构化数据的 Product，百度会在搜索结果右侧追加可点击的规格面板，点击后直接跳转到对应 SKU 锚点，而非整页刷新。
- 每个颜色/尺码组合需单独定义一个
itemtype="https://schema.org/Offer"，且必须含sku和url（指向该 SKU 的独立 URL 或页面内锚点，如#sku-123-black-s） -
name属性要包含规格关键词，例如itemprop="name">纯棉连衣裙 - 黑色 - S码，否则百度无法关联到用户搜索词 - 避免把所有变体塞进一个
offers数组里却不提供url—— 这会导致“规格可展示但不可点”，百度判定为体验缺陷，后续降权
JSON-LD 和微数据混用时最容易踩的三个坑
很多团队为兼容旧系统，同时保留 HTML 内微数据和 <script type="application/ld+json"></script>，结果富摘要消失或价格错乱。问题不在“能不能用”，而在“怎么对齐”。
SEO全流程：诊断、页面优化、技术SEO、内容策略、外链建设；触发关键词包括SEO、搜索排名、网站优化、关键词、标题描述、结构化数据、Core Web Vitals、sitemap、robots.txt、SEO审计等。
性能影响明显：JSON-LD 在 DOM 加载前即被解析，而微数据需等 HTML 解析完成；若两者描述同一商品但 price 不一致，百度以 JSON-LD 为准，谷歌则可能因冲突直接弃用全部结构化数据。
- 同一页面禁止对同一商品重复声明
https://schema.org/Product—— 即使一个在 JSON-LD，一个在微数据，也视为重复内容，触发百度“结构化数据冗余”警告 - 微数据中的
itemprop="image"必须指向可公开访问的绝对 URL（如https://example.com/img/dress-1.jpg），而 JSON-LD 中的"image"字段若写相对路径（"./img/dress-1.jpg"），百度会解析失败 -
availability的值必须严格匹配 schema.org 枚举值，写"instock"（小写）或"In Stock"（带空格）都会被忽略；正确写法只有"https://schema.org/InStock"
移动端商品页结构化数据的特殊校验点
百度移动优先索引下，结构化数据的 HTML 路径必须与实际可视区域一致。如果你在桌面版页面用 display: none 隐藏了某款断货商品的微数据区块，但移动端 CSS 把它显示出来了，百度会认为这是“隐藏内容欺骗”，直接剔除该商品的富摘要资格。
容易被忽略的地方在于懒加载图片与结构化数据的耦合：当商品主图用 loading="lazy"，而 itemprop="image" 指向同一张图时，百度要求该 img 元素必须出现在首屏 DOM 中（即不被 display: none 或父容器 overflow: hidden 截断），否则 image 字段判为无效。
- 所有带
itemprop的元素，其最近的可见祖先节点（非display: none/visibility: hidden）必须在初始 HTML 中存在，不能靠 JS 动态插入 - 微信内嵌浏览器对
itemprop="review"的评分渲染极敏感：若ratingValue是字符串"4.7"而非数字4.7，微信分享卡片将不显示星级 - 百度搜索结果中“立即购买”按钮是否出现，取决于
offers下是否有itemprop="url"指向可下单页，且该 URL 必须响应 HTTP 200，不能是 302 跳转链
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
