如何在 Next.js 应用中实现 JSON-LD

JSON-LD 是一种结构化数据格式，可被搜索引擎和 AI 用来理解页面内容的结构。例如，您可以用它来描述人物、事件、组织、电影、书籍、食谱等多种实体类型。

我们当前推荐在 layout.js 或 page.js 组件中以 <script> 标签的形式渲染结构化数据。

以下代码片段使用了 JSON.stringify，该方法不会对 XSS 注入中的恶意字符串进行消毒处理。为防止此类漏洞，您可以从 JSON-LD 有效负载中清除 HTML 标签，例如将字符 < 替换为其 Unicode 等效字符 \u003c。

请查阅您所在组织推荐的消毒潜在危险字符串的方法，或使用社区维护的 JSON.stringify 替代方案，如 serialize-javascript。

export default async function Page({ params }) {
  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>
      {/* Add JSON-LD to your page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
        }}
      />
      {/* ... */}
    </section>
  )
}

export default async function Page({ params }) {
  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>
      {/* Add JSON-LD to your page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
        }}
      />
      {/* ... */}
    </section>
  )
}

您可以使用 Google 的富媒体搜索结果测试或通用的 Schema 标记验证工具来验证和测试您的结构化数据。

您可以使用社区包如 schema-dts 通过 TypeScript 为 JSON-LD 添加类型：

import { Product, WithContext } from 'schema-dts'

const jsonLd: WithContext<Product> = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  name: 'Next.js Sticker',
  image: 'https://nextjs.org/imgs/sticker.png',
  description: 'Dynamic at the speed of static.',
}