Implementierung von JSON-LD in Ihrer Next.js-Anwendung

JSON-LD ist ein Format für strukturierte Daten, das von Suchmaschinen und KI genutzt werden kann, um die Struktur einer Seite über den reinen Inhalt hinaus zu verstehen. Beispielsweise können Sie es verwenden, um eine Person, ein Ereignis, eine Organisation, einen Film, ein Buch, ein Rezept und viele andere Arten von Entitäten zu beschreiben.

Unsere aktuelle Empfehlung für JSON-LD ist, strukturierte Daten als <script>-Tag in Ihren layout.js- oder page.js-Komponenten zu rendern.

Das folgende Snippet verwendet JSON.stringify, das bösartige Zeichenketten für XSS-Injection nicht bereinigt. Um diese Art von Sicherheitslücke zu verhindern, können Sie HTML-Tags aus der JSON-LD-Nutzlast entfernen, indem Sie beispielsweise das Zeichen < durch seine Unicode-Entsprechung \u003c ersetzen.

Überprüfen Sie den empfohlenen Ansatz Ihrer Organisation zur Bereinigung potenziell gefährlicher Zeichenketten oder verwenden Sie community-gewartete Alternativen zu JSON.stringify wie 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>
  )
}

Sie können Ihre strukturierten Daten mit dem Rich Results Test von Google oder dem generischen Schema Markup Validator validieren und testen.

Sie können Ihr JSON-LD mit TypeScript typisieren, indem Sie Community-Pakete wie schema-dts verwenden:

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