如何在HTML中使用itemtype属性标记食谱数据-html教程-PHP中文网

itemtype必须与itemscope成对使用，值为https协议的schema.org有效url；recipe必需name、image、author（嵌套person）、datepublished；子对象需独立itemscope嵌套；属性值须符合schema类型规范。

如何在html中使用itemtype属性标记食谱数据

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

单独写 itemtype 没用，浏览器和搜索引擎根本不会识别。它必须和 itemscope 成对出现，用来声明当前元素是一个结构化数据实体的容器。

比如食谱数据，得先用 itemscope 开启一个作用域，再用 itemtype 指定这个作用域代表什么类型的数据：

<div itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">番茄炒蛋</h1>
  <meta itemprop="cookTime" content="PT15M">
</div>

itemtype 的值必须是 Schema.org 定义的有效 URL，不能简写成 Recipe 或 schema:Recipe
常见错误是漏掉 itemscope，结果整个 itemprop 都失效，Google Rich Results Test 会直接报“未检测到结构化数据”
URL 协议必须是 https（Schema.org 已弃用 http 版本），写成 http://schema.org/Recipe 会被现代解析器忽略

食谱必需属性有哪些才能通过 Google 验证

Google Search Console 的富媒体搜索结果测试工具对 itemtype="https://schema.org/Recipe" 有最低字段要求，缺关键项会导致“无法显示为食谱卡片”。

anything-to-html

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

下载

必填：name（菜名）、image（图片 URL，需可公开访问）、author（需嵌套 Person 类型或带 name）、datePublished（ISO 格式日期）
recipeIngredient 和 recipeInstructions 虽非强制，但缺失时卡片可能不展示材料和步骤，实际效果打折扣

注意 author 不能只写文字，得这样写：

<div itemprop="author" itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">张师傅</span>
</div>

嵌套 itemtype 处理作者、营养信息等子对象

食谱里很多字段本身是独立类型，比如作者是 Person，营养信息是 NutritionInformation，必须用新的 itemscope + itemtype 套一层，不能直接在父 Recipe 下用 itemprop 平铺。

错误写法：<meta itemprop="author" content="李四"> —— 这只会把“李四”当字符串，不是结构化 Person 对象

正确写法：

<div itemprop="author" itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">李四</span>
</div>

同理，nutrition 字段要这样：

<div itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
  <meta itemprop="calories" content="280 calories">
</div>

itemprop 值类型不匹配会导致解析失败

Schema.org 对每个属性规定了允许的值类型（如 cookTime 必须是 Duration 格式，image 必须是 URL），写错格式即使 HTML 合法，也会被解析器静默丢弃。

cookTime 必须用 ISO 8601 持续时间格式，例如 PT20M（20 分钟），不能写 "20分钟" 或 20
image 推荐用 <link> 或 <meta> 提供绝对 URL，避免相对路径；如果用 <img>，必须确保 itemprop="image" 写在 <img> 标签上且 src 是完整 URL
recipeInstructions 推荐用 <ol></ol> + itemprop，每步用 <li itemprop="itemListElement"> 包裹，否则可能被识别为单一段落而非步骤列表