Collapsible and Hidden Content SEO Best Practices

Accordion, tabbed content, and other collapsible text blocks are practical solutions for web designers looking to strike a balance between including lots of content and maintaining a clean design. Tabs and website accordions make it easy to package pieces of information into tidy, unobtrusive compartments, empowering users to choose what information matters most to them.

In this blog, we will cover how Google deals with accordion content, the history of SEO and hidden content, and how to implement SEO-friendly tabbed content on your site.

Collapsible Content, SEO, and You

Also known as expandable content, websites often use accordions or tabs to hide copy or images until the user proactively selects the accordion heading, icon, or another control point. Categorically, both types of collapsible content are sometimes referred to as hidden content. SEOs spend a lot of time tracking how well search engines can find, understand, and rank content in tabs or accordions.

What Is an Accordion on Websites?

In web development, an accordion is a popular design element that effectively hides content from users until they choose to view it. These web design features effectively package an outsized amount of text without overwhelming the user with long blocks of dense copy.

In most cases, the hidden content is accessed via a mouse click or a keystroke, thereby categorizing it as a responsive design element.

What Is Tabbed Content?

Tabbed content looks and functions like an accordion but typically has a slightly different animation. Instead of a nested, expandable section of text, tabs normally serve different information in the same area of the page. Tabbed, accordion – the terms refer to two different ways to achieve the same purpose, which is to hide and serve content based on a user interaction.

Tabbed and Accordion Website Examples

Using Interactive accordions and tabs on websites is very common, especially on pages that need to serve a lot of information efficiently, such as:

• Service menus
• Frequently asked question pages or sections
• Explainer content

 Here are a few examples of websites that rely on tabs or accordions to prevent overwhelming users with massive blocks of text.

This example of tabbed content allows users to select the type of insulation and view relevant information about each offering in the right-hand column of the page without scrolling.

This website accordion example includes an index of questions (left column) and a corresponding blog post with expandable accordion text blocks providing more information.

Think of accordion and tabbed content as a clothes dresser. It neatly compartmentalizes specific categories of content (underwear in the top drawer,  pantalones one drawer down, etc.) and keeps everything out of view until you need it.

The Big Question: Does Google Crawl Accordion Content?

There has been a lot of recent discussion online about accordion content, SEO, and large language models (LLMs).

Officially, Google has reiterated time and time again that its crawlers can see hidden content on pages. However, digital marketers have reason to suspect that tabbed and accordion content may not be treated the same as always-visible text. One intrepid tester found that Google didn’t rank a page for keywords “hidden” in accordions built using JavaScript and CSS as highly as it did for keywords in visible text.

Oneupweb has conducted similar studies by removing content accordions from client websites (and our own) and publishing the exact same content on the page; in nearly every case, the domain gained rank for keywords after the accordions were removed, or improved position if the domain already held that keyword.

The Tabbed Content and Accordion SEO Impact

That study was conducted in 2017, and while things have changed since then, it’s worth noting that Google’s position on hidden text dates to 2013. More anecdotal findings, including those by Oneupweb’s intrepid SEOs, lean toward a middle ground: Google can probably see JavaScript accordion content like they say they can – and their AI crawler can render JavaScript too. However, the search engine may give that content less weight in SERP rankings.

The debate on accordion content, SEO, and hidden content is over a decade old, and there is no sign of a definitive answer.

Does Having Content in a Hidden Tab Hurt SEO?

Considering search engines’ official position and documentation, industry research on the topic, and our own hard-learned findings, we believe accordions don’t hurt SEO for traditional search engines if they are:

• Built correctly
• Don’t hide the page’s most valuable keywords

Always move the page’s most valuable keyword targets and information into the HTML text that is always visible on the page, outside of accordion panels. Then you can use content in tabs to cover the details.

Can AI Crawl Accordions and Hidden Content?

Other than Google’s bot. LLMs like GPT-4 and DeepSeek cannot access content that’s rendered by JavaScript (and hidden content in tabs is almost always rendered that way). If you’re prioritizing SEO (or its now-trendy cousin, generative engine optimization) and want your brand to be as visible as possible in AI tools’ citations, keep your most important written content in basic HTML.   

The History and Evolution of SEO, Accordions, and Other Hidden Content

Hidden content, like the Force, can be used for the Dark Side (black-hat SEO) or the Light Side (white-hat SEO). In the ’90s and early ’00s, developers would “hide” large lists of valuable keywords on strategic pages to trick search engines like Google into assigning them top-ranking positions. Officially, this “hidden text” gambit no longer works, and search engines actively punish egregious keyword stuffing anyway. Still, Google’s crusade against hidden content has influenced how SEOs create content, and most (*raises hand*) believe there is a lingering sensitivity toward hidden content from Google and their ilk.

Fortunately, there are more SEO- and user-friendly ways to use hidden text, though a little customization might be needed.

Accordion Best Practices for SEO and UI

The accordion user interface (UI) has three main components, outlined below with best practices. While they may look straightforward, each component affects how users access the hidden information and how much priority search engines assign to the content.

• Accordion Headers: Headers are the always-visible text that describes the content “hidden” in the panels beneath. These should be brief while setting clear expectations; life might be like a box of chocolates, but users should know exactly what they’re going to get on your website.
• Accordion Icons: Small icons are useful for communicating either the category of the hidden content or a signal of “There’s more here!” You’ll often find a “+” icon on the page element that the user clicks to expand the accordion panel. Other generally accepted options are the caret or the down arrow. The right-facing arrow has fallen out of style for accordions, as it typically indicates a link to another page.
• Accordion Panels: Panels are the expandable, hidden blocks of text accessed by click or keystroke. While they should provide useful information, such as answering questions in an FAQ block, accordion panel content should be relatively brief. They often contain short paragraphs or bulleted lists.

Getting these three main components to look and function correctly is half the battle. The other half uses JavaScript or CSS correctly, which we’ve also laid out in this article.

Using Accordions on Different CMS Platforms

Content management platforms like Squarespace and WordPress make it easy to implement pre-built accordion content blocks.

• Squarespace Collapsible Text – Also referred to as collapsible sections, Squarespace added its take on accordions in 2022.
• WordPress Accordion Plugins – There are several excellent accordion content plugins on WordPress, and we’ve used a few on client websites that didn’t require much customization.

There’s almost certainly a pre-cooked accordion tool on your CMS of choice – but hold up! It’s never that easy, is it?

Tabbed Content, Accordions, and Accessibility

There is another curveball here. In addition to being practically invisible to AI crawlers, many accordions are not perceivable by screen readers, which are used by visually impaired individuals and more. Web accessibility remains an area overlooked by too many developers (but not Oneupweb), especially by teams building pages with pre-built templates or blocks.

Luckily, developers can resolve this issue by changing their accordion’s ARIA attributes.

ARIA Controls for Accordions

The <aria-label> attribute provides a small snippet of code for interactive elements of a page, and screen readers can use this to discover the content.

Building Accordions in JavaScript

To screen readers, the ARIA properties signal the presence of tabbed or accordion content. ARIA, which stands for “accessible rich internet applications,” can be toggled into two settings:

• <aria-hidden>
• <aria-expanded>

Most pre-built accordion blocks are built with the ‘hidden’ label. This keeps both the content and the underlying code from being perceivable to users and screen readers.

Instead, developers can give the ARIA section of the accordion code a different set of instructions. They start by adding a unique <id> to each expandable section (usually the panel) and assign the ARIA property to control its visibility. Then, they add the desired setting, <expanded>. The code is capped off with a signal that tells screen readers that the content is here and expanded.

Implementing these instructions improves accessibility. Google and other search engines don’t officially look for ARIA as a ranking signal, but there’s evidence that it may play some role, at least under the radar.

The full, expandable panel code looks like this:

Can I Build a CSS Accordion Without JavaScript?

Experienced developers can create hidden content using only CSS, but it is tricky. While some developers have packaged up snippets of code to get you started, it’s still a lot of detailed work to bring the perfect on-page experience to life. If you’re heading down this road, make sure you get in touch.

The Accordion Plays On … Let’s Jam

Built right, accordions and tabbed content are useful web design elements that provide a predictable, intuitive user experience. While they may not be the best place to stash your most important keywords, they’re still crawlable by search engines. With a little love, and code, they can also help you deliver an inclusive experience to visually impaired users. We’re here to make accordions and hidden content work for you; reach out to Oneupweb, or call 231-922-9977 to get started.