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

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 技能规则productSKILL.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.mdxseo分类、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 schemaProduct schema 让 Google 可以直接在搜索结果中展示价格、可售状态、评分与评论数量。相比普通蓝色链接这类富媒体摘要具有更高的视觉权重和点击率rule 中明确说明 rich results have significantly higher click-through rates than standard blue links。规则本身给出的判断是没有 schemaGoogle 只能为你的产品页展示一条朴素的蓝色链接。需要特别强调的一个事实词汇表来自 Schema.org Product 标准但页面上仍然必须存在与之匹配的可见产品数据与价格。结构化数据不是额外声明而是对页面上真实内容的机器可读复述——这一原则贯穿本文所有章节。快速参考Quick ReferenceSKILL.md将本规则浓缩为四条核心检查点也是后续所有操作的纲领在每个产品页添加 Product JSON-LD schema以获得富媒体摘要资格富媒体摘要的必填项name、image、description以及带price与priceCurrency的offers如需在搜索结果展示星级评分应包含aggregateRatingschema 中的价格必须与页面上展示的价格完全一致。完整代码示例一段可直接复用的 Product JSON-LD下面这段是规则文档中的✅ 完整正确示例覆盖了必填字段与全部推荐字段品牌、SKU、MPN、有效期、库存、运费明细、聚合评分、单条评论可直接替换为你的真实产品数据!-- ✅ Good: Complete Product schema -- script typeapplication/ldjson { 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 typeapplication/ldjson { context: https://schema.org, type: Product, name: Dutch Oven } /script必填字段速查表根据 Google 富媒体摘要Rich Results的要求下表字段是硬性门槛来源packages/content/rules/en/seo/product.mdxPropertyTypeExamplenameTextCast Iron Dutch Oven 5.5 QtimageURL or Array[https://example.com/oven.jpg]descriptionTextProduct descriptionoffersOfferPrice and availability objectoffers.priceNumber49.99offers.priceCurrencyTextUSDoffers.availabilityURLhttps://schema.org/InStock字段要点说明image必须使用绝对 URL 数组哪怕只有一张图也要写成数组形式不能是相对路径offers.price必须是数字类型49.99而非49.99offers.priceCurrency必须是ISO 4217 三位货币代码如USD、EUR、CNYoffers.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对象见下方不要伪造评论的警告brandBrand类型的品牌对象规则体系中 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 typeapplication/ldjson注入// 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 typeapplication/ldjson dangerouslySetInnerHTML{{ __html: JSON.stringify(schema) }} / {/* product page content */} / ) }这段实现与仓库站点的做法同源本站的 JsonLd 组件正是接收一个结构化数据对象、渲染script typeapplication/ldjson的通用组件各页面通过generateGuideSchema、generateRuleSchema等函数见 seo.tsx 的导出清单按页面类型生成对应的 schema 数据后交由JsonLd注入。因此你的产品页可以照抄同款模式数据对象化 → JSON.stringify → 注入application/ldjsonscript 标签。两个落地注意点推荐在服务端组件Server Component中注入保证爬虫抓取到的首屏 HTML 中直接包含完整 JSON-LD而不是等客户端 JS 执行后才出现若一个页面有多个 schema 块如同时有Product与BreadcrumbList、Organization分别注入多个 script 标签即可规则体系中 structured-data 规则对整体结构化数据布局有更完整的约束。关键红线Critical Rules规则明确列出四条不可触碰的硬性要求schema 中的价格必须与页面可见价格完全一致——Google 的 Product 富媒体摘要指南要求结构化数据中的价格与页面展示价格匹配不一致可能导致人工处置manual action或失去富媒体摘要资格不要伪造评论数量或评分限时促销要更新priceValidUntil只有确实拥有用户评论时才使用AggregateRating。其中第一条在规则中被标注为 Warning 级别product.mdx价格不一致的后果不只是不显示富媒体摘要而是可能引发站点级的手动处罚。从 SKILL.md 看标准审计流程SKILL.md将本规则封装为面向人工或 Agent审计的四步流程这也是仓库所有技能规则共享的操作范式Check检查对每个产品页执行查找 JSON-LD script 块确认type为Product核对是否包含name、image、description以及带price、priceCurrency、availability的offers核对 schema 中的价格与页面可见价格一致使用 Google Rich Results Test 验证富媒体摘要资格。Fix修复为每个产品页添加 Product JSON-LD 块字段要求与上文速查表一致必填name、imageURL 数组、description、offers.price、offers.priceCurrency、offers.availability推荐补充aggregateRatingratingValue、reviewCount、brand、sku、gtin13/gtin8/mpn。Explain解释向利益相关方说明Product 结构化数据能让 Google 在自然搜索结果中展示类 Google Shopping 的富媒体摘要直接呈现价格、星级评分与库存状态从而获得更高的视觉权重和点击率而没有 schema 时Google 只能为产品页展示一条普通蓝色链接。Code Review代码评审在代码评审阶段逐项核对这是最容易在 CI 中固化的清单JSON-LD 块的type是否为Productimage是否为绝对 URL 数组description是否完整offers.price是否为数字、offers.priceCurrency是否为ISO 4217 代码、offers.availability是否为schema.org URLoffers.price是否与页面可见价格一致若存在aggregateRating校验reviewCount 0有评分就必然有评论数量二者必须同时真实最终通过 Google Rich Results Test 验证。例外情况与前置条件Exceptions规则强调结构化数据宁缺毋滥给出了三条边界只添加页面能够真实支持的 schema 类型——无关的结构化数据比没有更糟技术上合法的 schema 块也可能具有误导性——如果页面内容没有可见地支撑它schema 就是失真的应当同时审计渲染后的内容和 schema而不是只盯代码地基优先如果可索引性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-validProduct schema 首先必须是合法的 JSON-LD语法错误会让整个块失效structured-dataProduct schema 是结构化数据体系的一种形态需服从整体布局约束organizationBrand / 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

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

相关推荐

把 Codex 的 Base URL 改到 TaoToken 通道之后，照着 FakeShield 复现 MMTD-Set

TaoToken 通道下 MyBatis Cursor OOM？Claude Code 这样调 JVM 参数

Codex 跑 git-one-click-init 建 Gitea 仓库，模型 Base URL 填 TaoToken 的 API 地址

更多资讯

GLM 5.3 Flash 上了 Artificial Analysis 智能指数：用 TaoToken Key 调用该模型

VSCode中配置AI Agent Skills完整指南：从环境准备到规则编写实践

Broadcast Extension录屏引擎开发：内存红线与性能调优

云原生PACS架构设计：医疗影像上云的落地实践

TI-ADC非线性失配的MP建模与FPGA实时校正

first-contributions 实践指南：从 Fork 到 Pull Request 完成你的第一次开源贡献

今日更新

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？