Tabs and accordions: does hidden content hurt SEO?

Tabs, accordions, and "read more" toggles keep pages tidy. They also raise an old worry: does Google count text that is hidden until someone clicks? The short answer is yes, usually. The longer answer depends on how the hidden text gets onto the page, and that detail decides whether crawlers and AI engines see it at all.

Why hidden content used to worry people

For years, SEO advice said text hidden by a tab was worth less than visible text. The logic was that if users could not see it, Google would not trust it. That advice came from a desktop-first web.

Google has since said that with mobile-first indexing, content in tabs and accordions is fine when it is part of the page. On small screens, collapsing content is normal design, and Google does not want to punish it. Treat that as current guidance, not a permanent promise. Google can change how it weighs things, so check its documentation if a page depends on this.

The real test: is the text in the HTML?

A crawler does not click. It fetches a page, renders it (in Googlebot's case), and reads what is there. So the question is not whether text is visible. It is whether the text exists in the page without any user action.

There are two common patterns, and they behave very differently.

Pattern one: text is in the page, hidden by CSS or HTML

The full answer sits in the markup. A script or the browser only toggles whether it shows. The HTML details and summary elements work this way. Crawlers can read this text on the first fetch. This is the safe pattern.

Pattern two: text loads after a click

The panel is empty until a user opens it. Then a script fetches the text from an API and inserts it. A crawler that never clicks never triggers that request. The text is not in the rendered page, so it cannot rank and cannot be quoted.

This is the case that actually causes damage. It also hits AI crawlers harder. Many of them fetch raw HTML and skip JavaScript, so even a script that runs on page load may never run for them. Our guide on AI crawlers and JavaScript rendering covers that gap.

How to check your own pages

Do not guess. Check what a crawler can see.

1. Open the page and view the source (not the inspected DOM). Search for a sentence that lives inside a collapsed panel. If it is there, you are in pattern one.
2. If it is missing from the source, check the rendered HTML. In Search Console, run the URL Inspection tool and view the crawled page. If the text shows there, Google can see it.
3. Turn off JavaScript in your browser and reload. Whatever is missing is also likely missing for crawlers that do not render.
4. Open each panel in a fresh session while watching the network tab. If opening it fires a new request for the text, you are in pattern two.

What to do with accordions and tabs

• Put the full text in the initial HTML. Hide it with CSS or the details element, not with a fetch on click.
• Use real headings or summary text for each panel. A clear label tells crawlers what the section covers, just like an h2 would.
• Keep key content visible. The main answer to the page's core query should not sit behind a click. Hide supporting detail, such as extra specs or long FAQs.
• Make panels keyboard accessible. Native elements like details do this for free. Custom divs with click handlers often do not.
• Do not split one topic across tabs on separate URLs unless each URL stands on its own. Tab content that only exists on a fragment (the part after a hash) is not indexed as its own page.

Tabs and AI answers

AI engines pull short chunks of text from a page. If a useful definition or comparison is hidden but present in the HTML, it can still be retrieved. If it is injected on click, it is gone. We do not have solid public data on how each AI crawler treats collapsed text that is in the markup, so assume nothing beyond what the raw HTML shows.

A related point: very long accordions can bury a page's structure. A page with twenty collapsed panels and no visible text gives a crawler little to anchor on. Keep some plain, visible paragraphs around them.

A takeaway you can act on

Pick one page that uses tabs or accordions. View its source and search for a sentence inside a collapsed panel. If it is there, you are fine. If it is not, move that text into the initial HTML and hide it with CSS or the details element. Then re-inspect the URL in Search Console to confirm Google sees it.