When designing a website layout using best practices, inevitably, some may seem to benefit from the implementation of accordions. But, what exactly is an accordion in web design?
What is an Accordion?
An accordion (also referred to as tabbed content or accordion panel), is a UI element used in web design, which utilizes a link, that when clicked, can hide or reveal content below it.
Accordion Example 1 - Click Here to close and open the content panel below
Accordion or tabbed content goes here and is revealed or hidden when the title link above is clicked.
Accordion Example 2 - Click Here to close and open the content panel below
Here is some additional information in this accordion or tabbed content panel.
As you can see from the above live example of an accordion, detailed content can be visible or hidden as a result of clicking the heading link.
Why Use an Accordion?
From a UX perspective, an accordion can be an efficient way to organize web page content, particularly when there is a lot of content, most of which, may not be relevant to most visitors.
For example, an accordion is commonly used to present FAQs within a web page. This makes the web page less unwieldy to use, since you can have the numerous FAQs organized as a clickable, vertical list of links. These links will only reveal the detailed answers to only the frequently asked questions that are of interest to the visitor. Use of accordions can be particularly helpful when web pages are viewed from mobile devices to reduce the amount of vertical scrolling.
Accordions can also be used as navigation/menu elements. Accordions can be left “open” or “closed” by default.
Do Accordions Hurt SEO?
This had been a hotly debated topic for some SEO professionals until a few years ago. That is because in 2020, Google confirmed that they do not view accordions any different than other content that can be read within a web page. If it can be read by a human, it can be crawled and indexed by Google. Therefore, there is no penalty from Google as it pertains to utilization of accordions or tabbed content.
That said, Google has publicly stated that although there can be some good reasons to implement accordions, Google may still consider “hidden” content less important than content that is readily visible on the web page.
Should You Use Accordions in Your Website?
It depends. If you have a lot of text content that must be displayed on a particular web page, without which, would result in a great deal of vertical scrolling, you may want to utilize an accordion. Keep in mind that if you can avoid using an accordion, this may be a better approach.
Regardless of whether or not you use an accordion, rest assured, accordions or tabbed content are not bad for SEO, with respect to Google.
EMAIL US