如何通过HTML itemtype属性标记商品数据-html教程-PHP中文网

itemtype必须与itemscope成对使用，且itemscope需置于最外层容器；itemtype须为schema.org完整https url；核心字段如name、image、offers等须严格匹配schema定义，price必须嵌套在offer内；每层嵌套均需显式声明itemscope和itemtype；微数据与json-ld不可混用。

如何通过html itemtype属性标记商品数据

itemtype 属性必须搭配 itemscope 使用才有效

单独写 itemtype 没有任何结构化数据效果，浏览器和搜索引擎根本不会识别。它必须和 itemscope 成对出现，且 itemscope 要放在包裹商品信息的最外层容器上。

常见错误是只加 itemtype，或者把 itemscope 放在 <div> 里但实际商品字段（比如 <code>name、price）散落在外面——这样所有 itemprop 都会失效。

itemscope 声明一个独立实体（比如一件商品）
itemtype 指定这个实体的类型，必须是 Schema.org 的完整 URL，如 "https://schema.org/Product"
推荐始终用 HTTPS 协议的 URL，HTTP 版本在部分工具中可能被忽略

商品核心字段要用 itemprop 匹配 Schema.org 定义

不是随便起个 itemprop="title" 就能被识别为商品名称。必须严格使用 Schema.org Product 类型支持的属性名，比如 name、image、offers、description。

特别注意：price 不能直接写在元素上，它属于 offers 的子属性。正确做法是先用 itemprop="offers" itemscope itemtype="https://schema.org/Offer" 声明报价块，再在里面用 itemprop="price"。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

itemprop="name" 对应商品标题（不是 title 或 product_name）
itemprop="image" 推荐用 <img> 标签，src 值自动作为图片 URL；若用 <link>，需加 href
itemprop="offers" 必须嵌套 itemscope itemtype="https://schema.org/Offer"，否则 price 和 priceCurrency 不会被解析

嵌套结构容易漏掉 itemscope 和 itemtype

商品页常有多个层级：Product → Offer → PriceSpecification → UnitPriceSpecification。每进入一层嵌套，都必须显式声明 itemscope 和对应的 itemtype，否则后续 itemprop 会“掉出上下文”。

例如想标记“按件计价”的价格单位，需要三层嵌套：offers → priceSpecification → priceUnit。中间任意一层缺了 itemscope，后面所有属性都会变成孤立文本，不参与结构化数据提取。

嵌套时优先复用官方示例中的层级路径，不要自行简化（比如跳过 Offer 直接写 price）
用 Google Rich Results Test 工具验证时，如果看到字段显示为 “Unspecified type”，基本就是某层 itemtype 缺失或拼写错误
itemprop 值如果是数字（如价格），建议用 <meta> 标签配合 content 属性，避免格式干扰（如 <meta itemprop="price" content="299.00">）

微数据与 JSON-LD 混用时 itemtype 不会跨格式生效

HTML 微数据（itemscope/itemtype）和页面内共存的 JSON-LD 是两套独立系统。你在 <div itemscope itemtype="https://schema.org/Product"> 里写的字段，不会自动补全 JSON-LD 里的同名字段，反之亦然。 <p>常见误操作是：页面已有完整 JSON-LD，又额外加了一组微数据做“双重保险”，结果因两者字段不一致（比如 JSON-LD 用 <code>sku，微数据漏了 itemprop="sku"），导致富媒体搜索结果出错或降级。