结构化数据与 JSON-LD：SEO 富摘要的完整实现指南

前端工程（更新于 2026年6月7日）

什么是结构化数据？

结构化数据是按照 Schema.org 词汇表组织的标准化数据格式，帮助搜索引擎理解页面内容的语义含义，从而在搜索结果中展示富摘要（Rich Snippets）。

三种嵌入格式对比

格式 嵌入方式 Google 推荐 维护性
JSON-LD <script type="application/ld+json"> 推荐 优
Microdata HTML 属性 itemscope/itemprop 不推荐 差
RDFa HTML 属性 vocab/property 不推荐 差

Google 官方明确推荐 JSON-LD，因为它与 HTML 内容解耦，维护更方便。

JSON-LD 基础语法

基本结构

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "description": "文章描述",
  "author": {
    "@type": "Person",
    "name": "张三"
  },
  "datePublished": "2026-06-07",
  "dateModified": "2026-06-07"
}
</script>

多类型组合

<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "..."
  },
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [...]
  }
]
</script>

常用结构化数据类型

1. Article（文章）

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Web Animations API 与高性能动画",
  "description": "深入对比 Web Animations API 与 CSS 动画的性能差异",
  "image": "https://toolsku.com/og/blog-animation.png",
  "author": {
    "@type": "Organization",
    "name": "工具库团队",
    "url": "https://toolsku.com"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ToolsKu",
    "logo": {
      "@type": "ImageObject",
      "url": "https://toolsku.com/logo.png"
    }
  },
  "datePublished": "2026-06-06",
  "dateModified": "2026-06-06",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://toolsku.com/blog/web-animations-api-performance"
  }
}

2. FAQPage（常见问题）

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "JSON-LD 和 Microdata 有什么区别？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON-LD 使用独立 script 标签嵌入，与 HTML 解耦；Microdata 通过 HTML 属性内联，维护困难。Google 推荐使用 JSON-LD。"
      }
    },
    {
      "@type": "Question",
      "name": "结构化数据多久被 Google 识别？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "通常需要数天到数周，取决于爬取频率。可通过 Search Console 的增强功能报告查看状态。"
      }
    }
  ]
}

3. HowTo（教程步骤）

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "如何添加 JSON-LD 结构化数据",
  "step": [
    {
      "@type": "HowToStep",
      "position": 1,
      "name": "确定页面类型",
      "text": "根据页面内容选择合适的 Schema.org 类型，如 Article、Product、FAQPage。"
    },
    {
      "@type": "HowToStep",
      "position": 2,
      "name": "编写 JSON-LD",
      "text": "按照 Schema.org 规范编写 JSON-LD 数据，确保所有必填字段完整。"
    },
    {
      "@type": "HowToStep",
      "position": 3,
      "name": "嵌入页面",
      "text": "将 JSON-LD 放入 <script type=\"application/ld+json\"> 标签，置于 <head> 或 <body> 中。"
    },
    {
      "@type": "HowToStep",
      "position": 4,
      "name": "验证与测试",
      "text": "使用 Google 富结果测试工具验证结构化数据是否正确。"
    }
  ]
}

4. BreadcrumbList（面包屑导航）

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "https://toolsku.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "博客",
      "item": "https://toolsku.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "结构化数据与 JSON-LD",
      "item": "https://toolsku.com/blog/structured-data-json-ld"
    }
  ]
}

5. SoftwareApplication（工具应用）

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "CSS 动画生成器",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Web",
  "description": "在线 CSS 动画代码生成与预览工具",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "CNY"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "256"
  }
}

Next.js 中的 JSON-LD 实现

使用 next/script 注入

import Script from 'next/script';

function BlogPost({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.description,
    author: {
      '@type': 'Organization',
      name: '工具库团队',
    },
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
  };

  return (
    <>
      <Script
        id="json-ld"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{post.content}</article>
    </>
  );
}

使用 metadata API（Next.js 15+）

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
    },
  };
}

Google 富摘要效果

结构化数据类型 富摘要效果 CTR 提升
Article 作者头像、发布日期 +20-30%
FAQPage FAQ 折叠展开 +30-50%
HowTo 步骤列表 +20-40%
BreadcrumbList 面包屑路径 +10-15%
SoftwareApplication 评分、价格 +25-35%

验证与调试

Google 富结果测试

访问 Rich Results Test，输入页面 URL 或粘贴 HTML 代码。

Schema.org 验证器

访问 Schema Markup Validator，验证 JSON-LD 结构是否符合规范。

Search Console 监控

Search Console → 增强功能 → 结构化数据

- 查看有效/无效项目数量
- 定位具体错误
- 监控 Google 识别进度

常见错误排查

错误 原因 修复
缺少必填字段 未提供 required 属性 补全 headline、datePublished 等
类型不匹配 值类型与 Schema 定义不符 date 应为 ISO 8601 格式
重复结构化数据 同一内容多次声明 合并为数组或移除重复
无效 URL URL 格式错误或不可达 使用完整绝对路径

最佳实践

  • 每个页面只声明该页面内容的类型：博客用 Article，工具用 SoftwareApplication
  • datePublished 和 dateModified 使用 ISO 8601：2026-06-07 或 2026-06-07T08:00:00+08:00
  • image 使用绝对 URL：https://toolsku.com/og/image.png
  • 不要虚构数据：Google 可能对虚假结构化数据进行手动处罚
  • 与 Open Graph 互补：JSON-LD 给搜索引擎，OG 给社交媒体

总结

JSON-LD 是实现结构化数据的最优方案，通过 Schema.org 词汇表为搜索引擎提供语义信息，显著提升富摘要展示率和点击率。在 Next.js 中可通过 next/script 或 metadata API 轻松集成，配合 Google 富结果测试和 Search Console 持续监控效果。

使用 OG 预览工具 检查 Open Graph 标签，使用 Sitemap 生成器 确保页面可被发现，使用 Robots.txt 编辑器 控制爬虫访问。

本站提供浏览器本地工具，免注册即可试用 →

#JSON-LD#结构化数据#SEO#Schema.org#富摘要