Do accordions really hurt your SEO, or is it just an old myth?

Why is Google clarifying this now?

Accordions and tabs have become ubiquitous in modern web design, especially on mobile. Yet an old SEO belief persists: hiding content must somehow be suspicious to Google.

Gary Illyes's statement puts this ambiguity to rest. Since 2014, Googlebot interprets JavaScript and accesses content that is initially hidden. The old distinction between visible and hidden content no longer has technical relevance.

What's the difference between this and cloaking or malicious hidden text?

Cloaking means serving different content to bots and users. Techniques involving fraudulent hidden text (font-size:0, white text on white background) are designed to manipulate rankings.

Accordions, on the other hand, improve user experience. The content remains accessible with a single click — there's no intent to deceive. Google has made this distinction for a long time.

How exactly does Google treat collapsed content?

The crawler explores the complete DOM after JavaScript execution. Any element present in the final HTML, even if initially hidden by CSS or JS, is indexable and weighted normally.

No devaluation, no specific filters. Content under an accordion counts just as much as a standard paragraph for understanding the page's theme.

• Accordion content is fully indexed since 2014
• No negative ranking impact from this UX structure
• The distinction is made on intent: UX improvement vs manipulation
• JavaScript is executed, the final DOM is analyzed
• Appropriate semantic markup remains recommended

Does this statement actually reflect what we see in practice?

Yes, but with important nuances. Practical tests confirm that Google does index accordion content. Featured snippets regularly pull from these collapsed sections, proving that content is fully considered.

However — and Gary Illyes remains silent on this point — the actual weighting of this content compared to immediately visible content remains debated. Some audits show performance variations depending on structure. [Needs verification] on your own sites with rigorous A/B testing.

What are the practical limits of this rule?

The statement applies to standard HTML/CSS/JS accordions. It doesn't explicitly cover edge cases: 4-level nested accordions, content loaded via late AJAX, complex progressive loading.

For mobile-first indexing, one crucial point: if your mobile content uses accordions but the desktop version displays it fully, it's the mobile version that matters. Ensure your mobile accordions are technically crawlable.

Should you systematize accordions everywhere?

No. Just because Google doesn't apply a negative filter doesn't mean you should turn every page into a series of closed accordions. UX comes first — and a page with 15 closed accordions by default creates a poor experience.

Behavioral signals (bounce rate, time on page, interactions) indirectly influence SEO. A page that frustrates users with too many accordions will lose performance, even if technically the content is indexed.

What should you check on your existing pages?

Test rendering from Google's perspective. Use the URL inspection tool in Search Console and examine the rendered HTML. Does your accordion content appear in the final DOM?

Also check rendering time. If JavaScript takes more than 5 seconds to execute, Googlebot might not wait. Optimize JS loading to ensure fast and complete rendering.

How should you structure accordions for optimal SEO?

Use semantic HTML5 tags: <details> and <summary> work natively without JS. Google understands them perfectly. If you use custom divs with scripts, ensure the content remains in the initial HTML, not loaded via AJAX after clicking.

Structure with appropriate headings (h2, h3) inside accordions. Google uses the heading hierarchy to understand the relative importance of sections, accordions or not.

What critical mistakes should you avoid?

Don't load accordion content only on first user click via AJAX requests. Google may not trigger these events during crawling. Content must be present in the initial HTML, even if hidden by CSS.

Avoid poorly configured JS frameworks that make content inaccessible without interaction. Systematically test with JavaScript disabled: if content disappears completely, that's a red flag.

• Inspect your pages via the Search Console tool to verify rendering
• Prefer <details>/<summary> or lightweight JavaScript solutions
• Keep content in the initial HTML, not loaded via post-click AJAX
• Maintain consistent heading hierarchy within accordions
• Optimize JavaScript execution speed (crawl budget)
• Test mobile-first behavior specifically
• Balance UX and accordion quantity — not 20 per page