Next.js 中文网

主题

JSON-LD ​

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

¥JSON-LD is a format for structured data that can be used by search engines and AI to to help them understand the structure of the page beyond pure content. For example, you can use it to describe a person, an event, an organization, a movie, a book, a recipe, and many other types of entities.

我们当前对 JSON-LD 的建议是将结构化数据渲染为 layout.js 或 page.js 组件中的 <script> 标签。例如：

¥Our current recommendation for JSON-LD is to render structured data as a <script> tag in your layout.js or page.js components. For example:

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) }}
      />
      {/* ... */}
    </section>
  )
}

你可以使用 丰富的结果测试 for Google 或通用 模式标记验证器 来验证和测试你的结构化数据。

¥You can validate and test your structured data with the Rich Results Test for Google or the generic Schema Markup Validator.

你可以使用 schema-dts 等社区包通过 TypeScript 键入 JSON-LD：

¥You can type your JSON-LD with TypeScript using community packages like schema-dts:

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

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