An accordion for FAQs, with the right schema

Short answer: one array of questions and answers feeds both the visible Accordion and the FAQPage JSON-LD. The answer text must be in the page HTML: if it exists only after the click, the crawler reads an empty accordion.

Single or multiple

For an FAQ use type="single" with collapsible: one answer at a time, the page stays short and the user does not lose their place. type="multiple" only makes sense when answers are meant to be compared, for instance two pricing tiers side by side.

npx shadcn@latest add accordion

One array, two outputs

"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export type Faq = { question: string; answer: string };

export const faq: Faq[] = [
  { question: "Serve JavaScript?", answer: "No: le risposte sono gia' nell'HTML." },
  { question: "Quante domande?", answer: "Cinque, le stesse del JSON-LD." },
];

export function FaqAccordion() {
  return (
    
      {faq.map((item, index) => (
        
          {item.question}
          {item.answer}
        
      ))}
    
  );
}

import { faq } from "@/app/faq/faq";

export const faqJsonLd = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: faq.map((item) => ({
    "@type": "Question",
    name: item.question,
    acceptedAnswer: { "@type": "Answer", text: item.answer },
  })),
};

The point that breaks everything: unmounted content

Radix keeps no closed panel in the HTML: it mounts the content on open and unmounts it on close. A crawler that does not click finds the titles and nothing else. The two ways out are forceMount on the content, which stays in the DOM with the hidden attribute, or a block of answers that is visible without JavaScript.

Source: the schema.org FAQPage specification and the shadcn/ui Accordion pattern, both MIT licensed for the code; the rule about visible content comes from Google's structured data guidelines, not from a preference of ours.

A named limitation

The markup does not lift rankings and does not guarantee rich results: since 2023 Google shows FAQ rich results only for authoritative government and health sites, and for everyone else the JSON-LD helps machines understand the page rather than decorate the SERP. A second limit: marking up questions that are not visible on the page breaks the guidelines, so the match between what is shown and what is declared has to be kept by hand, on every edit.

Where to continue

In the catalogue you find the shadcn library, an accordion block with preview and the faq category. The full guide to the markup is FAQPage schema and the overview is in how to add schema markup; the roundup of blocks is the best FAQ blocks of 2026. The comparison between component libraries is shadcn versus Mantine; for the colours of a status accordion read status badges.