Can Google Crawl Content in Accordions for SEO? | Varn

Insights

5 December 2022

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.

 Can Google crawl accordions?

Google have indicated that hidden content will be crawled and indexed in the same way that other, fully visible content is crawled and indexed. However, many SEO professionals speculate that this hidden content is actually given less weight in the rankings. So while accordion content may be accessible for Google to crawl, it may not perform as well as visible content. 

Do accordions affect SEO?

We 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 may 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 number of studies conducted by SEO professionals. 

A study carried out in 2017 by Shai Aharony reveals Google’s obvious preference for visible text at the time.

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 showed that  the test cases with text hidden by CSS and JavaScript ranked 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.

Source: https://www.rebootonline.com/blog/hidden-text-experiment/

More recent studies, tests and case studies have revealed similar results. In March 2022, SEO consultant Dan Shure shared metrics for a page which he had optimised by updating content hidden within an accordion dropdown so that it was instead visible immediately on the page to users. As his Tweet explains, this resulted in a clear improvement in the page’s ranking position and resulting search traffic.

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

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. 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.

 Google’s move to mobile-first indexing likely means that SEOs don’t need to worry too much about hiding content in accordions. That said, content may still perform better if it is visible, so accordions should be used only when they offer a real benefit to User Experience. .. Google’s current stance appears to  give 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.

Optimising your online presence can be a challenge, made harder by trying to choose the right SEO agency for you. All SEO Agencies promise higher rankings and more traffic for your site, so how can you be sure you are hiring the best, the one that will be able to deliver on that promise and more?

There are no professional accreditations, no formal qualifications for SEO. But there are things you can do to make sure you are hiring a great SEO Agency to work with you.

Google has some great advice on how to find the best agency for your business and you can read more about it here.

Article by: Helen, Senior Technical SEO Manager More articles by Helen

Share this article:

Get in touch with our Technical SEO team

Sign up for the latest SEO insights

Stay up to date with the very latest search marketing insights and news from Varn

Perform Better

Sign Up for Varn Insights
Sign Up for Latest Insights

Keep up to date with the latest search marketing news, insights, algorithm changes and research