October 22, 2020 | By: Tony Mastri

Collapsible Content SEO – Click to Expand, Tabs, & Accordions

Hidden content has been on Google’s radar since the beginning, and it continues to be a high-visibility theme within the SEO community. Today, the conversation surrounding hidden content has moved past blatant shady SEO techniques to thoughtful user experience questions about how click-to-expand buttons, accordions, tabs and SEO work.

The “Wild West” days of SEO when marketers would use CSS to hide keyword-optimized content on their pages has come to an end (thanks to the Panda algorithm update in 2011), but mobile-first indexing has raised new questions.

How does collapsible content affect SEO in a mobile-first world?

What Is Collapsible Content in SEO?

Collapsed content is content that is hidden by tabs, accordions, click-to-expand buttons, or display:none styling. Google began its mobile-first indexing push in July 2019, meaning that websites are indexed based on their mobile user experience (UX). Collapsible content is a valuable and expected part of mobile UX, which has prompted SEO professionals to wonder how this functionality affects search rankings.

Accordion SEO Example

accordion SEO

SEO for accordions generally involves one or more text headings with a +/- button used to expand or hide different questions. Accordions are a popular way to display frequently asked questions lists on both desktop and mobile to make it easier for users to quickly find their question and answer from a long list of concerns.

Tabbed Content SEO Example

tabbed content SEO

Tabs and SEO involve a text box with set dimensions that will display different content based on which tab is active. The main question that the SEO community has about this functionality is whether the default open tab is weighted more than the tabs that are hidden when the page loads.

Click-to-Expand SEO Example

click-to-expand SEO

Click-to-expand buttons are frequently used to measure a user’s interest in page content. This functionality is very popular for large publishers wanting to measure how far readers make it down a page by forcing them to click a button to reveal more text.

Search Engine Optimization professionals have been left to wonder whether the hidden text is valued as much as the copy that is automatically visible.

Display:None; Google SEO Example

Display:none is a property/value rule set in CSS that can be used to hide any HTML element on a page. By combining the display property with JavaScript, website developers can create any of the functionality above (accordions, tabs, click-to-expand) to show or hide selections of content from users. There is no example pictured for this property, as it is an underlying component of each of the above examples.

As phone screens are much smaller than a computer monitor, hiding blocks of content by default and only showing them when a web user expresses interest has become a UX best practice.

SEO and Collapsed Content Over the Years

There has been confusion over the past five years about “hidden” content and where the line is drawn. If your website uses accordions, does Google weight the hidden content as much as page content that is automatically visible?

Originally, Google made it clear that content that isn’t visible when a page loads is not as valuable as content that loads by default. After the introduction of mobile-first indexing (meaning that Google ranks pages based on what they look like on a mobile device instead of a computer), Google’s story on this matter changed.

However, there are still reports from SEO professionals that claim rankings and what Google representatives have said about collapsible content do not align. Here’s what the MARION SEO agency has aggregated about this topic.

Collapsed Content in 2014

Well-known digital marketer, Barry Schwartz, mentioned the following observation to Google spokesperson John Mueller in a November 2014 Google Hangout.

“So, you know how Google started to fully render a page as a user would see it? So, I see reports that, when you have, like, on the website “click to expand” to show more content, that since, that Google’s ignoring the content in that “click to expand” because a user doesn’t see it unless they click to expand.”

John Mueller replied, “I think we’ve been doing something similar for quite a while now, where, if we can recognize that the content is actually hidden, then we’ll just try to discount it a little bit. So that, uhhh, we kind of see that it’s still there, but the user doesn’t see it, therefore it’s probably not something that’s critical for this page. So, that includes like the click to expand, that includes the tabbed UIs where you have all kind of content hidden away in tabs… those kind of things. So, if you want that content rally indexed, I’d make sure it’s visible for the users when they go to that page.

Summary: Google discounts content that isn’t visible when a page loads.

Collapsed Content in 2016

Two years later in 2016, a Twitter user asked Google spokesperson Gary Illyes, “on desktop content in page elements like accordions is devalued or not indexed. Is this the same when crawling mobile content?”

Gary Illyes replied, “no, in the mobile-first world content hidden for ux should have full weight.”

Summary: Content that isn’t visible when a page loads “should have full weight.”

Collapsed Content in 2020

John Mueller from Google was asked this question in a March 2020 Google Webmaster Hangout: “In the mobile-first indexing world, will the, hidden text, hidden content behind tabs and accordions still be devalued, for example, because there’s a lower chance that it will be seen by a user?”

Mueller replied, “No. Specifically when it comes to content on mobile pages, we do take into account anything that’s in the HTML. So, if there’s something there that might be visible to users at some point, we will include that in the indexing, so that’s completely normal.”

Summary: Content that isn’t visible when a mobile page loads but might be visible to users at some point is indexed.

The Final Word on Tabbed Content, Accordions, and Click-to-Expand Text on Mobile

According to Google, when collapsible content functionality is used on mobile devices it should have full SEO weight.

On a personal note, I tend to process statements from Google spokespeople as legalese because keeping certain aspects of their algorithm a secret can prevent rankings from being manipulated.

If you analyze the Google statements above from that frame of mind, you’ll notice:

  • The use of “should” in the 2016 statement
  • The focus on “mobile pages” in the 2020 statement.
  • The focus on inclusion in indexing without mentioning the effect hidden content has on “rankings” in the 2020 statement.

I believe that statements from Google representatives are generally true, but the assertions within these statements are often muddled. I also recognize that there is a significant amount of machine learning happening within Google’s systems, which can make it hard to isolate rankings factors with 100% certainty.

You Deserve to Rank – MARION Has You Covered

MARION has been providing quality marketing support to Texas businesses since 1981, and we’ve evolved with the times. Whether you’re looking for an outsourced marketing department, or simply a one-time marketing project – our marketing team can help.

Our local SEO services have been helping Texas businesses generate consistent leads, and we’ve got the case study to back us up.

Contact us today to schedule a free marketing consultation with a MARION team member, and we’ll start you down the path to marketing success!


About Tony Mastri

Tony Mastri, Digital Marketing Manager at MARION, is an experienced agency and in-house digital marketer. With a proven background in content strategy, relationship-based link building, and technical SEO, he makes data-informed decisions that drive client growth.

Let's Get Started Today

The first step we need to take is for us to understand your needs, so give us a way to reach out to you and let's get to work.

  • This field is for validation purposes and should be left unchanged.