Collapsible Content SEO

I default to the native <details> and <summary> elements for most collapsible content. They work without JavaScript, degrade gracefully in older browsers, and pass accessibility tools without extra effort. The key rule is that the hidden content must be present in the HTML on initial page load. Google's crawler, as stated in their documentation, can index text that is present in the DOM but visually hidden for UX purposes – as long as it was there before any user interaction. I once tested this on an FAQ page for a local tradesman. Each question was a <summary>, the answer a <details> block. I ran a crawl with JavaScript disabled using Screaming Frog and every answer was found and indexed. The page ranked for six long-tail queries within two weeks.

For custom accordions, I use ARIA attributes like aria-expanded and aria-controls, but I still place all panel text in the HTML from the start. Content injected after a click – say, loaded via an API call – is a gamble I do not recommend. I have seen sites where Googlebot never triggered the click event, meaning the collapsed text was invisible to the index. If you must use JavaScript to manage state, at least ensure the content is pre-rendered in the source. I also pair collapsible sections with [structured data](/schema-markup/) where appropriate, especially for FAQ schema, because those rich results can appear directly in search and reduce the need for users to expand panels. One more thing: I keep the visible part of each section tightly coupled to the label. The label itself should be a clear descriptor – not "More" – so both a user and a search engine know what lies beneath. If the label reads "Installation instructions", that is a topical signal for that content. I will typically link to related [JavaScript SEO](/javascript-seo/) resources when working with custom widgets to avoid common pitfalls, and I always audit the overall [technical SEO](/technical-seo/) structure before deploying accordions at scale.

The most common mistake I see is hiding the page's main value proposition inside a collapsible panel. If your core keyword, unique selling point, or primary call to action requires a click to be seen, you are asking for lower conversion rates and weaker topical relevance. I learned this the hard way. A secondary issue is dynamic injection: content that only appears after a user hovers or clicks a button. Googlebot does not trigger hover events and may not fire click handlers, so that content may never be indexed. If you need to use JavaScript to manage state, ensure the text is already in the HTML, simply hidden with CSS until activated.

Vague labels are another trap. A panel titled "Details" gives no contextual signal. Search engines use anchor text and adjacent text to understand the content behind a link or disclosure widget. I recommend writing labels that are self-explanatory, e.g., "Shipping policy and times" instead of "More info". On [mobile SEO](/mobile-seo/), Google has confirmed that content hidden for user experience purposes – like accordions on small screens – can be treated normally, but the implementation still matters. If the hidden content is cut off by a scrollable container with limited height and no clear disclosure, some of it may be considered not accessible and thus less valuable. I also watch for performance impact: many collapsible sections can bloat the initial HTML. Keep the hidden text concise; long paragraphs in a collapsed panel are better moved to a dedicated page. I always check [Core Web Vitals](/core-web-vitals/) after adding accordions, because if the JavaScript handling is heavy, it can delay interactivity.

Early in my career, I was asked to redesign a product landing page for a SaaS tool. The page had a long list of features, pricing tiers, and customer testimonials. Thinking I was being clever with usability, I stuffed the pricing table and three testimonial quotes into accordions. The page looked clean. Conversions dropped by 25% within two weeks. I had hidden the very elements users needed to make a decision before scrolling further. Google still indexed the text – I confirmed that with URL inspection – but the user experience was broken. I reverted the change and restored pricing to a visible section immediately. Conversions recovered.

My second mistake was building a custom accordion component with React that loaded panel content asynchronously from an API. The content was never in the initial HTML. Googlebot saw only empty <div>s. Those panels were effectively invisible to search engines for months until I noticed the pages had dropped out of the index. I switched to server-side rendering the content into the HTML and using JavaScript only to toggle visibility. That fixed the indexing gap. I now run a regular [SEO audit](/seo-audit/) that includes checking for hidden content issues using a crawler. I also keep an eye on [SEO JavaScript](/seo-javascript/) best practices whenever I touch client-side frameworks. If I could go back, I would have kept the page structure flat and only collapsed genuinely supporting content – not the hooks that drive conversions.