Next.jsアプリケーションでJSON-LDを実装する方法

JSON-LDは構造化データのフォーマットで、検索エンジンやAIがページの構造をコンテンツ以上のレベルで理解するのに役立ちます。例えば、人物、イベント、組織、映画、書籍、レシピなど、さまざまな種類のエンティティを記述するために使用できます。

現在、JSON-LDに関する私たちの推奨方法は、layout.jsまたはpage.jsコンポーネント内で<script>タグとして構造化データをレンダリングすることです。

以下のスニペットではXSSインジェクション攻撃に悪用される可能性のある文字列をサニタイズしないJSON.stringifyを使用しています。この種の脆弱性を防ぐには、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>
      {/* ページにJSON-LDを追加 */}
      <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>
      {/* ページにJSON-LDを追加 */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
        }}
      />
      {/* ... */}
    </section>
  )
}

構造化データはRich Results Test（Google用）または一般的なSchema Markup Validatorで検証・テストできます。

TypeScriptを使用する場合、schema-dtsなどのコミュニティパッケージで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.',
}