Toolypet
返回博客
SEO

结构化数据完全指南2026 - 用JSON-LD获取富媒体搜索结果

学习如何使用Schema.org和JSON-LD获取Google富媒体摘要。FAQ、How-to、Product结构化数据实施指南与实战示例。

Toolypet Team

Toolypet Team

Development Team

5 分钟阅读

结构化数据完全指南2026

您是否在搜索结果中看到过星级评分、FAQ或食谱卡片？那就是富媒体搜索结果（Rich Results）。

截至2026年，拥有富媒体结果的页面点击率平均高出58%。使用结构化数据让您的内容脱颖而出。

什么是结构化数据？

结构化数据是一种标准化格式，帮助搜索引擎理解页面内容。

核心概念

术语说明
Schema.org由Google、Microsoft、Yahoo共同开发的词汇表
JSON-LD基于JavaScript的数据格式（Google推荐）
Rich Results基于结构化数据的增强搜索结果
Rich Snippet富媒体结果的旧称

为什么选择JSON-LD？

格式优点缺点
JSON-LD与HTML分离，易于维护依赖JavaScript
Microdata直接嵌入HTML代码复杂
RDFa灵活性强学习成本高

Google官方推荐: JSON-LD

富媒体结果类型

Google支持的主要类型

类型显示形式使用场景
Article新闻卡片博客、新闻
FAQ可展开的问答FAQ页面
How-to分步指南教程
Product价格、库存、评分商品页面
Review星级评分显示评论内容
Recipe烹饪时间、卡路里食谱
Event日期、地点活动
LocalBusiness营业时间、位置本地商家
BreadcrumbList路径显示所有页面

JSON-LD基本结构

模板

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "架构类型",
  "属性1": "值1",
  "属性2": "值2"
}
</script>

必需元素

元素说明
@context始终为"https://schema.org"
@type架构类型（Article、FAQ等）
必需属性因类型而异

实战实施示例

1. Article（博客/新闻）

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "结构化数据完全指南2026",
  "description": "如何用JSON-LD获取富媒体结果",
  "image": "https://example.com/article-image.jpg",
  "author": {
    "@type": "Person",
    "name": "Sam Rank",
    "url": "https://example.com/author/sam-rank"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Toolypet",
    "logo": {
      "@type": "ImageObject",
      "url": "https://toolypet.com/logo.png"
    }
  },
  "datePublished": "2026-02-22",
  "dateModified": "2026-02-22"
}

2. FAQ（常见问题）

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "什么是结构化数据？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "结构化数据是一种标准化格式，帮助搜索引擎理解页面内容。"
      }
    },
    {
      "@type": "Question",
      "name": "JSON-LD应该放在哪里？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "可以放在HTML的<head>或<body>中的任何位置，但建议放在<head>中。"
      }
    }
  ]
}

3. How-to（分步指南）

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "如何添加JSON-LD结构化数据",
  "description": "向网页添加JSON-LD的方法",
  "totalTime": "PT10M",
  "step": [
    {
      "@type": "HowToStep",
      "name": "选择架构类型",
      "text": "选择与页面内容匹配的Schema.org类型。"
    },
    {
      "@type": "HowToStep",
      "name": "编写JSON-LD代码",
      "text": "根据所选架构编写JSON-LD代码。"
    },
    {
      "@type": "HowToStep",
      "name": "插入HTML",
      "text": "用<script type='application/ld+json'>标签包装代码并插入HTML。"
    },
    {
      "@type": "HowToStep",
      "name": "测试",
      "text": "使用Google Rich Results Test验证有效性。"
    }
  ]
}

4. Product（商品）

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "SEO指南手册2026",
  "description": "包含最新SEO策略的实战指南",
  "image": "https://example.com/product.jpg",
  "brand": {
    "@type": "Brand",
    "name": "Toolypet"
  },
  "offers": {
    "@type": "Offer",
    "price": "199",
    "priceCurrency": "CNY",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/product"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "124"
  }
}

5. BreadcrumbList（面包屑导航）

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO",
      "item": "https://example.com/seo"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "结构化数据指南",
      "item": "https://example.com/seo/structured-data"
    }
  ]
}

6. LocalBusiness（本地商家）

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "晨曦咖啡馆",
  "image": "https://example.com/cafe.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "南京路123号",
    "addressLocality": "上海市",
    "addressRegion": "黄浦区",
    "postalCode": "200001",
    "addressCountry": "CN"
  },
  "telephone": "+86-21-1234-5678",
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "09:00",
      "closes": "22:00"
    }
  ],
  "priceRange": "$$"
}

各框架实施方法

Next.js

// app/layout.tsx 或 pages/_document.tsx
import Script from 'next/script';

export default function Layout({ children }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Toolypet",
    "url": "https://toolypet.com"
  };

  return (
    <html>
      <head>
        <Script
          id="json-ld"
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

React（Helmet）

import { Helmet } from 'react-helmet';

function ArticlePage({ article }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": article.title,
    "author": { "@type": "Person", "name": article.author }
  };

  return (
    <>
      <Helmet>
        <script type="application/ld+json">
          {JSON.stringify(jsonLd)}
        </script>
      </Helmet>
      <article>{/* 内容 */}</article>
    </>
  );
}

WordPress

// functions.php
function add_json_ld_schema() {
  if (is_single()) {
    $schema = array(
      "@context" => "https://schema.org",
      "@type" => "Article",
      "headline" => get_the_title(),
      "datePublished" => get_the_date('c')
    );
    echo '<script type="application/ld+json">' . json_encode($schema) . '</script>';
  }
}
add_action('wp_head', 'add_json_ld_schema');

验证与测试

Google官方工具

工具网址用途
Rich Results Testsearch.google.com/test/rich-results富媒体结果资格测试
Schema Markup Validatorvalidator.schema.org验证架构语法
Search Consolesearch.google.com/search-console检查实际索引状态

测试清单

  • 无JSON语法错误
  • 包含所有必需属性
  • 与实际页面内容匹配
  • 有效的图片URL
  • 通过Rich Results Test

常见错误与解决方案

1. JSON语法错误

// ❌ 错误：末尾逗号
{
  "name": "测试",
  "url": "https://example.com",  // 这里！
}

// ✅ 正确
{
  "name": "测试",
  "url": "https://example.com"
}

2. 缺少必需属性

// ❌ Article缺少author
{
  "@type": "Article",
  "headline": "仅有标题"
}

// ✅ 包含必需属性
{
  "@type": "Article",
  "headline": "完整文章",
  "author": { "@type": "Person", "name": "作者" },
  "datePublished": "2026-02-22"
}

3. 内容不匹配

// ❌ 与页面内容不同
{
  "@type": "Product",
  "price": "10000"  // 实际页面显示15000
}

// 违反Google指南 = 人工处罚风险

4. 过度标记

❌ 将所有文本标记为结构化数据
❌ 对隐藏内容应用架构
❌ 包含用户看不到的信息

✅ 仅标记实际可见的内容
✅ 仅结构化关键信息

SEO效果

预期效果

指标改善
CTR（点击率）+20-58%
展示次数富媒体结果资格
信任度显示星级评分、评论
语音搜索答案候选

注意事项

  • 结构化数据 ≠ 保证排名提升
  • 富媒体结果显示由Google决定
  • 违反指南可能导致人工处罚

最佳实践清单

实施

  • 选择适合页面类型的架构
  • 包含所有必需属性
  • 使用JSON-LD格式
  • 放置在<head>中

内容

  • 与实际页面内容匹配
  • 仅包含用户可见的信息
  • 保持信息最新

测试

  • 通过Rich Results Test
  • 通过Schema Markup Validator
  • Search Console无错误

常见问题

Q1: 结构化数据直接影响排名吗？

A: 它不是直接的排名因素。但是，它有间接效果，如增加点击率、语音搜索答案等。

Q2: 一个页面可以放多个架构吗？

A: 可以！同时使用Article + FAQ + BreadcrumbList是很常见的。每个使用单独的<script>标签添加。

Q3: 为什么富媒体结果不显示？

A: 可能的原因：

  • 缺少必需属性
  • 页面未被索引
  • Google的自由裁量（不保证）
  • 竞争页面更合适

Q4: Microdata vs JSON-LD，应该选择哪个？

A: 推荐JSON-LD。它是Google官方推荐的，与HTML分离，更易于维护。

Q5: 动态内容也可以应用结构化数据吗？

A: 可以！Google可以读取JavaScript生成的JSON-LD。但是，服务器端渲染更稳定。

总结

结构化数据要点：

  1. 使用JSON-LD: Google推荐格式
  2. 选择适当的架构: 匹配内容类型
  3. 包含必需属性: 检查类型特定要求
  4. 匹配内容: 仅可见信息
  5. 彻底测试: 通过Rich Results Test

相关工具

工具用途
结构化数据生成器自动生成JSON-LD
Meta标签生成器生成meta标签
SERP预览预览搜索结果
结构化数据JSON-LDSchema.org富媒体摘要SEO搜索优化

关于作者

Toolypet Team

Toolypet Team

Development Team

The Toolypet Team creates free, privacy-focused web tools for developers and designers. All tools run entirely in your browser with no data sent to servers.

Web DevelopmentCSS ToolsDeveloper ToolsSEOSecurity
返回所有文章