How to ensure your WordPress site’s accordions are crawlable

Accordion modules are a popular way to organize content in WordPress—especially when using page builders like Divi. However, if implemented incorrectly, they can unintentionally hide important content from search engines and AI crawlers. The good news: in most cases, your content is still indexed. The key is understanding when you need to take action—and when you don’t.

Issue Background

Accordions are commonly used to improve UX by condensing long sections of content into expandable panels. While this is great for usability, it raises an important SEO concern: can search engines crawl hidden content inside accordions?

The short answer is yes—most of the time.

Modern search engines like Google can render JavaScript and typically index content inside accordions, even if it’s hidden on load. However, certain implementations—especially those relying heavily on display: none—can still create uncertainty or reduce the perceived importance of that content.

Diagnosis

The core issue comes down to how accordion content is handled in the DOM:

• If content is removed from the DOM entirely, it will not be indexed.
• If content is present but hidden with display: none, it is usually indexed—but may carry less SEO weight.
• If content remains visible in the DOM (even if visually collapsed), it is most reliably crawlable.

Many page builders, including Divi, use JavaScript and display: none by default. This means users often don’t have direct control over how the accordion is rendered.

Resolution Steps

1. Start with content strategy (most important)

If you’re using Divi or another page builder, the most practical step is deciding what content should be inside an accordion.

• Keep primary keywords and critical SEO content visible on page load
• Use accordions for FAQs, supporting details, or secondary content

This ensures your most important content is always clearly indexed.

2. Don’t assume there’s a problem

In most cases, accordion content is still indexed correctly. Before making changes, verify whether there is actually an issue.

• Use Google Search Console → URL Inspection
• Click “View Crawled Page”
• Confirm your accordion content appears in the rendered HTML

If the content is visible there, you’re likely in good shape.

3. Understand limitations of Divi and page builders

With tools like Divi, you typically cannot control whether display: none is used without customization. This means:

• You don’t need to modify anything for standard use cases
• Advanced SEO control requires custom code

4. Optional: override accordion behavior (advanced)

If you need maximum SEO control (for example, on highly competitive pages), you can override how accordion content is hidden.

Example CSS approach:

.accordion-content {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.accordion-active .accordion-content {
  visibility: visible;
  height: auto;
}

This keeps content in the DOM while still providing a collapsed UI.

If implementing CSS changes, add them via the WordPress Customizer (Appearance → Customize → Additional CSS), Divi Theme Options, or a child theme stylesheet.

5. Consider alternative layouts

If SEO is a top priority, you can also avoid accordions entirely for critical sections:

• Use standard text modules
• Use toggle or tab modules (depending on implementation)
• Break content into structured sections instead of collapsing it

6. Verify technical settings

Make sure nothing else is blocking indexing:

• No noindex tags on the page
• Robots.txt does not block important assets
• JavaScript and CSS files are accessible to crawlers

7. Monitor and iterate

• Re-test pages after changes
• Monitor indexing in Google Search Console
• Watch for crawl or rendering issues

Final Outcome

Accordion content in WordPress—especially when using Divi—is usually crawlable without any changes. The biggest impact comes from how you structure your content, not from the accordion itself.

For most sites, the best approach is simple: keep important content visible and use accordions strategically. For advanced SEO needs, custom overrides can provide additional control when implemented correctly.

If you need help evaluating your accordion setup or optimizing your WordPress SEO, contact Freshy for expert support.