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.

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

¥The following snippet uses JSON.stringify, which does not sanitize malicious strings used in XSS injection. To prevent this type of vulnerability, you can scrub HTML tags from the JSON-LD payload, for example, by replacing the character, <, with its unicode equivalent, \u003c.

查看贵组织推荐的方法来清理潜在危险的字符串，或使用社区维护的 JSON.stringify 替代方案，例如 serialize-javascript。

¥Review your organization's recommended approach to sanitize potentially dangerous strings, or use community maintained alternatives for JSON.stringify such as, 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>
  )
}

你可以使用 丰富的结果测试 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.',
}