shadcn.io is not affiliated with official shadcn/ui
JSON-LD FAQ Block for Vue
A gift-shop FAQ that shows what its structured data is for: six questions beside a mock search result with an FAQ rich result, and one FAQPage JSON-LD script built from the same list.
Installation
Overview
An FAQ for Vue with Ark UI that also speaks to search engines. A start column holds the header and six questions as hairline rows with a leading chevron; past a split divider an end column holds a framed mock of a search result: a search field, the site, a title and a snippet, and under them a rich result that lists the first two questions, which open. The block also renders one <script type="application/ld+json"> with the FAQPage structured data, built from the same FAQS array that draws the list and the mock, so the markup can't drift from the page. On a phone the mock follows the questions. It's built from Accordion and Guides. For shops, help centres and any page whose questions you want machines to read.
FAQ
What does the structured data contain?
One FAQPage object with a Question for every entry in FAQS, each with its acceptedAnswer text. It's built by faqPageJsonLd(FAQS) at the top of the file and rendered into a script tag, with every < escaped as < so an answer can never close the tag. Edit FAQS and the visible list, the mock and the data all change together. The answers must be plain text: the schema allows a little HTML, but this builder doesn't add any.
Will search engines show the rich result in the mock?
Not on request. The mock is an illustration of how marked-up questions can appear; whether a result shows them is up to each search engine, and some now show FAQ results for only a few kinds of site. The markup is still valid, and it's read by other tools that understand structured data, so it's worth keeping honest and in step with the page. Check yours with a rich results test before promising anything.
Is the mock a real search result?
No: it's drawn from the block's own parts, with a fictional site and address. The search field, site name, title and snippet are decoration and hidden from assistive technology; the two questions in the rich result are a real accordion, so they can be opened with a keyboard. They come from the first two entries of FAQS.
Are the closed answers in the page's markup?
Yes. The main Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3 under the section's h2, and the mock's two questions are buttons inside h4s in a captioned figure. Tab moves through all of them, Enter or Space opens one, and each button says whether it's expanded.
The Up and Down arrows also move between questions within a list, and Home and End jump to the first and last.