结构化数据标记（语义化视角）

结构化数据标记是语义化HTML的延伸，将页面内容转化为机器可理解的标准格式。

语义化与结构化数据的关系

层级关系

text

HTML语义标签（微观语义）
    ↓
结构化数据标记（宏观语义）
    ↓
Schema.org词汇（标准化语义）

对应关系

HTML语义标签	Schema.org类型
`<article>`	Article
`<nav>`	SiteNavigationElement
`<header>`	WPHeader
`<footer>`	WPFooter
`<time>`	Date/DateTime

语义标记方式对比

方式	实现形式	优点	缺点
JSON-LD	`<script>` 内嵌	与HTML分离、易维护	与可见内容分离
Microdata	HTML属性	与内容紧密关联	增加HTML复杂度
RDFa	HTML属性	标准完整、灵活	学习成本高

Microdata 实现

基本属性

HTML

<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">张三</span>
  <span itemprop="jobTitle">前端工程师</span>
  <img itemprop="image" src="avatar.jpg" alt="头像">
  <a itemprop="url" href="https://zhangsan.com">个人主页</a>
</div>

属性说明

属性	用途
itemscope	标记一个实体容器
itemtype	指定Schema.org类型
itemprop	定义属性名

嵌套结构

HTML

<div itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">语义化HTML指南</h1>
  <time itemprop="datePublished" datetime="2026-05-17">2026年5月17日</time>

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

  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">前端教程网</span>
  </div>
</div>

RDFa 实现

基本属性

HTML

<div vocab="https://schema.org/" typeof="Person">
  <span property="name">张三</span>
  <span property="jobTitle">前端工程师</span>
</div>

属性说明

属性	用途
vocab	指定词汇表URL
typeof	指定类型
property	定义属性
resource	指定资源URI

嵌套结构

HTML

<article vocab="https://schema.org/" typeof="Article">
  <h1 property="headline">文章标题</h1>
  <span property="author" typeof="Person">
    <span property="name">作者名</span>
  </span>
</article>

JSON-LD 与语义标签结合

分离模式

HTML

<!-- 语义化HTML -->
<article>
  <header>
    <h1>语义化HTML指南</h1>
    <time datetime="2026-05-17">2026年5月17日</time>
  </header>
  <p>正文内容...</p>
</article>

<!-- 结构化数据（JSON-LD） -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "语义化HTML指南",
  "datePublished": "2026-05-17"
}
</script>

语义一致性原则

内容对应要求

HTML

<!-- 正确：内容与结构化数据一致 -->
<h1 itemprop="headline">语义化HTML完全指南</h1>

<!-- 错误：内容不一致 -->
<h1 itemprop="headline">HTML入门教程</h1> <!-- 标题不匹配 -->

规则要点

text

结构化数据必须遵循：
1. 内容必须与页面可见内容一致
2. 描述实际存在的内容元素
3. 不添加页面上不存在的信息
4. 属性值与可见文本相符

选择建议

场景	推荐方式
新项目	JSON-LD（主流推荐）
内容紧密关联需求	Microdata
已有RDFa基础设施	RDFa
SEO优化为主	JSON-LD
语义化增强为主	Microdata

注意：Google、Bing、Yandex 等搜索引擎统一支持 Schema.org 词汇，推荐使用 JSON-LD 格式。

要点总结

HTML语义标签是微观语义，结构化数据是宏观语义
Microdata/RDFa 将语义融入HTML属性
JSON-LD 与HTML分离，维护更方便
结构化数据内容必须与页面可见内容一致
Schema.org 是搜索引擎认可的统一词汇表

📝 发现内容有误？点击此处直接编辑