HTML的itemprop怎么给商品页面做结构化-html教程-PHP中文网

itemprop 必须嵌套在 itemscope 和 itemtype 共同声明的容器内才生效，三者缺一不可；price、image、sku 等字段需按规范用 content 属性或 meta 标注；brand、review、offers 等嵌套对象须各自独立 itemscope；itemtype URL 必须严格匹配 HTTPS 完整路径，且值须纯净可机读。

html的itemprop怎么给商品页面做结构化

itemprop 必须套在 itemscope + itemtype 容器里才生效

单独写 itemprop="name" 或 itemprop="price" 完全没用。Google 和其他解析器只认三元组：外层有 itemscope 声明作用域，itemtype 指定类型（必须是完整 HTTPS URL），子元素再用 itemprop 绑定字段。

常见错误：
– <div><h1 itemprop="name">iPhone 15</h1></div>（缺 itemscope 和 itemtype）
– <div itemscope><div itemtype="https://schema.org/Product">...</div></div>（itemscope 和 itemtype 分开在父子标签上）

✅ 正确结构：

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">iPhone 15 Pro</h1>
  <div itemprop="description">A17 Pro 芯片，钛金属机身</div>
</div>

价格、图片、SKU 这些字段怎么填才被 Google 认

不同属性对值的来源要求完全不同，不能统一套文本内容。

itemprop="price" 必须配合 content 属性或独立 <meta>：直接写 “¥7,999” 会被提取为带符号和空格的字符串，可能失败；推荐 <meta itemprop="price" content="7999.00"> 或 <span itemprop="price" content="7999.00">¥7,999</span>
itemprop="image" 不能写在 <img> 上——除非加 content；正确做法是 <link itemprop="image" href="https://example.com/iphone15-pro.jpg"> 或 <meta itemprop="image" content="/images/15pro-1.webp">
itemprop="sku" 必须用 <meta> 隐藏提供：<meta itemprop="sku" content="MQ8T3CH/A">；别试图把 SKU 文本塞进 <p itemprop="sku">...</p>，容易混入无关字符

作者、品牌、分类这些嵌套对象怎么标

Schema.org 中很多字段（如 brand、offers、review）指向另一个实体，不是字符串。不能直接写文本，得另起一个 itemscope。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

例如标品牌：

<div itemprop="brand" itemscope itemtype="https://schema.org/Brand">
  <span itemprop="name">Apple</span>
</div>

再比如标多个评价：

每个 itemprop="review" 必须包裹在自己的 itemscope itemtype="https://schema.org/Review" 内
不能写成 <div itemprop="review">好评！</div> <div itemprop="review">发货快</div>（缺嵌套 scope，会被当作文本拼接）
offers 同理：需 <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">...</div>，里面再标 price、priceCurrency、availability

验证时最常被忽略的细节

跑完 Google Rich Results Test 工具还报错？大概率栽在这几个点：

itemtype URL 多一个斜杠、少一个 s、协议写成 http 而不是 https —— 全部失效，必须严格匹配 https://schema.org/Product
itemprop 值含不可见字符：比如价格里的  （窄空格）、（BOM）、中文全角符号 —— 提取后污染数值，导致 price 不被识别
多图场景下重复写 <meta itemprop="image" content="a.jpg"> <meta itemprop="image" content="b.jpg">，Google 只取第一个；真要表达图集，得用 ItemList 结构，不是简单堆 meta
<meta itemprop="..."> 放在里 —— 虽然 HTML 合法，但部分解析器只扫，建议统一放