如何在HTML中使用itemtype属性标记产品型号-html教程-PHP中文网

itemtype 属性指定结构化数据类型（如 https://schema.org/product），不存储型号；型号须用 itemprop="model" 在 itemscope 下声明，且 itemtype 必须为有效 schema.org url。

如何在html中使用itemtype属性标记产品型号

itemtype 属性本身不标记产品型号

itemtype 的作用是指定结构化数据的类型（比如 https://schema.org/Product），它不直接承载“型号”这类具体值。真正存型号的是 itemprop 属性，配合 itemtype 定义的上下文才生效。

常见错误是把型号写在 itemtype 里，例如：<div itemtype="iPhone 15 Pro"> —— 这完全无效，浏览器和搜索引擎会忽略。 <ul> <li> <code>itemtype 必须是 Schema.org 定义的完整 URL（如 https://schema.org/Product）

型号字段要通过 itemprop="model" 声明，且该属性只在 Product 类型下有语义意义

必须配合 itemscope 使用，三者缺一不可

正确写法：用 itemscope + itemtype + itemprop 组合

以下是最小可用示例，标记一台 iPhone 15 Pro：

<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">iPhone 15 Pro</span>
  <span itemprop="model">A3104</span>
  <meta itemprop="sku" content="MQ8R3CH/A">
</div>

注意点：

model 值建议用官方型号（如 A3104），不是营销名（如 “Titanium Black”）
model 和 sku 是不同字段：model 指硬件版本号，sku 是销售单元编码
如果型号含空格或斜杠（如 MacBook Pro 16-inch, M3 Max），可直接写，但需确保 HTML 实体安全（一般不用转义）

验证是否生效：别只看页面渲染

浏览器不会因为加了 itemprop 就显示型号，它的作用是供爬虫/解析器提取结构化数据。验证方法只有两个：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

用 Google 的 Rich Results Test 工具粘贴 HTML，看能否识别出 model 字段
用浏览器开发者工具 → Elements 面板，检查元素是否带 itemscope 和 itemprop 属性（仅确认语法，不保证语义正确）

容易被忽略的一点：如果父级 itemtype 写错（比如拼成 https://schema.org/produc），整个块的 itemprop 都会被视为无类型数据，model 就不会被识别为产品型号。

多型号共存时怎么处理

一个页面多个产品（比如规格表），每个都要独立 itemscope：

<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">iPhone 15</span>
  <span itemprop="model">A3102</span>
</div>
<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">iPhone 15 Plus</span>
  <span itemprop="model">A3103</span>
</div>

不能复用同一个 itemscope 包裹多个产品；也不能把多个 model 塞进一个 itemprop（model 是单值属性）。若需表达变体关系，得用 https://schema.org/OfferCatalog 或 https://schema.org/ProductGroup，那是另一层建模逻辑了。