Do accordions, "read more" buttons and tabbed content impact your website SEO?

Do Accordions Impact Your SEO & Rankings?

Accordions, tabbed content, “click to read more” buttons… It goes by many names, but it’s here to stay. Accordions are a great user-friendly method of incorporating large amounts of content and information without hurting the user experience. Rather than force the user to scroll through paragraphs of information they do not want to read, users can instead opt in or out of reading such content with a simple click.

However, the question has always remained: does hiding content in accordions or behind “read more” buttons impact your SEO? Can Google still crawl and index this content? That’s exactly the issue we will be looking at today. In this blog, we’ll take a look at what official Googlers have to say about the issue, what actual case studies show and our own experience with the issue.

How To Hide Content – The Right Way

Firstly, we need to understand the correct way to hide content behind accordions.

Hiding content with “display:none;” CSS is the right way. Simple. This is because it keeps your content within the HTML, so when GoogleBot crawls your page it can see this content actually exists on the page.

Hiding content by simply not loading it, but rather injecting it into the HTML document with JavaScript is incorrect. GoogleBot will not be able to see that this content exists on the page. Not to mention it’s a stupid way of doing it – why would you add all that JavaScript when you can just type two words in CSS instead?

You can read more about how GoogleBot handles JavaScript here.

What Google Says

Firstly, it’s important to note that Google’s advice on content in accordions has changed over the years. If you read Google’s advice back in the 2014, the stance was that webmasters should not hide content in accordions. The theory is if the content was actually important, it shouldn’t be hidden – so if it’s hidden and therefore unimportant, Google isn’t going to use it to rank the page. This clearly puts a splinter in an already conflicted world of user experience and design vs SEO. Just because additional information requires user input to show more does not mean it is actually “hidden” and definitely does not mean it is “unimportant”, it is simply there to improve the user experience and customer journey.

In 2014, John Mueller specifically said this when it comes to Google indexing content in accordions:

“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.” – John Mueller

Fast forward two years to 2016 and Google’s advice has changed. In conjunction with Google’s new mobile-first approach to indexing, Gary Illyes of Google stated that any content hidden for user experience should still have full weight when it comes to ranking.

“In the mobile-first world content hidden for ux should have full weight” – Gary Illyes

In 2017, John Mueller also stated that content hidden in accordions or tabs etc will be treated just the same as if it were displayed normally. 

“So with the mobile first indexing will index the the mobile version of the page. And on the mobile version of the page it can be that you have these kind of tabs and folders and things like that, which we will still treat as normal content on the page even. Even if it is hidden on the initial view.” – John Mueller

And it was again confirmed in 2018, with a simple statement from Aaseesh Marina of Google:

“With the launch of the Mobile-First Index, Google’ll be treating content that’s hidden under, say a tab similar to content that’s seen on the first glance.” – Aeseesh

Now looking at all these statements, we can clearly see that the official advice from Google is that content hidden behind accordions, tabs, “read more” labels etc will be treated exactly the same as if they were completely visible. I guess we can use accordions and have nothing to worry about, right?

Well, that’s actually incorrect. If we look at every statement, we can see a clear pattern where the statement is only focused on the mobile version of the page. In every statement, Google confirms that content behind accordions etc will indeed be given full weight in the mobile index. The desktop index, or even the index as a whole, is never mentioned in any of Google’s advice or statements – instead every statement specifically mentions the mobile index.

So with a keen eye, we can get to the route of what Google is actually saying: for mobile search results, content behind accordions is completely fine for SEO. For desktop results, there is no further advice.

What The Studies Show

As with anything where people might think it could impact search results, there have been case studies around how content accordions impact search rankings. 

The short answer: putting your content behind accordions does impact your rankings. A duplicate page without accordions is more likely to rank than the same content with accordions.

A controlled test by Dejan Marketing found that publishing two pages with duplicate content, with one using accordions and one not, the page without accordions always outranked the page with accordions. This test was conducted in 2018.

Another detailed test by Search Pilot found that Iceland Groceries recorded a 12% uplift in organic sessions after removing accordions from their product descriptions. This test was conducted in 2020.

Finally, SEO Dan Shure posted his own results, showing a significant increase in Google Search clicks after removing accordions on the webpage and instead displaying the full content by default. This test was conducted in 2022.

What Do We Think?

At the end of the day, this looks like a great example of machine-learning algorithms at work. Google’s advice and statements about the issue of accordions for SEO is very clearly the opposite of what actual SEO’s are seeing during controlled tests and case studies. This does not necessarily mean Google is lying though. As we know, Google’s ranking is made up of many different algorithms, all assessing different factors and scores to determine a final ranking in the search results page. It’s common knowledge that Google’s own engineers don’t actually know how much their own machine-learning algorithms weight each factor anymore – that’s literally the point of machine-learning. I don’t doubt that Google’s engineers have tried to change the algorithm to understand that content in accordions is still useful, but at the end of the day it’s an algorithm which decides on its own whether it is actually important or not. Additionally, it’s important to keep note of how Google’s statements regarding content in accordions is consistently focused on mobile pages and results. It is reasonable to assume that accordion content for desktop pages is still neglected or even demoted.

We are currently working on our own case study to see whether removing a “Read more” button from our client’s most competitive page will have any direct impact on the page’s rankings. We’ll be sure to share the results very soon!

UPDATE 23/03: It’s only been about two weeks since we started our accordion experiment but we are already seeing clear results. After taking the content out of the “read more” button, we have seen an increase of 18% for organic traffic landing on the page. In Google Search Console, we have seen an increase in clicks to the page by 17%.

So to conclude, according to all available research, putting your content behind accordions is an SEO disadvantage.