Comment implémenter JSON-LD dans votre application Next.js

JSON-LD est un format de données structurées qui peut être utilisé par les moteurs de recherche et l'IA pour les aider à comprendre la structure de la page au-delà du simple contenu. Par exemple, vous pouvez l'utiliser pour décrire une personne, un événement, une organisation, un film, un livre, une recette et bien d'autres types d'entités.

Notre recommandation actuelle pour JSON-LD est de rendre les données structurées sous forme de balise <script> dans vos composants layout.js ou page.js.

L'extrait suivant utilise JSON.stringify, qui ne nettoie pas les chaînes malveillantes utilisées dans les injections XSS. Pour prévenir ce type de vulnérabilité, vous pouvez éliminer les balises HTML de la charge utile JSON-LD, par exemple en remplaçant le caractère < par son équivalent Unicode, \u003c.

Consultez l'approche recommandée par votre organisation pour nettoyer les chaînes potentiellement dangereuses, ou utilisez des alternatives maintenues par la communauté à JSON.stringify comme 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>
      {/* Ajoutez JSON-LD à votre page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
        }}
      />
      {/* ... */}
    </section>
  )
}

Vous pouvez valider et tester vos données structurées avec le Rich Results Test de Google ou le validateur générique Schema Markup Validator.

Vous pouvez typer votre JSON-LD avec TypeScript en utilisant des packages communautaires comme schema-dts:

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