Does the FAQ schema really work if answers are hidden in a CSS accordion?

Why does Google make a distinction between CSS and JavaScript?

The difference lies in the way Googlebot accesses the content. When an answer is hidden by CSS, it remains physically present in the source HTML code — Googlebot reads it effortlessly. The display:none or a collapsed accordion does not change this technical accessibility.

In contrast, if the answer loads only on click via JavaScript — typically an AJAX call fetching content from an endpoint — the initial HTML is empty. Google must then execute the JS, trigger the event, and wait for the server response. This chain of operations is not guaranteed during crawling. Even if Google executes JavaScript, it does not simulate user interactions like clicking on each accordion.

Does the FAQ schema require immediate visibility of content?

No, and this is where many go wrong. Google does not require the answer to be visible on screen at page load. What matters is its presence in the initial HTML DOM. A default collapsed accordion, hidden via CSS, remains perfectly compliant.

The only strict requirement: the question must be visible. Not hidden, not white on white, not off-screen. The user must be able to identify that there is a FAQ. The answers can await a click to visually expand — but they must exist behind the scenes from the start.

What happens if the markup is invalidated?

If Google detects that the answers are not in the initial HTML, the FAQ rich snippet disappears from the SERPs. No manual penalty, no deindexing — just a total loss of enriched visibility. You remain ranked normally but without stars, the question carousel, or extra display space.

In some cases, Google may continue to partially display the FAQ schema if some items are valid and others are not. But consistency is rarely present — it’s better not to play with fire and aim for total compliance.

• CSS Accordions: complete HTML, visually hidden answers → valid markup
• AJAX loading on click: initial HTML empty, remote content → invalid markup
• Visible question mandatory: no circumventing allowed, Google checks real visibility
• No algorithmic penalty: only loss of the rich snippet, regular ranking remains intact
• Recommended testing: Search Console checks for content presence, but does not always simulate client-side JS

Is this rule consistent with real-world observations?

Yes, overall. Websites that load their FAQs via AJAX — often to lighten the initial HTML weight or manage thousands of questions — do indeed lose their rich snippets. I've seen e-commerce sites lose 30% of CTR on certain informational queries after migrating to an aggressive lazy-loading system.

However, Google can sometimes be inconsistent: some sites with deferred content loading retain their FAQ snippets for weeks or even months. [To be verified] whether Google applies this rule with the same rigor across sectors or domain authority levels. Larger sites seem to benefit from a longer tolerance period before invalidation.

What nuances should be added to this statement?

The boundary between CSS and JavaScript is not always clear. If you use a modern framework like React or Vue, the initial HTML can be almost empty, even if the FAQ content is technically rendered server-side (SSR). Google crawls the final result, but the JS execution delay can pose problems.

Similarly, some CMS platforms generate complete HTML but rewrite the DOM via JS after the first render. If this rewriting temporarily removes answers from the DOM before reinjecting them, Googlebot may crawl at the wrong time and see nothing. Mueller's statement remains true in theory, but practical implementation is fraught with pitfalls.

When does this rule not really apply?

If your FAQ is not intended to generate rich snippets — for example, an internal FAQ area for customer support, without SERP optimization — the loading method matters little. You can load via AJAX, in an iframe, in a remote modal, it doesn’t matter: no direct SEO impact.

Another edge case: pages with hundreds of Q&A pairs. Loading all HTML at once can explode page weight and degrade LCP. Here, you need to balance between rich snippet and performance. Some decide to only mark the first 10-15 questions visible in HTML as schema, and leave the rest as AJAX without markup. Pragmatic, but this mechanically reduces the enriched visibility surface.

What should you actually do to stay compliant?

First, audit your current implementation. Display the raw HTML source code (Ctrl+U, not the inspector) and check that each answer marked in the FAQ schema appears textually in the code. If you see empty tags or data-endpoint attributes, you are in the red zone.

Next, favor native HTML+CSS accordions. A simple <details> + <summary> does the job without JS and remains crawlable. Otherwise, a classic CSS toggle with a hidden checkbox or active class added on click — as long as the content already exists in the initial DOM, you’re good.

What mistakes should you absolutely avoid?

Never load answers via fetch(), XMLHttpRequest, or any network call triggered by user interaction. Even if your JS is ultra-fast, Googlebot will not click for you. The crawler merely takes the initial HTML and a passive JS rendering.

Avoid frameworks that mount the DOM only client-side (React without SSR, Vue in pure SPA mode). If the HTML served to the bot is a simple <div id="app"></div>, your FAQs do not exist for Google. Use SSR or static pre-rendering instead.

How can I check that my site is really compliant?

Use Google's Rich Results Test tool. Paste the URL, wait for rendering, and check that all your question-answer pairs are detected. If some are missing, it means they are not in the initial HTML or the JSON-LD schema is malformed.

Complete this with a Screaming Frog or Oncrawl crawl in "JavaScript rendering disabled" mode. If your FAQs disappear without JS, they will also disappear for a part of Google crawls. Lastly, monitor Search Console: schema validation errors often come up several days after crawling.

• Check that each FAQ answer is present in the raw HTML source code
• Favor pure CSS accordions or the native element <details>
• Ban any AJAX/fetch loading of answers on user click
• Test the URL in Google's Rich Results Test tool
• Crawl the site with JavaScript disabled to validate content presence
• Regularly monitor schema errors in Google Search Console