كيفية تنفيذ 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 من جوجل أو 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.',
}