JSON LD

JSON-LD is a structured data format that helps search engines better understand your content. It can be used to describe various entities, such as people, events, organizations, movies, books, recipes, and more.

We recommend adding JSON-LD as a <script> tag within your layout.js or page.js components.

To ensure accuracy, you can validate your structured data using tools like Google's Rich Results Test or the Schema Markup Validator.

For TypeScript users, you can type your JSON-LD with community packages such as schema-dts.

Using the dynamic generateViewport() function.
import { Product, WithContext } from 'schema-dts'

export default async function Page({ params }) {
  const product = await getProduct(params.id)
 
  const jsonLd: WithContext<Product> = {
    '@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) }}
      />
      {/* ... */}
    </section>
  )
}