پیاده‌سازی JSON-LD در Next.js – داده‌های ساخت‌یافته برای SEO و موتورهای هوشمند

مقدمه

JSON-LD یک قالب دادهٔ ساخت‌یافته است که توسط موتورهای جستجو مانند Google برای درک بهتر محتوای صفحه استفاده می‌شود. این قالب می‌تواند اطلاعاتی دربارهٔ محصول، رویداد، شخص، کتاب، فیلم و موارد دیگر ارائه دهد.

افزودن JSON-LD به صفحات Next.js

توصیه می‌شود داده‌های JSON-LD را به‌صورت یک تگ <script type="application/ld+json"> در کامپوننت‌های layout.tsx یا page.tsx قرار دهید.

مثال:

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>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
        }}
      />
      {/* سایر محتوای صفحه */}
    </section>
  )
}

جلوگیری از آسیب‌پذیری XSS

تابع JSON.stringify داده‌ها را sanitize نمی‌کند. برای جلوگیری از تزریق کد مخرب، کاراکتر < را با \u003c جایگزین کنید یا از کتابخانه‌هایی مانند serialize-javascript استفاده کنید.

تایپ‌گذاری JSON-LD با TypeScript

برای تایپ‌گذاری دقیق داده‌های JSON-LD می‌توان از پکیج 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.',
}

اعتبارسنجی داده‌های ساخت‌یافته

برای تست و اعتبارسنجی JSON-LD می‌توانید از ابزارهای زیر استفاده کنید:

جمع‌بندی

استفاده از JSON-LD در Next.js باعث بهبود SEO و درک بهتر ساختار صفحه توسط موتورهای جستجو می‌شود. با رعایت نکات امنیتی و استفاده از تایپ‌گذاری TypeScript، می‌توان داده‌های ساخت‌یافته‌ای امن و دقیق تولید کرد.