Accordions in SEO: How Google lied about ranking hidden content

A client recently asked us if hiding content in tabs or accordions affects SEO performance, which prompted us to conduct research.

To our surprise, we found a significant discrepancy between Google's recommended best practices and real-world observations.

Here's what we discovered.

The power of accordions

Accordions are an essential tool for enhancing website usability, especially for interfaces with a lot of information. However, they not only improve user experience but also benefit SEO. By using accordions thoughtfully, you can direct user attention, provide additional information, and create a dynamic interaction that aligns well with SEO goals.

Navigating SEO considerations

Although accordions can enhance the user experience, they can also introduce SEO complexities. Technical issues related to JavaScript usage might impact search engine crawlers' ability to access hidden content. It is also critical to maintain mobile responsiveness, as Google highly values mobile-friendly design for ranking. Additionally, ensuring accessibility for users with disabilities is not only good practice, but also indirectly influences SEO performance.

Decoding Google's perspective on accordion content

Google's approach to accordions has evolved over time. While they initially favored visible content, they later acknowledged the importance of hidden content for indexing and ranking purposes. As early as 2016, Gary Illyes from Google stressed that collapsed content carries the same weight as visible content in rankings.

This stance was reaffirmed by John Mueller during a Google Webmaster Central session in 2020. He clarified that hidden content, including fold-out text, on mobile pages is considered for indexing as long as it exists within the HTML and may become visible to users after expanding the elements. This underscores Google's commitment to valuing all content equally for search visibility.

Practical insights from case studies

Now, let's shift our focus from theories to actual results. While theoretical discussions provide valuable insights, practical experiments often paint a more accurate picture of how things work in the real world.

Case study 1: impact of unveiling hidden text on SEO performance

SearchPilot recently conducted a case study on Iceland Groceries' website. The study aimed to test the impact of revealing content that was previously hidden behind tabs or accordions. This concealed content included essential information like product details and nutritional facts.

The results of this study were quite intriguing. When the previously hidden information was made visible immediately, the number of organic sessions increased by 12%.

This surprising result challenges Google's claims that hidden content carries equal weight in terms of rankings. It indicates that, in practice, making information visible on the webpage can significantly enhance the visibility of the site in search engine results.

Case study 2: deciphering google's algorithm for hidden text

Another study from rebootonline.com arrived at a similar conclusion. The case study examined how Google's ranking algorithms treat hidden text on webpages, with a focus on various methods of hiding text for design purposes.

The experiment involved creating twenty new domains, each with a slightly different website design, and testing four scenarios:

• Scenario 1: Text is fully visible

• Scenario 2: Text is hidden within a <textarea> element in the HTML

• Scenario 3: Text is hidden via CSS

• Scenario 4: Text is hidden via JavaScript

The experiment lasted six months and produced significant results. Google's algorithms consistently favored fully visible text.

The study found that text hidden through CSS or JavaScript had significantly lower rankings compared to other methods. This highlights the importance of visible text in Google's algorithms and emphasizes the need for practical experimentation when developing SEO strategies.

Note: It was brought to our attention, that the <textarea> element which should hide content wasn't implemented correctly in this study. The findings regarding CSS and JS remain valid however. See the comments of this article for more context.

How would I use this know-how today?

Wondering if it's time to say goodbye to accordions? Not quite. Accordions are a fantastic tool for streamlining information on your website and keeping things neat. However, before using hidden text elements, there are a couple of considerations to keep in mind.

1. Prioritize content elements
   Be careful of hiding important content from users and Google. Example: It’s usually okay to use accordions for FAQ content at the end of a product page, but we wouldn’t advise you to hide product descriptions. When in doubt, we recommend implementing critical text components as visible text.

2. Understand users and Google alike
   Implement accordions thoughtfully and only where they truly provide added value for users and enhance the UX. Google's algorithms prioritize visible text over content hidden with CSS or JavaScript. Balance UX and SEO wisely, when choosing to implement accordions.

3. Experiment and validate
   Search engines often behave inconsistently and treat different use cases differently. To determine what works best for you, we recommend conducting your own experiments to measure the impact of revealing or hiding content on search visibility.

4. Balance theory and practice
   Real-world outcomes may not always align with theoretical expectations in SEO. Striking the right balance between theory and practical experimentation is crucial for making informed decisions in this ever-evolving landscape.