JSON-LD & Schema Markup: สอน Next.js ให้คุยภาษาหุ่นยนต์ (SEO Secret Weapon)

export default function BlogPost({ params }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: 'สอนเขียน JSON-LD',
    image: ['https://example.com/image.jpg'],
    datePublished: '2026-02-04',
    author: [{
      '@type': 'Person',
      name: 'Nexis Team',
      url: 'https://example.com/author'
    }]
  }

  return (
    <section>
      <h1>สอนเขียน JSON-LD</h1>
      {/* ฝัง Script ไว้ใน Body ได้เลย Next.js จัดการให้ */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </section>
  )
}

npm install schema-dts

import { Article, WithContext } from 'schema-dts'

export function ArticleJsonLd({ post }: { post: Post }) {
  const schema: WithContext<Article> = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting', // ใช้ BlogPosting เจาะจงกว่า Article
    headline: post.title,
    description: post.description,
    image: post.coverImage,
    datePublished: post.date,
    author: {
      '@type': 'Person',
      name: post.author || 'Nexis Team'
    },
    publisher: {
      '@type': 'Organization',
      name: 'Nexis Knowledge Base',
      logo: {
        '@type': 'ImageObject',
        url: 'https://seereen.online/logo.png'
      }
    }
  }

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  )
}