Schema Markup for Modern Web Apps: A Practical JSON-LD Guide

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://example.com/#organization",
      "name": "ScanWise",
      "url": "https://example.com",
      "logo": {
        "@type": "ImageObject",
        "@id": "https://example.com/#logo",
        "url": "https://example.com/images/logo.png"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://example.com/#website",
      "url": "https://example.com",
      "name": "ScanWise",
      "publisher": {
        "@id": "https://example.com/#organization"
      }
    },
    {
      "@type": "BlogPosting",
      "@id": "https://example.com/blog/example-post#article",
      "isPartOf": {
        "@id": "https://example.com/#website"
      },
      "headline": "Example Technical Guide",
      "datePublished": "2026-09-22T09:00:00Z",
      "dateModified": "2026-09-22T09:00:00Z",
      "publisher": {
        "@id": "https://example.com/#organization"
      }
    }
  ]
}

import { FaqItem } from '@/lib/blog/schema';

interface FaqSectionProps {
  faq: FaqItem[];
}

export function FaqSection({ faq }: FaqSectionProps) {
  if (!faq || faq.length === 0) return null;

  // 1. Generate FAQPage JSON-LD matching the exact visible DOM strings
  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: faq.map((item) => ({
      '@type': 'Question',
      name: item.question,
      acceptedAnswer: {
        '@type': 'Answer',
        text: item.answer,
      },
    })),
  };

  return (
    <section className="my-12 pt-8 border-t">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
      <h2 className="text-2xl font-bold mb-6">Frequently Asked Questions</h2>
      <div className="space-y-4">
        {faq.map((item, idx) => (
          <details key={idx} className="group p-4 rounded-xl border bg-brand-cloud">
            <summary className="font-semibold cursor-pointer list-none flex justify-between">
              <span>{item.question}</span>
              <span className="text-brand-primary group-open:rotate-180 transition-transform">▼</span>
            </summary>
            <p className="mt-3 text-brand-charcoal/80 leading-relaxed text-sm">
              {item.answer}
            </p>
          </details>
        ))}
      </div>
    </section>
  );
}