B05 结构化数据

摘要：语义标签告诉浏览器「这是标题、这是正文」，但没有告诉它「这是谁写的、发布于何时、属于哪个栏目」。结构化数据用一份机器可读的描述补齐这些字段，使检索结果可以显示作者、日期、面包屑。本文对比三种标注方式，给出文章与面包屑两类 JSON-LD 写法，并给出零错误的校验步骤。
关键词：结构化数据，JSON-LD，schema.org，富媒体摘要，面包屑

所属：frontend/html / B-进阶 ｜上一篇：B04-全局属性与交互元素 ｜下一篇：B06-版本差异与兼容

1 引言

页面信息的消费方不止读者：检索引擎要判断页面类型，聚合工具要提取作者与时间，辅助技术要识别导航层级。语义标签提供了粗粒度的结构，结构化数据提供字段级的描述。

本文给出可直接粘贴的 JSON-LD 模板与校验流程。范围见表 1-1。

项	本文覆盖	本文不覆盖
标注方式	JSON-LD、microdata、RDFa 的取舍	词汇表扩展与自定义本体
常用类型	Article、BreadcrumbList、Organization	商品、活动、问答等垂类
校验	校验工具、字段完整性检查	收录效果与展示样式

2 预备知识

项	要求	核对方式
环境	A02 的本地服务器	能访问 `localhost`
文件	`html-practice/structured.html`	编码 UTF-8
前置	B01	head 元信息已配置
工具	Schema 校验器（在线）	能粘贴代码片段并校验

3 原理与实现

3.1 描述层与呈现层分离

结构化数据是独立于 HTML 结构的描述层，由脚本块承载，不参与渲染，如图 3-1 所示。

flowchart LR
    A["页面 HTML"] --> B["语义标签<br/>粗粒度结构"]
    A --> C["JSON-LD 脚本块<br/>字段级描述"]
    B --> D["浏览器渲染"]
    C --> E["抓取方解析"]
    E --> F["检索结果富摘要"]
    E --> G["聚合与推荐"]

图 3-1 呈现层与描述层的关系

图上可见：JSON-LD 不改变页面外观，只增加可被解析的字段；字段与实际内容不一致时，校验能通过但展示会被平台忽略。

3.2 文章与面包屑的 JSON-LD

<!-- 运行环境：任意浏览器；放在 body 末尾或 head 内均可 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML 元信息清单",
  "description": "一份可直接复用的 head 模板。",
  "datePublished": "2026-10-29",
  "dateModified": "2026-10-31",
  "inLanguage": "zh-CN",
  "author": {
    "@type": "Person",
    "name": "李明",
    "url": "https://example.com/about"
  },
  "publisher": {
    "@type": "Organization",
    "name": "李明的工作笔记",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/assets/logo.png"
    }
  },
  "mainEntityOfPage": "https://example.com/html/meta"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "首页", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "HTML", "item": "https://example.com/html" },
    { "@type": "ListItem", "position": 3, "name": "元信息清单" }
  ]
}
</script>

三种标注方式的取舍见表 3-1。

方式	写法位置	优点	缺点
JSON-LD	独立脚本块	与页面结构解耦，易生成	与页面前端数据可能不同步
microdata	写在标签属性上	与内容同源，不易漂移	侵入结构，改动成本高
RDFa	写在标签属性上	表达力强	语法繁琐，工具链支持较少

常用类型的必填字段见表 3-2。

类型	必填字段	常见缺漏
`Article`	headline、datePublished、author、publisher	缺 publisher 与图
`BreadcrumbList`	itemListElement 及其 position、name	最后一项不该带 item
`Organization`	name、logo、url	logo 尺寸过小
`WebSite`	name、url	与 Organization 混用

规则三条：字段值与页面可见内容一致，不写页面上没有的信息；日期用 ISO 格式（2026-10-29）；面包屑最后一项是当前页，不带 item。

4 验证与讨论

保存文件，浏览器打开，确认页面外观无变化。
查看源代码，确认两个 script type="application/ld+json" 块存在且 JSON 无语法错误。
复制 JSON-LD 内容，粘贴到 Schema 校验器，确认零错误、零警告。
修改 datePublished 为页面不存在的日期，重新校验，观察是否给出警告。

检查项	预期结果	说明
渲染无变化	页面外观与之前一致	JSON-LD 不参与渲染
JSON 合法	校验器无语法错误	逗号与引号最常见
必填字段齐	表 3-2 中字段全部存在	缺 publisher 最常出现
日期格式	`YYYY-MM-DD`	本地化日期无法解析
面包屑层级	最后一项无 `item`	表示当前页

讨论与局限。 结构化数据只是「声明」，是否展示由平台决定；声明与内容不符会被判为作弊。另 JSON-LD 常由后端或框架生成，与页面展示字段必须读同一份数据，否则会出现「摘要写 2026-10，正文写 2026-11」的漂移。

5 常见问题

现象	原因	处理
校验器报 JSON 语法错误	尾随逗号或使用单引号	用双引号，删除最后一项的逗号
富摘要不显示	必填字段缺失或与页面不符	补齐表 3-2 字段，核对正文
面包屑显示为纯文本	未声明 `BreadcrumbList`	补 JSON-LD 块
日期被解析为无效	使用了 `2026年10月29日` 格式	改 ISO 格式
一处内容两套描述不一致	前端渲染与 JSON-LD 各写一份数据	统一从同一数据源生成

6 结论

序号	结论	依据
1	结构化数据是描述层，不改变页面外观	图 3-1
2	JSON-LD 解耦最好，适合自动生成	表 3-1
3	字段必须与可见内容一致	4 节步骤 4
4	面包屑最后一项不带地址	表 3-2

参考文献

[1] schema.org · Article，https://schema.org/Article（访问于 2026-10-29）
[2] Google 搜索中心 · 结构化数据常规指南，https://developers.google.com/search/docs/appearance/structured-data/sd-policies（访问于 2026-10-29）