Tabs and Accordions SEO Setup in Webstudio

Properly Setting Up Tabs and Accordions for SEO

Tabs and accordions are useful when you want to organize content without making a page feel too long. They help users scan information faster, especially for FAQs, pricing sections, service details, and comparison blocks.

But there’s one small setup detail that matters: the hidden content should still exist in the DOM.

If tab or accordion content is only rendered when the user opens it, search engines may not be able to access all of the content on the page. Google can render JavaScript, but content that depends on user interaction can still be missed if it is not available in the rendered page. Google’s own guidance notes that content should be accessible and indexable, and that accordions or tabbed content used for user experience are acceptable when handled properly (Google Search Central, Google lazy-loading guidance).

The goal is simple: keep the content in the DOM, but hide inactive content visually.

The Fix for Radix Tabs in Webstudio

For Radix Tabs, select the Tab Content element.

Add this property:

forceMount = true

Radix supports forceMount on Tabs Content, which forces the tab panel to stay mounted even when it is inactive (Radix Tabs docs).

After that, go to the Inactive state of the same Tab Content element and set:

display: none;

This gives you the best of both sides:

The tab content remains rendered in the DOM.

Inactive tabs are still hidden visually.

The tabs continue to behave normally for users.

Search engines can still access the content.

Applying the Same Setup to Accordions

The same idea works for Radix Accordions.

Select the Accordion Content element and add:

forceMount = true

Radix also supports forceMount on Accordion Content (Radix Accordion docs).

Then go to the Closed state and set:

display: none;

This keeps the accordion content mounted in the DOM while still hiding closed items visually.

Why This Matters

This setup is especially helpful for FAQ sections, service descriptions, pricing details, and any content that may support SEO.

Without forceMount, inactive or closed content may not exist in the DOM until the user clicks it.

With forceMount, the content is already there.

With display: none on the inactive or closed state, the component still behaves the way users expect.

Credit

This setup was shared by Vinh from the Webstudio Discord, who pointed out the correct approach: use forceMount = true to keep the content rendered, then control visibility through the component state.

Quick Rule

For any tab-style component:

Use forceMount = true to keep content rendered.

Use the inactive or closed state to visually hide content.

Do not hide the base/default state.

That keeps the component clean for users and better structured for search engines.