Menu

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

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

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

次のスニペットはJSON.stringifyを使用しており、XSS インジェクションで使用される悪意のある文字列をサニタイズしません。このタイプの脆弱性を防ぐには、JSON-LDペイロードからHTMLタグを削除できます。例えば、文字<をそのユニコード相当の\u003cに置き換えることで対応できます。

組織で推奨されるサニタイズ方法を確認するか、serialize-javascriptなど、コミュニティで保守されているJSON.stringifyの代替案を使用してください。

app/products/[id]/page.tsx
TypeScript
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>
  )
}

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.org/imgs/sticker.png',
  description: 'Dynamic at the speed of static.',
}