5 min read...

Using accordions or tabs can be the best solution to a fully loaded webpage. While Google concentrates on a user-friendly design, check out what else they have to say about tabs affecting SEO rankings...

What is an Accordion?

Tabbed or Accordion content is a type of user interface (UI) control that can improve the user’s experience by splitting content into analytical sections. Picture a drop-down menu within a webpage.

Accordions are typically used when there is too much information to fit on one page. Alternative uses include an abundance of information that can be quickly accessed by sectioning it off into different tabs or categories. 

Frequent uses include FAQ sections, product descriptions, and much more. 

Example: Northern Arizona University

As you can see in the first picture, there are tabs within the webpage that hold various content and keywords that can attribute to your SEO. 

The picture below represents an accordion-style layout with sections stacked on top of one another allowing the user to open each section to discover more information. 

Do Accordions affect SEO?

Utilizing tabbed sections and accordions can be a touchy subject for some SEO experts.

Marketers are commonly investigating SEO strategies, so they may ask if accordions affect results and rankings.

Luckily, most sources say that accordions do not negatively impact SEO and Google can still read all tabbed content perfectly fine.

Based on what Google Search Central has identified in the past, it does not matter what you do on your page. Google stresses basic user experience and prioritizes the front end of your website and will display it to the user accordingly.

Let's understand how Google identifies pages and data.

Google Search works in three stages, and not all pages make it through each stage:

1. Crawling: Google downloads text, images, and videos from pages it found on the internet with automated programs called crawlers.

2. Indexing: Google analyzes the text, images, and video files on the page, and stores the information in the Google index, which is a large database.

3. Serving search results: When a user searches on Google, Google returns information that's relevant to the user's query.

It is important to note that we are discussing how Google finds data, not all search engines. Ideally, you'll want to make your site’s important content visible by default.

Google is able to crawl HTML content hidden inside navigational elements such as tabs or expanding sections.

However,  some search engines might consider this content less accessible to users. 

Google's John Mueller declared that accordions may be a strong asset for an overload of information, but to keep in mind that important information should be visible to the eye right away as Google will determine hidden content less significant. 

Mueller more recently confirmed in a March 2020 Google Webmaster Central office hours episode that tabbed and accordion content is not devalued. 

UX is the highest-valued asset, especially in a mobile-first design. 

Hidden Content

It is important to recognize that tabs are different than hidden content.

According to MySEOExperts on the difference between hidden content and accordions,

"if you are using “display:none;” infinitely for everyone, it will absolutely hurt your SEO if you are using your keywords hidden. Using this technique is good when you want users to see something on your page only while opening on a desktop and not while opening from a mobile device.

Sometimes Google can detect it as a black hat technique and you may get penalized for the same."

Therefore, we suggest using this function only where it makes sense and sticking with employing accordions and tabs. 

Challenging Case Study

Nevertheless, there is one pretty interesting case study that shows that once a user removed the tabs and had all content displayed, they saw a huge increase in rankings.

Check this out! - SEO Claims Higher Rankings Without Content Hidden In Tabs Again

The lesson here is to test this theory for yourself and see what happens. If removing the collapsable content feature is easy on your end, try it, and see what happens.

Does it hurt your user experience? Does it improve ranking? Every site is different, and every index and crawl has its own landscape - so try it out!

How to Design an Accordion

Looking to design your own tabbed or accordion? Check out these helpful YouTube videos below:

• Designing The Perfect Accordion UI Design in Figma - In this video, they explain how to design an accordion component in Figma with auto-layout 3.0.

• When & how to use accordion | UX design accordion best practice - In this video, they talk about the user experience (UX) of an accordion. The advantages and disadvantages of using an accordion, and when to use accordions in web design.

​

Conclusion

For the most part, tabbed content is perfectly fine (and rather, it's usually great!)

However, keep in mind that a good user experience trumps everything else when it comes to accordion SEO.

If it makes sense to have accordions/tabs because there is a large amount of content and users will want to quickly drill down into their specific need, then use tabs.

If your content doesn't benefit from having tabs, then ditch them. 

The best part is that a website admin can easily test both options and see if it makes a huge difference either way on their site. Let us know in the comments if you try it out!

Looking to incorporate tabs or accordions on your website? Contact our team today. 

Quick facts

Do Accordions hurt SEO ranking?

No - Accordion to Google, the search engine scans all aspects of a page so the information is still accounted for and not devalued. 

Do tabs enhance the user experience?

Yes! Having information sectioned out for your visitors allows for easy access and viewing.

How do tabs affect SEO?

Google places emphasis on user experience. If you have too much information on one page, tabs and accordions may be your answer.