Cómo implementar JSON-LD en tu aplicación Next.js

JSON-LD es un formato para datos estructurados que pueden ser utilizados por motores de búsqueda e inteligencia artificial para ayudarles a entender la estructura de la página más allá del contenido puro. Por ejemplo, puedes usarlo para describir una persona, un evento, una organización, una película, un libro, una receta y muchos otros tipos de entidades.

Nuestra recomendación actual para JSON-LD es renderizar los datos estructurados como una etiqueta <script> en tus componentes layout.js o page.js.

El siguiente fragmento utiliza JSON.stringify, que no sanitiza cadenas maliciosas usadas en inyección XSS. Para prevenir este tipo de vulnerabilidad, puedes limpiar etiquetas HTML del payload JSON-LD, por ejemplo, reemplazando el carácter < con su equivalente unicode, \u003c.

Revisa el enfoque recomendado por tu organización para sanitizar cadenas potencialmente peligrosas, o usa alternativas mantenidas por la comunidad para JSON.stringify como 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>
      {/* 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>
  )
}

Puedes validar y probar tus datos estructurados con la Prueba de Resultados Enriquecidos para Google o el Validador de Marcado Schema genérico.

Puedes tipar tu JSON-LD con TypeScript usando paquetes de la comunidad como 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.',
}