Accordion per le FAQ, con lo schema giusto

Risposta breve: un solo array di domande e risposte alimenta l'Accordion visibile e il JSON-LD FAQPage. Il testo delle risposte deve essere nell'HTML della pagina: se esiste solo dopo il click, il crawler legge un accordion vuoto.

Single o multiple

Per una FAQ usa type="single" con collapsible: una risposta alla volta, la pagina resta corta e l'utente non perde il segno. type="multiple" ha senso solo quando le risposte vanno confrontate, per esempio due piani tariffari affiancati.

npx shadcn@latest add accordion

Un array, due uscite

"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 },
  })),
};

Il punto che rompe tutto: il contenuto smontato

Radix non tiene nell'HTML il contenuto di un pannello chiuso: lo monta all'apertura e lo smonta alla chiusura. Un crawler che non esegue il click trova i titoli e niente altro. Le due uscite sono forceMount sul contenuto, che resta nel DOM con l'attributo hidden, oppure un blocco di risposte visibile per chi non ha JavaScript.

Fonte: la specifica FAQPage di schema.org e il pattern Accordion di shadcn/ui, entrambi con licenza MIT per il codice; la regola sul contenuto visibile viene dalle linee guida sui dati strutturati di Google, non da una preferenza nostra.

Limite dichiarato

Il markup non alza le posizioni e non garantisce le stelle: dal 2023 Google mostra i rich result FAQ solo per siti governativi e sanitari autorevoli, e per tutti gli altri il JSON-LD serve a farsi capire, non a decorare la SERP. Secondo limite: marcare domande che non sono visibili sulla pagina è una violazione delle linee guida, quindi l'accordo tra ciò che si vede e ciò che si dichiara va mantenuto a mano, a ogni modifica.

Dove continuare

Nel catalogo trovi la libreria shadcn, un blocco accordion con anteprima e la categoria faq. La guida completa al markup è schema FAQPage e la panoramica è in come aggiungere schema markup; la rassegna dei blocchi è i migliori blocchi FAQ del 2026. Il confronto tra librerie di componenti è shadcn contro Mantine; per i colori di un accordion di stato leggi badge di stato.