json-ld + @context + 正确 @type 是唯一可靠实现结构化数据的方式；微格式（如 hcard）因缺乏验证、不支持嵌套与 id 关联，已基本退居辅助位，仅适用于无 schema 配合的轻量静态页。
直接用 microdata 或 class 做微格式标记，解决不了搜索引擎对结构化数据的识别需求；真正起效的是 JSON-LD + @context + 正确 @type 的组合。微格式（如 hCard）在现代 SEO 场景中基本已退居辅助位，仅适合轻量级、无 Schema 配合的静态页面。
为什么 hCard / hCalendar 微格式现在很难触发富摘要
Google 已明确降低对纯微格式（class="vcard"、class="vevent"）的解析优先级——它不强制要求验证，也不支持嵌套关系与 ID 关联，导致结构歧义。比如一个 div class="vcard" 里混着多个 class="fn"，爬虫无法判断哪个是主姓名、哪个是别名。
常见错误现象：
- 页面加了
class="vcard"，但 Google Search Console 的「结构化数据测试工具」完全不识别 - 用
itemprop混搭微格式类名（如class="vcard" itemprop="author"），结果两者语义冲突，解析失败 - 依赖 CSS 类名传递机器可读时间（如
class="dtstart"），但未配datetime属性，实际值被忽略
实操建议：
- 仅在无服务端渲染能力、又必须快速上线的静态页中用微格式补漏，不作为主力方案
- 若必须用，严格按 microformats.org 规范写，避免自定义类名
- 所有日期、电话、URL 类字段，必须用对应属性（
datetime、tel、href）显式声明原始值，不能只靠类名暗示
JSON-LD 是当前唯一可靠落地 Schema.org 的方式
所有能稳定触发知识图谱、富摘要、品牌卡的站点，首页 index.html 都用了 <script type="application/ld+json"></script> 块，且是静态嵌入（非 JS 动态注入）、放在 内、含完整 @context 和 @graph。
关键参数差异：
-
@context必须是"https://schema.org"，写成"http://schema.org"或漏掉，整段失效 - 首页需用
@graph同时声明WebSite和Organization，并用@id关联（如"@id": "https://example.com/#organization"），缺一不可 -
url字段值必须与实际访问 URL 完全一致（含https、末尾斜杠），否则品牌知识图谱不激活
示例片段（首页必需）：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebSite",
"@id": "https://example.com/#website",
"url": "https://example.com/",
"name": "示例网站",
"publisher": {"@id": "https://example.com/#organization"}
},
{
"@type": "Organization",
"@id": "https://example.com/#organization",
"name": "示例公司",
"logo": {"@id": "https://example.com/logo.png"}
}
]
}
</script>
微格式和 microdata 混用会破坏语义一致性
把 class="vcard" 和 itemscope itemtype="https://schema.org/Person" 放在同一元素上，浏览器和爬虫会按不同规则解析：前者走微格式解析器，后者走 HTML5 microdata 解析器，结果可能取到两套冲突的字段。
容易踩的坑：
- 用
itemscope包裹一个已有class="h-card"的div，导致fn被解析为 Person.name，而adr却没映射到 address 字段 - 在 Vue/React 组件中用
v-bind:class="{ 'vcard': true }"动态加微格式类，但 SSR 渲染时未同步输出 microdata 属性，首屏无结构化数据 - 误以为
itemprop="address"可以替代class="adr"，其实二者分属不同标准，不能互换或合并使用
性能与兼容性影响：
- microdata 会被部分 SSR 框架（如 Next.js App Router）在 hydration 阶段剥离，除非显式配置保留
- 微格式类名不参与任何 DOM 渲染逻辑，但若大量使用（如每条评论都加
h-review），会轻微增加 HTML 体积，对 LCP 无影响，但影响 gzip 压缩率
语义化标签本身不是结构化数据，但它是基础支撑
<header></header>、<article></article>、<time datetime="2026-06-30"></time> 这些标签不向搜索引擎“提交数据”，但它们决定了内容在 DOM 中的位置权重和上下文可信度。Google 明确表示：用 <time></time> 标记的时间，比纯文本“2026年6月30日”在新闻类页面中获得更高时效性评分。
实操要点：
-
<time></time>的datetime值必须是机器可解析格式（ISO 8601），2026-06-30可以，2026年6月30日不行 -
<article></article>应包裹独立、可分发的内容单元（如博客正文、产品详情），不要用它包导航或页脚 -
<nav></nav>只用于主要导航区块，侧边栏链接列表用<aside></aside>+ microdata 更稳妥
最常被忽略的一点：语义化标签层级必须合法。例如 <main></main> 不能嵌套在 <article></article> 内，<header></header> 不能作为 <footer></footer> 的子元素——这些错误不会报错，但会让辅助技术与爬虫对文档结构产生误判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
