24th July 2018

Can Google Crawl Content in Accordions for SEO?

When designing a webpage, the battle between optimising SEO whilst maintaining an aesthetically pleasing webpage design is one that requires a delicate balancing act. An example of this is the use of tabs, accordions, sliders and read more buttons to reduce the amount of text initially visible on the page and produce a cleaner design. However, there has been much discussion over whether Google’s web crawlers can read text that is not visible on the page when it loads, and if so, if this text is then indexed.

What are accordions?

As mentioned above, there are several design features that are used to ‘hide’ text from the user on page load. For example, when shopping online via an e-commerce website, you’ll often see a limited range of products on one web page, followed by a ‘See More Products’ button. When a user clicks on that button, additional products that were previously ‘hidden’ will then appear for them to browse. Features such as accordions ensure that certain elements of the page are not visible by default, and use JavaScript (or CSS) to reveal the content when requested by the user. This stops web pages from being unnecessarily lengthy and reduces page loading time.

Do accordions affect SEO?

Google have never released any official guidelines surrounding how it treats hidden text. However, over the past 4 years, Google’s Gary Illyes has indicated on online forums that hidden content is crawled and indexed but will be given less weight in the rankings.

We also know that Google’s guidelines are focused on ensuring that the Search Engine user experience is as good as possible. Therefore, it is clear to see why Google may want to discourage hiding sections of a webpage. Consider a user searching on Google for a specific search term. If they then click on one of the matching results and cannot find the relevant information immediately on the page, as it is hidden in an accordion for example, they are likely to return straight to the search results. Google would not consider this to be a good search experience for the user, and therefore do not give as much weight to content that is not immediately visible on page load.

Google has not released official documentation about how content that is hidden by CSS or JavaScript is treated, so we cannot know for sure. However, the suggestion that hidden content is given less weight than content that is visible by default is supported by a study carried out in 2017 by Shai Aharony (

Shai purchased 20 new domains and split them into 4 test groups based on how the keyword optimised content was displayed on the homepage; fully visible on page load, hidden by CSS, hidden by JavaScript or hidden in a text area. In each case, the keyword was mentioned 3 times in the content but was only in the immediate view of the user in one of the cases. After recording the ranking positions of the test sites over a time period of 6 months, the team compiled the results by averaging the rankings across the sites so that they were left with one set of results for each test case.

The results of the experiment reveal Google’s obvious preference for visible text, with the test cases with text hidden by CSS and JavaScript ranking significantly lower than the other two cases. However, when it came to the text being hidden within an HTML <textarea> tag, Google treated the content as being fully visible. The test case which involved copy being hidden within a Textarea tag ranked in a similar position to the fully visible test case.


Has Mobile First Indexing affected the treatment of text in accordions?

Despite this relatively recent study, the treatment of hidden text has appeared to change quite significantly this year, with Google’s recent move to Mobile First Indexing. As more users are using mobile and tablet devices compared to desktops, the layout of web pages is having to evolve with technology. This often means hiding text in tabs and accordions to improve user experience on smaller screens which have a lot less space for content.

The introduction of mobile first indexing means that Google must take this into consideration when assessing the treatment of content that is not visible by default. Again, there has not been an official statement from Google about these changes. However, in anticipation of the rollout of mobile first indexing, representatives of Google Gary Illyes and John Mueller have both confirmed that content that is hidden on the initial view of a webpage will be treated as normal content.

Since the introduction of mobile first indexing, Shai Aharony has returned to his study on hidden content to see if the results had altered along with the indexing update. Recording the rankings over the few weeks after the change to mobile first, Shai noticed the data changing significantly, with the defined gaps between rankings of visible and hidden content test cases decreasing. His results reflect the claims made by Illyes and Mueller that Google will not show preference over content that is visible by default. However, to make these results more conclusive the study would have to be started again and observed over a longer period of time to gain more accurate results.

Therefore, following the recent changes accompanying Google’s move to mobile first indexing, it appears that we no longer need to focus on visibly presenting all content on page load. That said, this doesn’t mean that we should begin hiding all our copy in accordions and tabs for the sake of design. Instead, Google’s change finally gives us the flexibility to find a happy balance between a site that is user-friendly on both desktop and mobile, aesthetically pleasing and optimised for SEO.

If you’re interested in finding out more about optimising your website whilst maintaining a clean, aesthetically pleasing design, contact the SEO experts at Varn today. We’d love to hear from you.


Article by: Katie, Technical SEO Expert More articles by Katie

Share this article: