Как реализовать JSON-LD в вашем Next.js приложении

JSON-LD — это формат структурированных данных, который могут использовать поисковые системы и ИИ для лучшего понимания структуры страницы помимо её содержимого. Например, с его помощью можно описать человека, событие, организацию, фильм, книгу, рецепт и многие другие типы сущностей.

Наша текущая рекомендация для JSON-LD — рендерить структурированные данные как тег <script> в ваших компонентах layout.js или page.js.

Следующий фрагмент использует JSON.stringify, который не санирует вредоносные строки, используемые в XSS-инъекциях. Чтобы предотвратить эту уязвимость, вы можете очистить HTML-теги из JSON-LD данных, например, заменив символ < на его юникодный эквивалент \u003c.

Ознакомьтесь с рекомендуемым подходом вашей организации для санации потенциально опасных строк или используйте альтернативы JSON.stringify, поддерживаемые сообществом, такие как 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>
  )
}

Вы можете проверить и протестировать свои структурированные данные с помощью Rich Results Test от Google или универсального Schema Markup Validator.

Вы можете типизировать JSON-LD с помощью TypeScript, используя пакеты сообщества, такие как 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.',
}