如何在 Next.js 應用程式中實作 JSON-LD

JSON-LD 是一種結構化資料格式，可讓搜尋引擎和 AI 理解網頁內容的結構。例如，您可以用它來描述人物、事件、組織、電影、書籍、食譜等多種實體類型。

目前我們建議在 layout.js 或 page.js 元件中以 <script> 標籤的形式呈現結構化資料。

以下程式碼片段使用了 JSON.stringify，該方法不會過濾用於 XSS 注入的惡意字串。為防止此類漏洞，您可以從 JSON-LD 負載中清除 HTML 標籤，例如將字元 < 替換為其 Unicode 等效項 \u003c。

請參考您組織推薦的方法來過濾潛在危險字串，或使用社群維護的替代方案如 serialize-javascript 來取代 JSON.stringify。

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 的 Rich Results Test 或通用的 Schema Markup Validator 來驗證和測試您的結構化資料。

您可以使用社群套件如 schema-dts 來為 JSON-LD 添加 TypeScript 類型：

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