Accordion SEO: 2026 Guide to Hidden Content

Administrator in Search Engine Optimization Oct 20 / 1 week ago

Here is a fictional example. A small shop in Manchester, UK sells kettles and toasters online, and every product page has three tabs called Overview, Specs and Delivery. The Overview text sits in the page from the first load, but the Specs text comes from the server only when a shopper clicks that tab. Shoppers never notice the delay, but Google's own guide says it won't load content that needs a click, a swipe or typing to load, so the wattage, size and cable length on that tab never reach Google at all. That is the real story behind hidden content in 2026. Folding text away is not the problem, but leaving it out of the page until someone clicks is the problem this guide helps you fix.

Does Google index hidden content in tabs and accordions?

Yes, as long as the text is in the page when it loads. Google's spam policies say that accordions and tabs that toggle between hiding and showing text do not break its rules, and Google uses the rendered HTML of a page to index it, so text in that HTML can be indexed while its panel is closed.

Google's current documents do not describe any discount for text inside a closed panel. What the documents do describe is a hard limit on text that is not in the page at all, and that limit, not the open or closed state, decides what Google can see.

What do Google's spam policies say about hiding text?

Google defines hidden text abuse as placing content on a page only to manipulate search engines, in a way that visitors cannot easily see. Its examples include white text on a white background, text behind an image, text pushed off screen with CSS, and a font size or opacity of zero.

The full list sits in Google's spam policies for web search, under hidden text and link abuse. Right after that list, Google says that accordion or tabbed content, slideshows, tooltips and text meant only for screen readers do not violate its policies, because they show and hide content to improve the experience. Google finds policy breaks with automated systems and, when needed, human review that can lead to a manual action, and sites that break the rules may rank lower or drop out of results. If a warning has already landed, our manual actions recovery guide walks through the fix.

Why does mobile-first indexing favor folding text over cutting it?

Google indexes and ranks the mobile version of a page. Its guide says the mobile page should hold the same content as the desktop page, and it suggests moving content into accordions or tabs instead of removing it. If the mobile page has less content, Google says to expect some traffic loss.

The mobile site and mobile-first indexing best practices page says you can use a different design on mobile, such as content in tabs or accordions, as long as the content matches the desktop version, and it asks for the same clear headings on both versions. Because indexing comes from the mobile page, anything you drop on small screens disappears from Google's view. Our mobile-first indexing guide covers the rest of the mobile checklist.

Where is the line between folded text and missing text?

The line is whether the words exist in the page when it loads. A closed panel whose text is already in the HTML is folded, while a panel that stays empty until a click asks the server for its text is missing. Google can index the first kind, and its own guide says it will not load the second.

Think of two drawers: in one the socks are inside and the drawer is shut, while in the other the drawer is empty and a clerk fetches socks when you pull the handle. A visitor gets the same result from both, but a crawler that never pulls handles finds socks in only one of them. Google's mobile guide says not to lazy-load primary content upon user interaction, because Google won't load content that requires swiping, clicking or typing to load. Our take: treat that sentence as the core rule of hidden content, and judge every accordion, panel and read more button against it.

Is content that loads on click invisible to Google?

In practice, yes. Google says it won't load content that needs a click, a swipe or typing to load. If a panel calls the server only when a visitor opens it, that text is not in the rendered HTML that Google uses to index the page. Load more buttons work the same way.

Google renders pages with a headless version of Chromium, runs their JavaScript, and then uses the rendered output to index the page. Text that a script adds while the page loads can make it into that output, but text that waits for a click cannot, because Google does not click. Our JavaScript SEO rendering guide explains the full crawl, render and index flow, and our lazy loading SEO guide covers loading on scroll. Click-to-load panels also hide links, because Google can only find links that are real link elements with an href, so a link inside a panel that never loaded is not discovered from that page.

Which hidden content patterns are safe, and which are not?

Patterns that keep their text in the HTML at load are safe for Google. Patterns that fetch text only after a click are not seen by Google. Text added by JavaScript sits in between, since Google renders it but the AI crawlers in a December 2024 Vercel and MERJ study did not.

The table is based on Google's spam policies, its mobile-first indexing and JavaScript SEO documentation, and a December 2024 Vercel and MERJ crawler study. Read the JavaScript row with care, because Google renders pages and can index script-added text that shows up in its rendered output, while the OpenAI, Anthropic and Perplexity crawlers in that study did not render JavaScript at all. The two click rows are the ones to fix first, and our product page SEO guide shows where specifications belong.

Can AI crawlers read text inside an accordion?

Often, yes, if the text is in the HTML the server sends. A December 2024 study by Vercel and MERJ found that the major AI crawlers from OpenAI, Anthropic, Meta, ByteDance and Perplexity did not render JavaScript. Content in the initial HTML response may still be read, but text that scripts add later was out of their reach.

The study covered nextjs.org, the Vercel network and two job board websites. Crawlers that did not render JavaScript included OpenAI's OAI-SearchBot, ChatGPT-User and GPTBot, Anthropic's ClaudeBot, Meta-ExternalAgent, ByteDance's Bytespider, PerplexityBot and Common Crawl's CCBot, while Gemini, which uses Googlebot's infrastructure, and AppleBot did render. You can read the full Vercel and MERJ report on AI crawlers, and keep in mind that its findings may have changed since publication.

Consider a fictional SaaS company in Austin, Texas that runs its help docs as a single-page app that loads each article body with JavaScript after a thin page shell arrives. Google can render those pages, but the non-rendering crawlers in the Vercel study would see the shell and little else. Our take: if you want AI tools to read your documentation, put the main text in the server response through server-side rendering or pre-rendering, which Google's JavaScript guide also calls a great idea, partly because not all bots can run JavaScript. Our SaaS SEO playbook, our AI crawlers and robots.txt guide and our guide to ranking in AI search cover the wider plan.

How do you build an accordion that works for search and screen readers?

Good accordion SEO starts with every panel's text in the HTML and a real button for each header. The W3C accordion pattern places each header button inside a heading, sets aria-expanded to true or false, and points aria-controls at its panel. Pressing Enter or Space should open and close the panel.

Wrapping each header in a real heading helps the page outline too, as our heading tags guide explains. Our take: the native details and summary pair is the simplest way to build a fold, because the text ships in the HTML, and a server-rendered accordion following the W3C pattern suits teams that need more control. Another option is the hidden attribute set to until-found, which MDN says keeps content hidden but lets Find in page and fragment links reveal it, firing a beforematch event. We make no claim about how Google treats it. Our web accessibility SEO guide covers the wider picture.

Should read more buttons and long specs stay folded?

Our take: fold secondary detail such as full specifications, shipping terms and long FAQ lists, and keep the content most visitors need open by default. Never hide the one paragraph that answers the main query of the page. A read more button is fine when the full text is already in the HTML.

Take a fictional fashion store in Cork, Ireland, whose category pages carry a long buying guide under a read more link, with the full text in the page and clipped by CSS. That works, but moving the guide behind a button that fetches it would take it out of Google's view. Our ecommerce category page SEO guide covers what belongs at the top, and our FAQ schema guide for 2026 covers the code side of question lists.

How should a Munich law firm set up practice area tabs?

Put all practice area text in the HTML and let the tabs only switch what is shown. Give each panel a clear heading, and keep the summary of each practice easy to reach. In our view, a major service may deserve its own page rather than a tab.

In this fictional example, a law firm in Munich serves clients in German and English, with tabs for employment, tenancy and company law on one services page. Its developer built them so that only the first panel is in the HTML and the other two load from the server on a click, which means Google sees the employment law panel but not the other two. The fix is a template change: output all three panels in the HTML, let the tabs switch the view, and give each panel its own heading. Our law firm SEO guide covers legal service pages in depth.

Which checks belong in a site-wide audit of folded panels?

Start with the templates that use tabs, accordions or read more links, then check one page from each. Compare the page source with the rendered HTML in the URL Inspection tool. If text from a closed panel is missing from the rendered HTML, Google cannot index it, so fix that template first.

The fictional Manchester shop from the opening worked through this hidden content audit one template at a time.

• Every panel has its text in the page source or in the rendered HTML.
• No panel calls the server for its main text when a visitor opens it.
• Items behind a load more button can also be reached through plain links.
• Each header is a real button inside a heading, with aria-expanded set.
• The answer to the main query of the page sits outside any closed panel.
• The mobile and desktop pages carry the same text and the same headings.

The shop moved its specs into the HTML and kept the panel closed, so the design stayed the same. Our technical SEO audit process shows how to fold these checks into a wider crawl, and our Google Search Console guide covers the URL Inspection tool in more detail.

What should a shop in Seoul check before it folds content away?

The rule does not change by country, so a shop in Seoul, South Korea that sells to the US, Europe and Korea should ship every panel's text in the HTML for Google, in each language it offers. For Naver, plan separate research, because none of our sources here cover how Naver treats folded text.

In this fictional example, a stationery shop in Seoul sells planners and pens to shoppers at home and abroad, and its product pages use tabs for paper type, sizes and shipping, with every panel's text in the HTML in both Korean and English. Our take: test the Korean panels as well as the English ones, since a template can ship one language in the HTML and fetch the other on a click. Our Naver SEO guide for Korea covers that engine on its own terms.

For a test you can run today, open one of your pages, view the page source, and search for one sentence from a closed tab.

Frequently asked questions about hidden content

Is folded text the same as cloaking?

No. Google defines cloaking as showing different content to users and to search engines in order to manipulate rankings and mislead users. A closed accordion shows the same text to both, one click away. Google's spam policies list accordions among the design elements that do not break its rules, so trouble starts only when text is meant for crawlers and never for people.

Are sliders and tooltips treated the same way as tabs?

Google's spam policies group them together. Its list of design elements that do not violate the policies names slideshows or sliders that cycle between images or text, and tooltips that show more content when users interact with an element. If the slide or tooltip text is in the HTML at load, a crawler can find it, but Google won't load it if it needs an interaction to load.

Can I hide text that only screen reader users hear?

Yes, when the goal is to help those users. Google's spam policies list text that is only accessible to screen readers, and that is meant to improve their experience, as an allowed pattern. Do not use the trick to pack keywords into a page, which is what the hidden text policy targets, and our keyword density guide covers that side. Our take: if a sighted visitor would find the text odd, remove it.

Does Find in page reach text inside a closed panel?

It depends on how the panel hides its text. MDN says the hidden attribute set to until-found keeps content hidden but reachable through Find in page and through fragment navigation, which reveal it. MDN also notes that this fails if the element is set to display none. For other closed panels, test it in the browsers your visitors use before you rely on it.

How many accordion panels can use the region role?

The W3C ARIA Authoring Practices Guide says the region role is optional for each panel, and it advises against it when more than about 6 panels can be expanded at the same time. The guide also notes that the role is especially helpful when panels contain headings or a nested accordion. For a long FAQ with a dozen panels that can all be open at once, leave the role off.

Will URL Inspection show text from a closed tab?

It shows the rendered HTML, and that is where you look. Google's JavaScript guide says to use the URL Inspection tool or the Rich Results Test and check the rendered HTML to confirm Google can see your content. If the closed tab's text appears there, Google can index it, and if it is missing, the panel is likely fetched on click.

Do load more buttons follow the same rule?

Yes. A load more button that fetches the next set of items only on a click keeps those items from Google, because Google won't load content that needs a click to load. The links inside those items are not discovered from that page either, since Google finds links only in link elements with an href. Our take: give every item a plain path too, and our pagination SEO guide shows common setups.

Should the main answer ever sit inside a closed accordion?

Our take: no. The paragraph that answers the main query of the page should be open when the page loads. Google can still index text in a closed panel, so this is not about crawling. It is about the visitor who lands from search and wants the answer at once, which is why hidden content should hold detail, never the core answer.