# An accordion for FAQs, with the right schema

A single array of questions feeds both Accordion and FAQPage JSON-LD. Answers must sit in the HTML: if they only appear on click, crawlers never read them.

> Page: https://ui.eneawork.it/blog/shadcn-accordion-faq
> Markdown: https://ui.eneawork.it/blog/shadcn-accordion-faq.md

*2026-11-01*

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.

Nell'indice dei blocchi pubblicato 17 blocchi hanno «accordion» nel nome, misurati il 1 novembre 2026 nel file sitemap-blocks.xml, su 1.556 blocchi totali. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. Le cinque FAQ di questo articolo sono le stesse che finiscono nel JSON-LD della pagina.

## 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.

## FAQ

### Il contenuto chiuso di un accordion è nell'HTML?

No, Radix lo monta solo all'apertura. Per tenerlo nel DOM aggiungi `forceMount` a `AccordionContent`, e sappi che il contenuto resta nascosto con l'attributo `hidden`.

### Devo scrivere le domande due volte, una per il markup?

No. Un array esportato alimenta il componente e la funzione che costruisce il JSON-LD: due copie divergono alla prima modifica.

### Dove va inserito il JSON-LD nell'App Router?

In un tag `script` con `type="application/ld+json"` dentro il server component della pagina, con `JSON.stringify`. Non serve un client component.

### Quante domande metto nello schema?

Le stesse che si vedono sulla pagina, cinque in questo articolo. Domande in più nello schema e non nella pagina sono una violazione delle linee guida.

### Il markup FAQ porta le stelle su Google?

Non in generale. Dal 2023 i rich result FAQ sono limitati a siti governativi e sanitari autorevoli: per gli altri il markup resta utile ma non cambia la SERP.