Are mobile and desktop accordions really neutral for SEO?

Why is Google changing its stance on hidden content?

For years, hidden content was viewed with suspicion by Google. Hiding text in accordions, tabs, or collapsible sections was considered a borderline technique - a way to stuff keywords without polluting user experience.

The Mobile-First Indexing has reshuffled the cards. Since Google now primarily crawls the mobile version of a site, and screen space is limited on mobile, hiding content in accordions has become a legitimate UX practice. Google has acknowledged that hidden content in interactive elements is indexed and treated like any other visible text.

What does this mean for indexing?

Before Mobile-First, hidden content on desktop could be devalued or ignored. Today, if your site is on Mobile-First Indexing — which is the case for nearly all sites — Google primarily reads your mobile version. If your accordion is present and technically accessible in the DOM, the text it contains is indexed.

This means that a long editorial content divided into collapsible sections won’t be penalized. Google's crawler executes JavaScript, virtually unfolds accordions, and indexes the text. There's no need to display everything at once to satisfy the bot.

Are there technical conditions to meet?

Yes. Google indexes hidden content only if this content is present in the HTML or loaded in an accessible manner to the bot. If your accordion loads text via AJAX upon clicking, ensure that Googlebot can trigger the event or that the content is prerendered server-side.

Semantic tags also play a role. Using <details> and <summary> HTML5 or correct ARIA attributes helps Google understand that content is intentionally hidden for UX reasons, not to manipulate rankings.

• The content in an accordion is indexed like regular visible content if Mobile-First Indexing is active.
• The technical implementation must allow Googlebot to access the hidden text (present in the DOM or prerendered).
• HTML5 semantic tags (<details>, <summary>) or ARIA enhance clarity of the UX intention.
• Hidden content on desktop no longer impacts indexing since the move to Mobile-First.
• Google executes JavaScript and can virtually “unfold” accordions to extract text.

Does this statement align with on-the-ground observations?

Yes and no. Tests show that Google indeed indexes the content of properly implemented accordions. We see pages ranking for queries where keywords are only present in collapsible sections. This aligns with the Mobile-First logic: hiding content for mobile clarity has become the norm.

However — and this is where it gets tricky — the semantic weight of hidden content remains unclear. Google claims to index it, but indexing doesn't mean giving it the same weight as immediately visible content. Several SEO studies [To be verified] suggest that text displayed at the top of the page, requiring no interaction, might receive a slight relevance advantage over content buried in an accordion. Google has never explicitly confirmed this.

When does this rule not apply?

If your site is not yet on Mobile-First Indexing — rare, but it still exists for very old or technically problematic sites — Google first crawls the desktop version. In this case, hiding content on desktop may still pose a problem.

Another case: poorly structured JavaScript accordions. If the content is not in the initial DOM and AJAX loading fails for Googlebot, the text will never be seen. Always test the URL inspection tool in Search Console to see what Google actually renders.

What is the difference between accordion and tab?

Tabs present a more subtle problem. If you have 5 tabs and only the first is displayed by default, the other 4 are technically present in the DOM but hidden. Google indexes them, but their perceived hierarchy may be lower: the content of the first tab could be interpreted as more priority.

Practically? If you have critical content — target keywords, main arguments — don’t hide it in the 3rd tab. Place it at the top, visible by default. Tabs are for segmenting secondary information or technical details. Accordions, on the other hand, are more neutral if the content unfolds vertically.

What should I do if I use accordions?

Check that your technical implementation is crawlable. Use the URL inspection tool in Search Console: ask Google to render the page, then check the rendered HTML. The text of your accordions should appear in the source code returned by the bot.

If you use modern JavaScript (React, Vue, Angular), ensure that SSR (Server-Side Rendering) or prerendering is enabled. Otherwise, Googlebot will have to execute all the JS to see your content, which adds latency and can be problematic if the crawl budget is tight.

What mistakes to avoid with accordions?

Don't hide your entire main content in accordions. If a product page only shows the title and a 'See description' button, you're taking a risk. Google will index the text, but the UX is so degraded that the bounce rate will explode — and Google captures this through behavioral signals.

Avoid excessively nested accordions. Three levels deep is already pushing it. The more you bury content, the harder it becomes for both the bot and the user. Important content should remain accessible within a maximum of one click.

How to check that my accordions are indexed correctly?

Run a Google search with site:yoursite.com "unique excerpt of text present in the accordion". If the page appears and the excerpt is shown in results, that’s a good sign. Otherwise, inspect the raw source code (Ctrl+U): if the text isn’t there, Googlebot will need to execute the JS — which works, but with a slight delay.

Another test: use a tool like Screaming Frog in “JavaScript rendering” mode to crawl your site. Compare the content retrieved with and without JS enabled. If large portions of text disappear without JS, your implementation is fragile.

• Inspect every page template using accordions with the Search Console rendering tool.
• Check that hidden content is present in the initial DOM or loaded in an accessible manner to the bot.
• Use HTML5 semantic tags (<details>, <summary>) or correct ARIA attributes.
• Never hide the entirety of a page's main content in accordions — keep at least one visible lead.
• Test indexing with site: queries targeting text excerpts present only in the accordions.
• Crawl the site with Screaming Frog in JavaScript mode to detect content invisible without JS rendering.