企业官网建设流程全解析

Front-End-Checklist Product 规则实战：为电商产品页添加 Product Schema 结构化数据

【免费下载链接】Front-End-Checklist🗂 The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist

本指南对应仓库 Front-End-Checklist 中的 SEO 技能规则product（SKILL.md），完整讲解如何为电商产品页添加 Schema.orgProductJSON-LD 结构化数据，使 Google 在搜索结果中直接展示价格、库存状态、星级评分与评论数等富媒体摘要（Rich Results）。读完本文，你将掌握 Product schema 的必填/推荐字段、完整可复用的 JSON-LD 代码模板、Next.js 中的落地实现方式，以及一套可直接执行的 Check / Fix / Code Review 审计流程。

规则定位：它属于仓库中的哪一层

在 Front-End-Checklist 仓库中，product规则以三种形态存在，共同构成一条"内容 → 技能 → 站点"的完整链路：

• 规则内容源：packages/content/rules/en/seo/product.mdx（seo分类、technical子类，优先级medium，难度intermediate，预计耗时 20 分钟）；
• Agent 技能描述：skills/product/SKILL.md，定义了面向审计场景的Quick Reference / Check / Fix / Explain / Code Review结构化流程；
• 技能参考文档：skills/product/references/rule.md，承载完整的代码示例与实现细节，也是本文的主体骨架。

站点侧，规则页面通过 rule-page-content.tsx/rules/[category]/[slug]/rule-page-content.tsx) 渲染，页面的 JSON-LD 结构化数据则由 apps/web/lib/seo.tsx 导出的 schema 生成函数与JsonLd组件产出（其实现见 seo-guide-schema.tsx）。也就是说，本仓库自身就是"编写并注入 JSON-LD"这一做法的活体示例——下面的实现方案与站点实际使用的机制同源。

为什么产品页必须做 Product schema

Product schema 让 Google 可以直接在搜索结果中展示价格、可售状态、评分与评论数量。相比普通蓝色链接，这类富媒体摘要具有更高的视觉权重和点击率（rule 中明确说明 "rich results have significantly higher click-through rates than standard blue links"）。规则本身给出的判断是：没有 schema，Google 只能为你的产品页展示一条朴素的蓝色链接。

需要特别强调的一个事实：词汇表来自 Schema.org Product 标准，但页面上仍然必须存在与之匹配的可见产品数据与价格。结构化数据不是"额外声明"，而是对页面上真实内容的机器可读复述——这一原则贯穿本文所有章节。

快速参考（Quick Reference）

SKILL.md将本规则浓缩为四条核心检查点，也是后续所有操作的纲领：

1. 在每个产品页添加 Product JSON-LD schema，以获得富媒体摘要资格；
2. 富媒体摘要的必填项：name、image、description，以及带price与priceCurrency的offers；
3. 如需在搜索结果展示星级评分，应包含aggregateRating；
4. schema 中的价格必须与页面上展示的价格完全一致。

完整代码示例：一段可直接复用的 Product JSON-LD

下面这段是规则文档中的"✅ 完整正确示例"，覆盖了必填字段与全部推荐字段（品牌、SKU、MPN、有效期、库存、运费明细、聚合评分、单条评论），可直接替换为你的真实产品数据：

<!-- ✅ Good: Complete Product schema --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Product", "name": "Cast Iron Dutch Oven 5.5 Qt", "image": [ "https://example.com/images/dutch-oven-front.jpg", "https://example.com/images/dutch-oven-top.jpg" ], "description": "Pre-seasoned cast iron Dutch oven with enamel coating. Perfect for sourdough baking and slow cooking.", "sku": "DO-55-BLK", "mpn": "DO550BK", "brand": { "@type": "Brand", "name": "BakeCo" }, "offers": { "@type": "Offer", "url": "https://example.com/products/dutch-oven", "priceCurrency": "USD", "price": 49.99, "priceValidUntil": "2026-12-31", "itemCondition": "https://schema.org/NewCondition", "availability": "https://schema.org/InStock", "shippingDetails": { "@type": "OfferShippingDetails", "shippingRate": { "@type": "MonetaryAmount", "value": 0, "currency": "USD" }, "deliveryTime": { "@type": "ShippingDeliveryTime", "handlingTime": { "@type": "QuantitativeValue", "minValue": 0, "maxValue": 1, "unitCode": "DAY" }, "transitTime": { "@type": "QuantitativeValue", "minValue": 3, "maxValue": 5, "unitCode": "DAY" } } } }, "aggregateRating": { "@type": "AggregateRating", "ratingValue": 4.7, "reviewCount": 283 }, "review": [ { "@type": "Review", "reviewRating": { "@type": "Rating", "ratingValue": 5 }, "author": { "@type": "Person", "name": "Jane Smith" }, "reviewBody": "Excellent Dutch oven — my sourdough has improved dramatically." } ] } </script>

对照下面这段"❌ 错误示例"——它只有name，缺少offers，且image不是数组。这种残缺的 schema 无法通过富媒体摘要的字段校验：

<!-- ❌ Bad: Missing offers, no image array --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Product", "name": "Dutch Oven" } </script>

必填字段速查表

根据 Google 富媒体摘要（Rich Results）的要求，下表字段是硬性门槛（来源：packages/content/rules/en/seo/product.mdx）：

字段要点说明：

• image必须使用绝对 URL 数组（哪怕只有一张图也要写成数组形式），不能是相对路径；
• offers.price必须是数字类型（49.99而非"49.99"）；
• offers.priceCurrency必须是ISO 4217 三位货币代码（如USD、EUR、CNY）；
• offers.availability必须是Schema.org 的枚举 URL，而非自由文本。

availability 合法取值

offers.availability只接受以下五个枚举值，直接以 Schema.org 规范 URL 形式填写：

https://schema.org/InStock https://schema.org/OutOfStock https://schema.org/PreOrder https://schema.org/BackOrder https://schema.org/Discontinued

推荐字段（锦上添花）

除必填字段外，规则建议按业务真实性补充：

• aggregateRating：包含ratingValue与reviewCount的AggregateRating对象（见下方"不要伪造评论"的警告）；
• brand：Brand类型的品牌对象，规则体系中 organization 规则指出品牌/组织 schema 可为产品提供品牌上下文；
• sku、gtin13/gtin8/mpn：用于标识产品的库存单位与全球贸易/制造商编号；
• offers.priceValidUntil：限时促销的截止日期，到期必须更新。

富媒体摘要能展示什么

对 schema 有效的产品页，Google 可以展示（rule.md）：

• 价格与货币；
• 可售状态（有货 / 无货）；
• 星级评分与评论数量；
• 图片搜索中的产品图片；
• Google Shopping 中的商家列表体验（Merchant listing experiences）。

如何在 Next.js 中落地实现

规则文档给出了 Next.js App Router 的参考实现（app/products/[slug]/page.tsx）。核心思路：在服务端组件中读取产品数据，构造 schema 对象，再通过<script type="application/ld+json">注入：

// app/products/[slug]/page.tsx export default async function ProductPage({ params }) { const product = await getProduct(params.slug) const schema = { '@context': 'https://schema.org', '@type': 'Product', name: product.name, image: product.images, description: product.description, offers: { '@type': 'Offer', price: product.price, priceCurrency: 'USD', availability: product.inStock ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock', }, } return ( <> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> {/* product page content */} </> ) }

这段实现与仓库站点的做法同源：本站的 JsonLd 组件 正是接收一个结构化数据对象、渲染<script type="application/ld+json">的通用组件，各页面通过generateGuideSchema、generateRuleSchema等函数（见 seo.tsx 的导出清单）按页面类型生成对应的 schema 数据后交由JsonLd注入。因此你的产品页可以照抄同款模式：数据对象化 → JSON.stringify → 注入application/ld+jsonscript 标签。

两个落地注意点：

1. 推荐在服务端组件（Server Component）中注入，保证爬虫抓取到的首屏 HTML 中直接包含完整 JSON-LD，而不是等客户端 JS 执行后才出现；
2. 若一个页面有多个 schema 块（如同时有Product与BreadcrumbList、Organization），分别注入多个 script 标签即可，规则体系中 structured-data 规则对整体结构化数据布局有更完整的约束。

关键红线（Critical Rules）

规则明确列出四条不可触碰的硬性要求：

1. schema 中的价格必须与页面可见价格完全一致——Google 的 Product 富媒体摘要指南要求结构化数据中的价格与页面展示价格匹配，不一致可能导致人工处置（manual action）或失去富媒体摘要资格；
2. 不要伪造评论数量或评分；
3. 限时促销要更新priceValidUntil；
4. 只有确实拥有用户评论时才使用AggregateRating。

其中第一条在规则中被标注为 Warning 级别（product.mdx）：价格不一致的后果不只是"不显示富媒体摘要"，而是可能引发站点级的手动处罚。

从 SKILL.md 看标准审计流程

SKILL.md将本规则封装为面向（人工或 Agent）审计的四步流程，这也是仓库所有技能规则共享的操作范式：

Check（检查）

对每个产品页执行：

1. 查找 JSON-LD script 块，确认@type为'Product'；
2. 核对是否包含name、image、description，以及带price、priceCurrency、availability的offers；
3. 核对 schema 中的价格与页面可见价格一致；
4. 使用 Google Rich Results Test 验证富媒体摘要资格。

Fix（修复）

为每个产品页添加 Product JSON-LD 块，字段要求与上文速查表一致：必填name、image（URL 数组）、description、offers.price、offers.priceCurrency、offers.availability；推荐补充aggregateRating（ratingValue、reviewCount）、brand、sku、gtin13/gtin8/mpn。

Explain（解释）

向利益相关方说明：Product 结构化数据能让 Google 在自然搜索结果中展示类 Google Shopping 的富媒体摘要，直接呈现价格、星级评分与库存状态，从而获得更高的视觉权重和点击率；而没有 schema 时，Google 只能为产品页展示一条普通蓝色链接。

Code Review（代码评审）

在代码评审阶段逐项核对（这是最容易在 CI 中固化的清单）：

• JSON-LD 块的@type是否为'Product'；
• image是否为绝对 URL 数组；
• description是否完整；
• offers.price是否为数字、offers.priceCurrency是否为ISO 4217 代码、offers.availability是否为schema.org URL；
• offers.price是否与页面可见价格一致；
• 若存在aggregateRating，校验reviewCount > 0（有评分就必然有评论数量，二者必须同时真实）；
• 最终通过 Google Rich Results Test 验证。

例外情况与前置条件（Exceptions）

规则强调"结构化数据宁缺毋滥"，给出了三条边界：

1. 只添加页面能够真实支持的 schema 类型——无关的结构化数据比没有更糟；
2. 技术上合法的 schema 块也可能具有误导性——如果页面内容没有可见地支撑它，schema 就是失真的；应当同时审计渲染后的内容和 schema，而不是只盯代码；
3. 地基优先：如果可索引性（indexability）、canonical-url 或主内容质量本身有问题，应当先修复这些基础问题，再优化 schema 细节——不要在一个无法被正常收录的页面上投入富媒体摘要优化。

验证与验收（Verification）

规则要求同时完成自动化与人工两层验证：

• 自动化检查：检查渲染后的 HTML 与 HTTP 响应头，确认期望的元数据或可爬取信号确实存在；用 Google Search Console 或等价工具测试受影响 URL；部署后对代表性页面集重新抓取（re-crawl）；
• 人工检查：确认改动不会与 canonical-url、robots 或结构化数据信号产生冲突——同一页面出现互相矛盾的信号（例如 schema 声明 InStock 而页面文案写着缺货）是验收环节必须捕获的问题。

验收标准方面，规则明确以两份权威资料为准绳：Google Search Central 的 Product structured data 指南与 Schema.org Product 规范——即"schema 格式正确"与"字段语义符合标准"两个维度都要达标（相关资源与出处定义见 product.mdx 的resources与sources元数据，且站点规则页会通过 RuleResourcesSection/rules/[category]/[slug]/rule-page-sections.tsx) 等组件将其渲染出来）。

与其他规则的协作关系

Product schema 并非孤立规则，仓库元数据（product.mdx）声明了四组关联：

• json-ld-valid：Product schema 首先必须是合法的 JSON-LD，语法错误会让整个块失效；
• structured-data：Product schema 是结构化数据体系的一种形态，需服从整体布局约束；
• organization：Brand / Organization schema 为产品提供品牌上下文；
• review：二者同属seo/technical区域，评审时通常一起检查。

实践中建议的完整落地顺序是：先保证页面可索引且 canonical 正确（地基）→ 保证 JSON-LD 语法合法 → 再按本文模板补齐 Product 必填与推荐字段 → 最后用 Rich Results Test 验收并纳入 Code Review 清单持续守护。

【免费下载链接】Front-End-Checklist🗂 The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist