JSON-LD结构化数据添加指南

2026-02-19 2026-04-07 约 1700 字预计阅读 4 分钟

一、JSON-LD 是什么？

JSON-LD（JavaScript Object Notation for Linked Data）是一种基于 JSON 的数据格式，专门用于在网页中嵌入结构化数据。简单来说，它就像是给网页内容贴上“标签”，让搜索引擎（如 Google、百度）能清晰、准确地理解页面内容的含义（比如这是一篇文章、一个产品、一家餐厅还是一个人物介绍），从而在搜索结果中展示更丰富的信息（如评分、价格、发布时间等），提升搜索展现效果。

核心特点：
1. 语法简单，基于 JSON，容易编写和理解；
2. 与页面内容分离，无需嵌入到 HTML 标签中，维护更方便；
3. 是搜索引擎推荐的结构化数据格式（Google 优先推荐）。

二、如何将 JSON-LD 添加到网站？

添加 JSON-LD 的核心步骤是：编写符合规范的 JSON-LD 代码 → 将代码嵌入到网页的 <head> 或 <body> 标签中。

1. 基础嵌入方式（通用）

静态网站的页面通常是 HTML 文件，你只需要将 JSON-LD 代码用 <script> 标签包裹，插入到 HTML 的 <head> 区域即可。

示例：给博客文章添加 JSON-LD

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一篇博客 - 编程学习</title>
  <!-- 嵌入 JSON-LD 结构化数据 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",  // 必须，指定结构化数据的标准上下文（schema.org 是通用标准）
    "@type": "Article",                // 必须，定义内容类型（Article 表示文章，还可以是 Product、Person 等）
    "headline": "我的第一篇博客 - 编程学习",  // 文章标题
    "description": "这是一篇关于编程入门的博客，讲解了 JSON-LD 的使用方法",  // 文章描述
    "author": {                        // 作者信息（嵌套结构）
      "@type": "Person",
      "name": "张三"
    },
    "datePublished": "2026-02-19",     // 发布时间
    "dateModified": "2026-02-19",      // 修改时间
    "publisher": {                     // 发布者信息
      "@type": "Organization",
      "name": "编程小屋",
      "logo": {
        "@type": "ImageObject",
        "url": "https://你的域名/logo.png"
      }
    }
  }
  </script>
</head>
<body>
  <!-- 页面内容 -->
  <h1>我的第一篇博客 - 编程学习</h1>
  <p>这是一篇关于编程入门的博客，讲解了 JSON-LD 的使用方法...</p>
</body>
</html>

2. 不同内容类型的 JSON-LD 示例

根据你的静态网站内容，选择对应的 @type 即可，以下是常见场景：

（1）产品页面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "程序员专属马克杯",
  "image": "https://你的域名/mug.jpg",
  "description": "耐高温陶瓷杯，印有编程语录",
  "brand": {
    "@type": "Brand",
    "name": "码农好物"
  },
  "offers": {
    "@type": "Offer",
    "price": "39.9",
    "priceCurrency": "CNY",
    "availability": "https://schema.org/InStock"  // 库存状态
  }
}
</script>

（2）个人主页/作者页面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "张三",
  "jobTitle": "前端开发工程师",
  "url": "https://你的域名/zhangsan.html",
  "description": "专注于前端开发和 SEO 优化",
  "sameAs": [  // 关联社交账号
    "https://github.com/zhangsan",
    "https://blog.csdn.net/zhangsan"
  ]
}
</script>

3. 验证 JSON-LD 是否正确

添加后，需要验证代码是否符合规范，避免语法错误：

打开 Google 的【结构化数据测试工具】：https://search.google.com/test/rich-results
输入你的网页 URL（或直接粘贴 HTML 代码），点击“测试”；
工具会提示是否有错误（如缺少必填字段、语法错误），根据提示修正即可。

三、静态网站批量添加的技巧

如果你的静态网站有多个页面（如博客列表、产品列表），手动逐个添加太麻烦，可以：

使用静态站点生成器（如 Hexo、Jekyll、VuePress）：在模板文件（如 _layout/head.ejs、components/Head.vue）中嵌入 JSON-LD 代码，通过变量动态替换内容（如标题、发布时间）。
示例（Hexo 模板）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "<%= page.title %>",
  "description": "<%= page.description %>",
  "datePublished": "<%= page.date %>",
  "author": {
    "@type": "Person",
    "name": "<%= page.author %>"
  }
}
</script>

纯静态 HTML 网站：可以用批量替换工具（如 VS Code 批量编辑），统一替换核心字段（如域名、品牌名）。

总结

JSON-LD 是给网页添加结构化数据的格式，核心作用是帮助搜索引擎理解页面内容，提升 SEO 展现效果；
添加方式是将 JSON-LD 代码用 <script type="application/ld+json"> 包裹，嵌入到 HTML 的 <head> 中；
关键注意点：@context 必须为 https://schema.org，@type 匹配页面内容类型，添加后用 Google 结构化数据工具验证正确性。

原文链接： https://www.17you.com/library/json-ld%E6%8F%90%E5%8D%87%E7%BD%91%E7%AB%99%E7%9A%84seo/ 已复制！

知识和正确的认知铸就美好旅程

加入自游人，有空让我们一起游，打破认知的围墙！

一起 AI、一起搞钱、一起做数字游民，四海漫游。

请点击联系我

JSON-LD结构化数据添加指南

一、JSON-LD 是什么？

二、如何将 JSON-LD 添加到网站？

1. 基础嵌入方式（通用）

2. 不同内容类型的 JSON-LD 示例

（1）产品页面

（2）个人主页/作者页面

3. 验证 JSON-LD 是否正确

三、静态网站批量添加的技巧

总结

相关内容

目录