How to Build a Proper FAQ Page (With Code That Actually Helps Your SEO)

A FAQ page built with flat HTML — just headings and paragraphs — is a missed opportunity. Done properly, with an accordion pattern and FAQPage schema, the same content can trigger rich results in Google, answer voice search queries, and pull in long-tail traffic you'd otherwise miss entirely. Here's exactly how to build one.

This article is for small business owners who want to understand what their developer should be doing — and if you'd like your own FAQ reviewed as part of a local SEO audit, that's included — and for developers who want a working starting point. The code examples are real, minimal, and production-ready. Nothing academic about it.

Why a FAQ page is worth doing properly

Most FAQ pages are an afterthought — a flat list of questions and answers thrown onto a page, no structure, no markup, nothing to help Google understand what it's looking at. From a search perspective, that page might as well not exist.

A properly built FAQ page does three things that a flat text version cannot:

FAQPage rich results. When Google can read your FAQ schema, it may display your questions and answers as expandable items directly in the search results page — without the user clicking through to your site. That sounds counterintuitive until you realise it dramatically increases your visual footprint in the SERP and drives branded clicks from people who now know you answered their question.
Long-tail and question query traffic. People search in full sentences: "how long does an SEO audit take", "do I need a developer to fix my website SEO". FAQ pages written in natural language are one of the most efficient ways to capture this traffic — especially for questions that don't have a dedicated page on your site.
Voice and AI search compatibility. Voice searches and AI-generated answers both favour content structured as questions and direct answers. A properly marked-up FAQ page is one of the easiest ways to show up in these contexts.

The two parts: visible UI and invisible markup

A proper FAQ page has two distinct layers that work together. The first is the visible accordion — a collapsible list of questions that users can expand and collapse. The second is the JSON-LD FAQPage schema — invisible structured data in the page's <head> that tells Google exactly what the questions and answers are.

Many sites have one or the other. The ones that benefit from both have both. The accordion alone looks good but doesn't give Google anything structured to work with. The schema alone works for Google but gives users a poor experience. You need both.

The accordion HTML pattern

The key to an accessible, SEO-friendly accordion is using a <button> element for the question (not a link, not a div) and linking it to the answer panel with aria-controls and aria-expanded. This makes it keyboard-navigable and readable by screen readers without any extra effort.

HTML — one accordion item

<div class="faq-item">

  <button
    class="faq-question"
    aria-expanded="false"
    aria-controls="answer-1"
  >
    How long does an SEO audit take?
  </button>

  <div
    id="answer-1"
    role="region"
    hidden
  >
    <p>Most audits are delivered within 5–10 business days
    after the discovery call.</p>
  </div>

</div>

The JavaScript is minimal — toggle aria-expanded on click and show or hide the panel. If you want a smooth animation, max-height transitions in CSS are the standard approach — set max-height: 0 when closed and max-height: panel.scrollHeight + "px" when opened, with a CSS transition on the property.

JavaScript — toggle on click

document.querySelectorAll('.faq-question').forEach(btn => {
  btn.addEventListener('click', () => {
    const expanded = btn.getAttribute('aria-expanded') === 'true';
    const panel    = document.getElementById(
                        btn.getAttribute('aria-controls')
                      );

    btn.setAttribute('aria-expanded', !expanded);
    panel.hidden = expanded;
  });
});

The FAQPage JSON-LD schema

This goes inside a <script type="application/ld+json"> tag in the <head>. Each question becomes a Question object with an acceptedAnswer. The answers in the schema don't need to be word-for-word copies of the visible text — but they should be complete and accurate. Don't truncate them.

JSON-LD — FAQPage schema

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How long does an SEO audit take?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Most audits are delivered within 5–10 business
          days after the discovery call, depending on
          the size of your site and which package
          you've selected."
      }
    },
    {
      "@type": "Question",
      "name": "Do you work with businesses outside Victoria?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes — all of Vancouver Island is served,
          from Victoria to Port Hardy."
      }
    }
  ]
}
</script>

One critical rule: valid JSON only. A trailing comma on the last item in an array, or a missing quote, will silently break the entire schema block. Before deploying, run it through Google's Rich Results Test or a JSON validator. This is one of the most common errors found during SEO audits — schema that looks fine in the code editor but fails because of a single stray character.

"The question that trips up most developers: the schema and the visible HTML are separate. Both have to exist. One without the other is half the job."

What makes a good FAQ question

The structure is only as useful as the questions inside it. Three principles worth following:

Write in customer language, not business language. Your customers search "how much does an SEO audit cost" — not "what is the investment for professional search engine optimisation services." The question in your schema should match what people actually type.
Actually answer the question. A FAQ answer that circles around with "it depends" and no specifics does nothing for Google and frustrates the person reading it. Give the real answer, even if it requires a caveat or two.
Keep each question to one thing. A question that's really two questions — "What does the audit cover and how long does it take?" — should be two separate entries.

The local SEO angle

For a Vancouver Island business, FAQ pages have a specific advantage that's easy to overlook. Questions that name your community — "Do you serve businesses in Campbell River?" or "Is your service available in the Comox Valley?" — are themselves local search queries. Someone in Campbell River typing exactly that question will find you, because you've explicitly answered it.

This is why local SEO audits routinely flag FAQ pages as an underused asset. A well-built FAQ page is one of the most efficient ways to capture the kind of specific, intent-driven searches that turn into actual phone calls — without writing a separate page for every possible question.

Common mistakes to avoid

Schema without the accordion. Google expects the schema to reflect content that's actually visible on the page. If your JSON-LD references questions that don't exist in the HTML, you risk a manual action or the rich result being suppressed.
Questions that are really sales copy. "Why is Island Rank Canada the best choice for your business?" is not a question your customers are asking. It will not rank for anything and may trigger a quality review of the FAQ schema.
Putting every question on one page with no structure. Thirty questions in a flat unordered list is a usability disaster. Group by topic, give each group a heading, and keep related questions together. The navigation experience matters as much as the markup.
Forgetting to update the schema when you update the content. If you change an answer in the visible HTML but don't update the JSON-LD to match, you have mismatched content — which Google flags as a violation of structured data guidelines.

How many questions is the right number?

There's no official limit, but there are practical ones. Google will only show a handful of your FAQ items as rich results in the SERP — typically two or three per query. More questions is generally better for covering a wide range of long-tail search queries, as long as each one earns its place with a genuine answer. What you want to avoid is padding: questions added to hit a round number that don't reflect what customers actually ask.

Start with the questions you actually hear on sales calls and in emails. Those are the real ones. Build outward from there based on what you know people search for in your category.

Written by Michael Perks — Island Rank Canada, Duncan, BC. I do plain-English SEO audits for small businesses across Vancouver Island. If your site's FAQ page — or any part of its technical setup — has never been properly reviewed, a discovery call is a good starting point.