如何用HTML代码给菜谱添加卡路里与营养成分的微数据标记-html教程-PHP中文网

直接加itemscope和itemtype不生效，是因为未用itemprop将calories等字段绑定到HTML元素；必须用等格式，确保数字+空格+规范单位（kcal/g），且content值为带引号字符串。

如何用html代码给菜谱添加卡路里与营养成分的微数据标记

为什么直接加 `itemscope` 和 `itemtype` 不生效

常见错误是只在

 上加 itemscope itemtype="https://schema.org/Recipe"，但没把关键字段（比如 calories、proteinContent）用 itemprop 正确绑定到对应 HTML 元素上。Google Structured Data Testing Tool 会提示 “Missing field ‘calories’” —— 这不是 Schema 写错了，而是 HTML 结构没把值“暴露”给爬虫。必须确保每个营养字段都落在带 itemprop 的标签内，且该标签的父级有 itemscope 和正确的 itemtype。


calories 必须是纯数字 + 单位（如 520 kcal），不能写成 “约 520 卡路里” 或带 HTML 标签
营养字段推荐用  隐藏式声明（避免干扰页面样式），但需放在 itemscope 容器内
单位必须用 Schema 规范写法：kcal（不是 cal 或 卡），g（不是 克）

怎么标记卡路里和蛋白质/脂肪/碳水这些字段
Schema.org 的 Recipe 类型支持 calories、proteinContent、fatContent、carbohydrateContent 等字段，但它们都是 Text 类型（不是数字），所以必须带单位字符串。
推荐用  嵌套在 itemscope 容器里，例如：
<div itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">番茄炒蛋</h1>
  <meta itemprop="calories" content="520 kcal">
<meta itemprop="proteinContent" content="18 g">
<meta itemprop="fatContent" content="32 g">
<meta itemprop="carbohydrateContent" content="36 g">
</div>


content 属性值必须严格匹配：数字 + 空格 + 单位（kcal / g），多一个空格或少一个都会被忽略
不要用 520 kcal —— 虽然合法，但容易被用户误编辑或 CSS 隐藏导致不可见， 更可靠
如果菜谱页已有结构化数据（如 JSON-LD），HTML 微数据可并存，但字段别重复定义，否则可能触发 Google 的冲突警告

遇到 “All values must be strings” 错误怎么办
这是 Google Rich Results Test 最常报的错误，本质是把数字当数值传了，比如写了 （没加引号、没单位）。Schema 解析器看到 content=520 会当成整数类型，但 calories 要求 Text。

											
												
												
													Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
													实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
												
												下载
												
											
										

检查所有 content 值：必须是带引号的字符串，且含单位，例如 content="520 kcal"，不是 content=520 或 content="520"

动态生成时注意模板转义：PHP 的 echo '' 要确保 $cal 是数字，且拼接后整体是合法字符串
单位大小写敏感："kcal" ✅，"KCAL" ❌；"g" ✅，"Grams" ❌

要不要同时用 JSON-LD？HTML 微数据够不够
够用，但限制明显：HTML 微数据只能描述当前 DOM 可见结构，没法表达嵌套对象（比如每道食材的单独营养值），也没法跨元素聚合数据。JSON-LD 更灵活，且 Google 明确推荐。
如果你的菜谱页已经用 HTML 微数据标记了基础字段，又想加 nutrition 对象（含 sodiumContent、fiberContent 等），直接补微数据会很别扭 —— 因为 nutrition 是嵌套类型，而微数据不支持 itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation" 这种深层嵌套的干净写法（容易漏 itemscope 或错层级）。

简单场景（仅卡路里+三大营养素）：HTML 微数据够用，维护成本低
需要完整营养表、分步烹饪时间、多个食材明细：改用 JSON-LD，把整个 Recipe 对象一次性输出在 <script type="application/ld+json"></script> 里
二者混用不冲突，但同一字段（如 calories）别在两处都写，否则可能被判定为数据不一致

真正麻烦的不是语法，是单位校验和字符串格式——哪怕多一个空格，Google 就当它不存在。