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

JSON-LD は、検索エンジンや AI が純粋なコンテンツを超えてページの構造を理解するのに役立つ構造化データの形式です。たとえば、人物、イベント、組織、映画、書籍、レシピ、その他多くの種類のエンティティを説明するために使用できます。

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

以下のスニペットでは、XSS 注入に使用される悪意のある文字列をサニタイズしない JSON.stringify を使用しています。この種脆弱性を防ぐには、たとえば文字 < をその Unicode 相当の \u003c に置き換えることで、JSON-LD ペイロードから HTML タグを削除できます。

組織の推奨する、潜在的に危険な文字列をサニタイズする方法を確認するか、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>
  )
}

Google の リッチリザルトテスト や、汎用的な Schema Markup Validator で構造化データを検証およびテストできます。

schema-dts のようなコミュニティパッケージを使用して、TypeScript で 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.dokyumento.jp/imgs/sticker.png',
  description: 'Dynamic at the speed of static.',
}