FAQ
FAQ
The XAFFAQ component renders an accessible FAQ list and auto-emits Schema.org FAQPage JSON-LD — the markup Google uses for FAQ rich results in SERPs.
Component
<XAFFAQ />
<XAFFAQ
title="Frequently Asked Questions"
:items="[
{ question: 'Is the K1 waterproof?', answer: 'Yes, IPX7 rated — survives accidental spills.' },
{ question: 'Battery life?', answer: 'Up to 200 hours with backlight off; ~40 hours on full.' },
{ question: 'Hot-swappable switches?', answer: 'Yes — 3-pin and 5-pin support.' },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | FAQItem[] | required | Array of { question, answer } objects. |
allOpen | boolean | false | Render all items expanded. Default: only the first item is open. |
emitSchema | boolean | true | Auto-emit FAQPage JSON-LD. Set false when handling schema manually. |
title | string | 'Frequently Asked Questions' | Title shown above the FAQ. |
SEO impact
FAQ rich results can take up significant SERP real estate, especially for long-tail queries. Google's guidance:
- Each
questionandanswermust be on the visible page (not hidden). - Questions should match real search queries your readers ask.
- Don't stuff with marketing fluff — Google has been de-ranking spammy FAQ schemas since 2023.
Best practices
- Pull questions from real search data. Use "People Also Ask" boxes, AnswerThePublic, or your own site's search logs.
- Keep answers 2–4 sentences. Long answers get truncated in the SERP.
- Use 3–8 questions per page. More than 10 dilutes SEO value.
- Place FAQs after the verdict, before related products. Not at the very bottom — readers need to see them.
Layouts
accordion (the default) is the expandable list. two-column renders every question
beside its answer as a description list with nothing to expand — better for short
answers, and for print.
<XAFFAQ :items="faqs" />
<XAFFAQ :items="faqs" layout="two-column" />
<!-- Classic accordion: opening one answer closes the rest -->
<XAFFAQ :items="faqs" :allow-multiple="false" />
| Prop | Type | Default | Description |
|---|---|---|---|
layout | 'accordion' | 'two-column' | 'accordion' | Expandable list, or question-beside-answer |
allowMultiple | boolean | true | Allow several answers open at once |
Why <details>
The accordion is built on native <details> / <summary>: it expands without
JavaScript, is keyboard-operable and screen-reader-announced for free, works with
find-in-page, and prints expanded.
The marketing layer's equivalent animated a max-height estimated from the answer's
character count (ceil(answer.length / 50) * 28 + 40), which clips long answers and
leaves a gap under short ones. That behaviour was deliberately not carried over —
<details> needs no height measurement at all.
AI Context
component: XAFFAQ
package: "@xenterprises/nuxt-x-affiliate"
use-when: >
After the verdict block on every review page. Drives Google FAQ rich
results — significant SERP real estate for long-tail queries. Pass
items as [{ question, answer }]. Auto-emits Schema.org FAQPage JSON-LD.
Pull questions from real search data (PAA boxes, search logs).
3-8 questions per page is the sweet spot. Pair with useFAQSchema()
if you need schema-only emission without rendering.