A useful FAQ page answers the questions customers really send you, grouped by topic, with each answer starting in its first sentence. Use native details and summary elements for an accordion that works without scripts, add search once you pass about twenty questions, and link to fuller help where an answer needs steps.
| Number of questions | Layout | Example on this page |
|---|---|---|
| Under 8 | All answers open, no accordion | Open list |
| 8 to 20 | Single accordion, one topic | Native accordion |
| 20 to 50 | Accordions grouped under topic headings | Grouped FAQ |
| Over 50 | Search box plus topic groups | Search demo above |
Updated
FAQ roundups mostly point at other companies' help centres. Here each layout is built for an invented business in plain HTML, with a working search demo, so you can copy the structure and fill it with your own customers' questions.
Type a word such as vegan, deposit or deliver. The list narrows as you type and shows how many answers match, which is how a long FAQ stays usable.
Orders: Five days for most cakes and two weeks for tiered cakes.
Orders: Yes, up to 48 hours before collection. Reply to your confirmation email.
Orders: Yes, between 9 am and 3 pm on weekdays.
Delivery: Yes, within 8 miles of the shop, for a flat fee shown at checkout.
Delivery: Collection starts at 7:30 am every day we are open.
Delivery: The driver calls you, then brings the order back to the shop for collection.
Dietary: Yes, but it is baked in the same kitchen as wheat, so it is not suitable for coeliacs.
Dietary: Three of our cakes are vegan and are marked on the menu.
Dietary: Every label lists allergens, and staff can show you the full sheet.
Payments: All major debit and credit cards, plus phone payments.
Payments: Celebration cakes need a 50 percent deposit when you order.
Payments: Deposits are refunded in full if you cancel 72 hours or more before collection.
details and summary need no script. The shared name attribute closes the open answer when another opens.
<style>
details { border-bottom: 1px solid #e2e8f0; padding: 12px 4px }
summary { font-weight: 600; cursor: pointer }
summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px }
details p { margin: 8px 0 0; color: #334155 }
</style>
<details name="faq" open>
<summary>How long does a home survey take?</summary>
<p>Most houses take three to four hours. Flats are usually under two.</p>
</details>
<details name="faq">
<summary>When do I get the report?</summary>
<p>Within five working days, as a PDF by email.</p>
</details>
<details name="faq">
<summary>Do I need to be there?</summary>
<p>No. We only need access to every room and the loft hatch.</p>
</details>Headings let people jump to their topic. The last line gives a way out when the answer is missing.
<style>
h2 { font-size: 16px; margin: 14px 0 4px; color: #1e3a8a }
details { border-bottom: 1px solid #e2e8f0; padding: 9px 2px }
summary { cursor: pointer; font-weight: 600 }
p { margin: 6px 0 0; color: #334155 }
</style>
<h2>Booking</h2>
<details><summary>Can I bring my dog to the cabin?</summary><p>Yes, two dogs at most, for a small cleaning fee.</p></details>
<details><summary>What time is check-in?</summary><p>From 4 pm. Check-out is by 10 am.</p></details>
<h2>On site</h2>
<details><summary>Is there phone signal?</summary><p>Weak signal outside; the cabin has wifi.</p></details>
<details><summary>Is firewood included?</summary><p>One basket a night is included. Extra baskets are on sale at reception.</p></details>
<p style="margin-top:14px">Still stuck? <a href="#contact">Send us a message</a> and we reply the same day.</p>With only a handful of questions, hiding answers adds clicks for no benefit. A definition list keeps question and answer paired.
<style>
dt { font-weight: 700; margin-top: 12px }
dd { margin: 4px 0 0; color: #334155 }
</style>
<dl>
<dt>Do you work weekends?</dt><dd>Saturdays only, by appointment.</dd>
<dt>Do you give written quotes?</dt><dd>Yes, every quote is written and fixed for 30 days.</dd>
<dt>Are you insured?</dt><dd>Yes. We can send a copy of the certificate on request.</dd>
</dl>Only include questions that appear on the page in the same words. For most sites this no longer changes how the result looks in Google.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "How long does a home survey take?",
"acceptedAnswer": { "@type": "Answer", "text": "Most houses take three to four hours. Flats are usually under two." }
},
{
"@type": "Question",
"name": "When do I get the report?",
"acceptedAnswer": { "@type": "Answer", "text": "Within five working days, as a PDF by email." }
}
]
}
</script>Lead with the answer itself, then the condition or detail. Do you deliver on Sundays? Yes, in the city centre, between 10 am and 4 pm, is better than a paragraph about your delivery partners.
If an answer grows past a few sentences, it is probably a help article. Summarise it in the FAQ and link to the full version.
FAQPage markup no longer earns the expandable search result it once did for ordinary sites. It does no harm when it mirrors the visible questions word for word, and it can help other tools that read schema.org.
Never mark up questions that are not on the page, and do not use FAQPage for advertising copy. If in doubt, leave it out and spend the time on better answers.
Real questions from customers, short direct answers, topic groups that match how people think about your service, and a way to contact you when the answer is not there. It should be updated whenever the same new question arrives twice.
Not for most sites. Google limited FAQ rich results to well known government and health sites in 2023, and its documentation says the feature no longer appears in Google Search from May 7, 2026. The markup is still valid schema.org, so keep it only if it matches visible content.
Wrap each question and answer in a details element with the question inside summary. Browsers handle opening, closing and keyboard support. Adding the same name attribute to each details makes them an exclusive group where opening one closes the others.
Both. Put the two or three questions that block a decision right beside the thing they are about, such as shipping questions on the product page, and keep the full list on one FAQ page that the footer links to.
Use a real button for each question, set aria-expanded to true or false to match the answer's state, and optionally point aria-controls at the answer. Enter and Space then toggle it, as described in the WAI-ARIA disclosure pattern.
Related: FAQ generator, Structured data examples, Schema markup validator, Website accessibility checklist, Website header examples.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.