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

JSON-LD 是一种用于结构化数据的格式，可供搜索引擎和人工智能使用，帮助它们理解页面内容之外的结构。例如，您可以使用它来描述一个人、一个事件、一个组织、一部电影、一本书、一个食谱以及许多其他类型的实体。

我们目前对 JSON-LD 的建议是，将结构化数据渲染为 <script> 标签，放置在您的 layout.js 或 page.js 组件中。

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

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

tsx

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>
  )
}

jsx

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>
  )
}

您可以使用谷歌的 Rich Results Test 或通用的 Schema Markup Validator 来验证和测试您的结构化数据。

您可以使用社区包（例如 schema-dts）为您的 JSON-LD 提供 TypeScript 类型：

tsx

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.',
}

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> ) }

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.', }

文档导航