JSON-LD

2026年9月6日

JSON-LD（JSON for Linked Data）让爬虫和部分 AI 知道「这页是一篇文章 / 一件商品 / 一个人」，而不是只有一段看不见结构的 HTML。富结果（评分、面包屑、常见问题）经常依赖它。

词表在 schema.org。类型很多，先把和页面一致的那几个做对。

最小形状

{
  "@context": "https://schema.org",
  "@type": "Person",
  "@id": "https://example.com/people/jin",
  "name": "槿"
}
json

@context：几乎总是 https://schema.org
@type：Article、Product、Organization、Person…
@id：稳定标识，常用规范 URL
其余字段按该类型文档填，类型一览

标注必须和可见内容一致。页面写 A、JSON-LD 写 B，属于误导。

在页面里输出

官方建议原生 <script type="application/ld+json">，不要用 next/script——这不是要执行的 JS。

export default async function Page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProduct(id);

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    image: product.image,
    description: product.description,
  };

  return (
    <section>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
        }}
      />
      <h1>{product.name}</h1>
    </section>
  );
}
tsx

replace(/</g, "\\u003c") 避免描述里的 < 被解析成标签，降低 XSS 面。不可信字符串更要过滤。

TypeScript 可用 schema-dts：

import type { Product, WithContext } from "schema-dts";

const jsonLd: WithContext<Product> = {
  "@context": "https://schema.org",
  "@type": "Product",
  name: "贴纸",
};
ts

放哪、怎么验

全站 / 栏目：layout.tsx
文章、商品：page.tsx，跟这条数据绑死
服务端生成，保证首屏 HTML 里就有

校验：

下一篇：Open Graph，管微信、Slack 里的分享卡片。

最小形状

在页面里输出

放哪、怎么验

参考文档