Is it true that hidden content in accordions is actually indexed by Google?

What does “present in the DOM” really mean?

The DOM (Document Object Model) refers to the complete structure of the HTML document as built by the browser. A piece of content can be invisible on screen but still present in the DOM — typically via CSS properties like display:none or visibility:hidden.

Google's statement settles an old SEO debate: content hidden by pure CSS is indeed indexable. What matters is that the raw HTML actually contains the text at the time of crawling, not whether it is visible on the first display. Classic accordions, Bootstrap tabs, or React toggles fall into this category — they load all the content at once and then visually hide it.

Why does Google advise against hiding the main content?

Because user experience takes precedence. If your central selling point, value proposition, or critical information is tucked away behind a click, you’re wasting the visitor’s time. Google considers this a degraded UX pattern.

From an algorithmic standpoint, we can assume — without absolute certainty — that Google might assign less semantic weight to content it has to “guess” is invisible by default. There’s no official confirmation on this, but the recommendation remains clear: only hide the non-essential, never the essential.

What does Google mean by “not used for snippets”?

Snippets (meta descriptions, rich snippets, featured snippets) are generated from areas that Google deems representative and immediately visible. Text hidden behind an accordion is unlikely to be selected for these displays, even if it’s indexed.

In practical terms? Your FAQ block in an accordion can be indexed and rank for long-tail keywords, but Google will likely favor “above the fold” content to compose the visible snippet in the SERP. If you want to optimize your CTR via snippets, expose the content directly.

• Content hidden by pure CSS (accordions, tabs) is indexable as long as it appears in the source HTML.
• Never hide the main content behind an interaction — reserve that for secondary or complementary sections.
• Snippets prefer visible content on the first display, not what’s hidden in accordions.
• Always check the rendering on Googlebot’s side via Search Console to confirm that your content is indeed present in the crawled DOM.

Is this statement consistent with field observations?

Overall yes, and it's actually a welcome confirmation. For years, we've observed that sites with accordion FAQs rank perfectly for the corresponding long-tail queries. A/B tests show that expanding all content or keeping it in an accordion does not significantly change indexing.

However — and this is where it gets tricky — the nuance about snippets deserves attention. It’s true that Google tends to pull from immediately visible content to generate snippets. But there are counter-examples: some FAQs structured in accordions show up in featured snippets if the Schema.org FAQPage markup is well implemented. [To check]: does the Schema offset the visual penalty, or are there exceptions on low-competition queries?

What limits should we place on this rule?

First point: this rule only applies to content present in the DOM at the time of the initial crawl. If your accordion loads content via AJAX after a user click, Googlebot might miss it depending on the rendering latency and the complexity of JavaScript. The guarantee of indexing only holds for preloaded HTML.

Second limit: we are talking about simple textual content. For heavy media (videos, embedded iframes) or complex interactive widgets hidden in tabs, indexing remains random. Google guarantees nothing for these cases — Splitt explicitly mentions “content,” not “media resources.”

Should we still favor visible content to rank?

Let’s be honest: anything that improves UX indirectly improves SEO. If your visitors have to click through five tabs to find the information, your bounce rate rises, session time decreases, and your user signals deteriorate. Algorithm or not, it’s bad for your ranking.

Google's recommendation is not trivial. It implies that even if indexing is guaranteed, the semantic weight or priority assigned to hidden content could be lower. No official confirmation on this, but the principle of caution remains valid: expose directly what matters, hide what is optional.

How to structure accordions and tabs in a SEO-friendly way?

Load all content into the DOM on the first HTML render. No lazy-loading JavaScript for critical sections. Use pure CSS patterns (display:none + toggle via aria-expanded attribute) or frameworks that generate complete HTML server-side. React Server Components, Next.js SSR, or even good old static HTML work perfectly.

Reserve accordions and tabs for secondary or complementary content: FAQs, technical details, product specifications, additional testimonials. The hero block, value proposition, main CTAs, and selling points should remain visible by default. If a visitor has to click to understand what you offer, you have a UX issue even before an SEO problem.

What common mistakes should be absolutely avoided?

Classic mistake: hiding unique and strategic content in multiple tabs. A typical example is a product page with specs in one tab, reviews in another, detailed description in a third. Result: no section dominates semantically, and Google doesn’t know how to position you, leading to diluted content.

Another trap: using AJAX-loaded accordions. If the content only appears after an API fetch triggered by a click, Googlebot might miss it based on JavaScript rendering complexity and crawl timeouts. Even with JavaScript rendering enabled, network latency or 5xx errors on the API side can fail indexing. Always prioritize server-side rendering for indexable content.

How can I verify that my implementation is compliant?

First step: inspect the raw source code (View Source, not the DevTools inspector which shows the DOM post-JavaScript). If your content appears directly in the HTML, you’re good to go. Otherwise, it’s likely loaded via JavaScript and you need to fix that.

Second step: use the Search Console URL testing tool. Analyze the HTML rendering and the Googlebot screenshot. Compare with what a real user sees. If the hidden content is in the rendered HTML but not in the screenshot, that's normal — as long as it's in the code, it’s indexable. If the content appears neither in the HTML nor in the screenshot, it’s not crawled.

• Load all indexable content into the DOM at the initial render — no lazy-loading AJAX for critical sections.
• Expose the main content (hero, value, CTA) as visible by default — only hide secondary sections.
• Use pure CSS patterns or SSR for accordions and tabs, not client-side JavaScript to load content.
• Check Googlebot rendering via Search Console and compare raw HTML with the screenshot.
• Implement Schema.org FAQPage markup if relevant to maximize chances of rich snippets even with accordions.
• Test on mobile — accordions are more common there, but the same rules apply.