Collapsible Content SEO

Collapsible content is page content hidden behind accordions, tabs, or toggles that users expand on demand, usually to save space and improve scannability.

Beginner3 min readUpdated 2026-07-26Reviewed by Lucía Marín

Key takeaways

Collapsible content is safe for SEO when present in HTML on load.
Always keep primary keywords, pricing, and CTAs visible.
Use descriptive labels; avoid 'Click here' or 'More'.
Accessible implementations (native <details> or ARIA) improve both UX and crawlability.
Test with Google Search Console to confirm indexing of hidden content.

When done right, collapsible sections help users scan content while keeping all text crawlable.

Example

Scenario: An e-commerce product page with a 'Specifications' accordion.
HTML structure:

<details>
    <summary>Specifications</summary>
    <ul>
      <li>Weight: 1.2 kg</li>
      <li>Dimensions: 30x20x10 cm</li>
      <li>Material: Aluminum</li>
    </ul>
  </details>

Result: Google crawls and indexes the list items, but the user sees only 'Specifications' until they click.

Quick Start: Implement Collapsible Content for SEO

Keep content in the initial HTML – Do not load hidden text via JavaScript after user click.
Use descriptive labels – 'Shipping Policy', not 'More info'.
Prefer native HTML – Use <details> and <summary> for a simple, semantic accordion.
Add ARIA attributes – For custom implementations, use aria-expanded, aria-controls, and role=button.
Test with Google Search Console – Use URL Inspection to verify hidden text is indexed.
Keep primary content visible – Main keywords, pricing, and CTAs outside the collapsible area.

How to Judge if Collapsible Content Is SEO-Safe

Is the hidden text in the HTML on load? (Source > Expand)
Is the label descriptive enough? Users and Google should know what's inside.
Is the main topic visible without expanding? The page's core value should not be hidden.
Is the implementation accessible? Keyboard navigation and focus states should work.

Common Mistakes

Hiding the page's main keyword theme inside collapsible panels.
Rendering hidden text only after user interaction (e.g., via JavaScript fetch).
Using vague labels like 'More' or 'Details' instead of descriptive headings.
Implementing collapsibles without keyboard access or proper expanded/collapsed semantics.

Next step

FAQ SchemaPair collapsible FAQ sections with FAQ schema for richer search results.

FAQ

Does collapsible content affect SEO?

Google can index collapsible content if it's present in the initial HTML. Content hidden for UX is generally safe, but primary keywords and CTAs should remain visible.

Can Google crawl content inside accordions?

Yes, Google can crawl and index content inside accordions if it's in the DOM on page load. Content loaded dynamically after user interaction may not be crawled.

What is the best way to implement collapsible content for SEO?

Use native HTML <details>/<summary> elements or ARIA attributes. Ensure the content is in the initial HTML, not injected via JavaScript. Keep labels descriptive.

Sources

Google Search Central — Primary source for Google’s crawling, indexing, and content accessibility guidance.
Google Search Central: SEO Link Best Practices — Useful for internal linking and crawlability guidance that supports page structure around collapsible content.
WAI-ARIA Authoring Practices — Authoritative accessibility patterns for accordions and disclosure widgets.

Reviewed by Lucía Marín, Founding editor.