JSON-LD 真实示例

下面的示例可以作为模板使用。复制前请根据页面真实内容、目标平台文档和业务数据字段调整。

文章页

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "@id": "https://example.com/blog/json-ld-guide#article",
  "headline": "JSON-LD 实战指南",
  "description": "从页面内容生成结构化数据的完整流程。",
  "datePublished": "2026-09-22T09:00:00+08:00",
  "dateModified": "2026-09-22T11:00:00+08:00",
  "mainEntityOfPage": "https://example.com/blog/json-ld-guide",
  "author": {
    "@type": "Person",
    "@id": "https://example.com/authors/ada",
    "name": "Ada Chen",
    "url": "https://example.com/authors/ada"
  },
  "publisher": {
    "@type": "Organization",
    "@id": "https://example.com/#organization",
    "name": "Example Docs",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script>

组织与网站

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://example.com/#organization",
      "name": "Example Docs",
      "url": "https://example.com",
      "logo": "https://example.com/logo.png",
      "sameAs": [
        "https://github.com/example",
        "https://www.linkedin.com/company/example"
      ]
    },
    {
      "@type": "WebSite",
      "@id": "https://example.com/#website",
      "name": "Example Docs",
      "url": "https://example.com",
      "publisher": {
        "@id": "https://example.com/#organization"
      }
    }
  ]
}

面包屑导航

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "文档",
      "item": "https://example.com/docs"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "JSON-LD",
      "item": "https://example.com/docs/json-ld"
    }
  ]
}

商品详情

{
  "@context": "https://schema.org",
  "@type": "Product",
  "@id": "https://example.com/products/k1",
  "name": "Acme K1 机械键盘",
  "image": [
    "https://example.com/images/k1-front.jpg",
    "https://example.com/images/k1-side.jpg"
  ],
  "description": "紧凑布局、热插拔轴体、适合写作和编程的机械键盘。",
  "sku": "K1-87-BLACK",
  "brand": {
    "@type": "Brand",
    "name": "Acme"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/products/k1",
    "priceCurrency": "CNY",
    "price": "399.00",
    "availability": "https://schema.org/InStock",
    "itemCondition": "https://schema.org/NewCondition"
  }
}

课程列表

{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@type": "Course",
        "name": "JSON-LD 入门",
        "description": "学习 JSON-LD 的基本语法和网页嵌入方式。",
        "provider": {
          "@type": "Organization",
          "name": "Example Academy",
          "sameAs": "https://example.com"
        },
        "url": "https://example.com/courses/json-ld-basics"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@type": "Course",
        "name": "结构化数据实战",
        "description": "面向内容站点和电商页面的结构化数据实践。",
        "provider": {
          "@type": "Organization",
          "name": "Example Academy",
          "sameAs": "https://example.com"
        },
        "url": "https://example.com/courses/structured-data"
      }
    }
  ]
}

生成函数示例

type Article = {
  title: string;
  summary: string;
  url: string;
  publishedAt: string;
  updatedAt: string;
  authorName: string;
  authorUrl: string;
};

export function createArticleJsonLd(article: Article) {
  return {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: article.title,
    description: article.summary,
    mainEntityOfPage: article.url,
    datePublished: article.publishedAt,
    dateModified: article.updatedAt,
    author: {
      "@type": "Person",
      name: article.authorName,
      url: article.authorUrl,
    },
  };
}

在前端框架中渲染时，需要确保输出的是合法 JSON：

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(createArticleJsonLd(article)) }}
/>

如果内容来自用户输入，要确认框架的序列化方式不会产生可执行脚本注入风险。