{"id":85,"date":"2017-05-09T19:42:00","date_gmt":"2017-05-10T01:42:00","guid":{"rendered":"https:\/\/www.topspotims.com\/blog\/?p=85"},"modified":"2022-01-13T15:33:10","modified_gmt":"2022-01-13T21:33:10","slug":"is-tabbed-and-accordion-content-okay-for-seo","status":"publish","type":"post","link":"https:\/\/www.topspotims.com\/blog\/2017\/05\/is-tabbed-and-accordion-content-okay-for-seo\/","title":{"rendered":"Is Tabbed & Accordion Content Okay for SEO?"},"content":{"rendered":"\n

Updated as of January 12, 2022.<\/em><\/p>\n\n\n\n

A common design question we receive from clients is if putting content behind tabs and accordions is okay for SEO<\/a>. Content is one of the most important factors for any internet marketing strategy, so how it is displayed to your users matters. Though Google still maintains that they can and will index content that has been tabbed or accordioned, we are still seeing test results\/case studies that suggest that more accessible content beyond the tabs or accordions is performing better in the search landscape. <\/p>\n\n\n\n

Moz said the following during one of their recent Whiteboard Friday presentations:<\/p>\n\n\n\n

\u201cIf you have content that is in accordions or drop-downs or you have to click to reveal the content, study after study after study shows that content that’s brought out of tabs and brought into the main body, so people don’t have to click to see, generally performs better than content that’s hidden in tabs.<\/p>

Now to be clear, I don’t believe that Google discriminates content in tabs. They seem to be able to index and rank it just fine. But I think people generally engage with content when it’s out of tabs, and maybe some of those signals help those pages to rank a little better.”<\/p>(Source: Best of Whiteboard Friday 2021: 21 Smart Google SEO Tips<\/a>)<\/cite><\/blockquote>\n\n\n\n

In addition, our SEO Team has tested the tabbed content versus regular content layouts and has seen traffic growth when removing the tabbed layout. For instance, we pulled content out of accordioned tabs for one of our Clients and the following month was a peak traffic month for several of their products. <\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

While nothing concretely points to having tabbed content as a drawback, there is some evidence that points to a better user experience without them. Google’s Core Web Vitals<\/a> point to UX as a highly relevant signal, so it might be time to consider the benefits and drawbacks of tabbed content. <\/p>\n\n\n\n

While Google\u2019s official stance (below) remains true, we encourage you to evaluate and test the performance of your content if you are currently utilizing tabs or accordions. We expect to see varying results depending on industry, device performance, and landscape competitiveness as we continue to measure this data point with a general trend to increased content performance when pulling out content from those features. It is important to keep in mind that user experience is continuing to be a point of focus, especially with the rollout of the Core Web Vitals and Page Experience update that came out in mid-2021 and the impending, last migration of sites to the mobile-first indexation,<\/a> expected to be completed in 2022.  <\/p>\n\n\n\n

“Specifically when it comes to content on mobile pages we do take into account anything that\u2019s in the HTML. If there\u2019s something there that might be visible to users at some point it will be included in the indexing.”<\/p> John Mueller, Google March 31, 2020<\/cite><\/blockquote>\n\n\n\n

\n\n\n\n

(Previous Blog Post – Last Updated April 23, 2021)<\/em><\/p>\n\n\n\n

Content tabs and accordions are okay from a search engine perspective and can be okay from a user experience perspective as long as you consider what might be important for your users and the search engines to read. While accordion and tabbed content may be indexed by Google from an organic ranking standpoint, your potential customers may miss it. So, if it’s really important information, make sure your users can see it by default.<\/p>\n\n\n\n

Below are a few examples of websites designed and developed<\/a> by TopSpot that organize content with these guidelines in mind.<\/p>\n\n\n\n

Tabbed Content for SEO<\/h3>\n\n\n\n

In this example, there is plenty of space for this company\u2019s most important content to be visible by default including a product summary, application info, benefits and a very detailed product overview \u2013 all great information for users and search engines. In tabs, there is secondary information for the user like a product video, technical information and product literature that can be downloaded. This secondary information is useful, but in this case, not as influential for organic rankings. Putting it in tabs for the user is a fine solution.<\/p>\n\n\n\n

\"tabbed<\/a>
In this example, there is secondary information within the tabs for the user like a product video, technical information and product literature that can be downloaded.<\/sub><\/figcaption><\/figure><\/div>\n\n\n\n

What about mobile?<\/h4>\n\n\n\n

With a primary mobile index from Google<\/a> coming at the end of this year, how your website handles content on a mobile device is very important. Last year, when plans of a mobile index were announced, Google\u2019s Gary Illyes mentioned that content behind tabs or accordions for the mobile user experience will have full SEO value. Content tabs and accordions can make the mobile experience a lot better, so a user can expand on the content they want easily without lots of scrolling. In other words, the use of content tabs or accordions is fine for a mobile device.<\/p>\n\n\n\n

Accordions \/ Accordion Content for SEO<\/h3>\n\n\n\n

Content accordions are a great option for displaying lots of content on mobile, especially Frequently Asked Questions (FAQ) type content. In the example below, the responsive website<\/a> is designed to show all the valuable FAQ content by default on the desktop view, but transitions to accordions on a mobile device to make it an easy user experience for mobile users.<\/p>\n\n\n\n

\"mobile<\/a>
The FAQ content is shown by default on the desktop view, but transitions to accordion styling on a mobile device.<\/sub><\/figcaption><\/figure><\/div>\n\n\n\n

The example below uses content accordions on the desktop view to include supplemental information that explains specifics on a process relevant to their products. While it\u2019s important information, it serves as more of an FYI for users in case they\u2019d like more information.<\/p>\n\n\n\n

\"accordion<\/a>
Content accordions are utilized on the desktop view to include supplemental product information.<\/sub><\/figcaption><\/figure><\/div>\n\n\n\n

Content Dropdowns for SEO<\/h3>\n\n\n\n

Tabs and accordions aren’t the only design elements for displaying content. Content dropdowns can be a neat way to display information and get a user to interact with your content. This example is an interactive tool for users from our Local SEO<\/a> page. Similar to tabs and accordions, the content shows based on what the user selects, meaning the content does not show by default. If this content’s purpose was only to influence rankings, a different strategy for displaying all the content by default might be necessary. In this case, the tool’s purpose is just to be an informational and interactive resource for users.<\/p>\n\n\n\n

\"Local<\/figure>\n\n\n\n

When it comes to designing content for SEO<\/a>, the most important thing to remember is that you are designing for people. What information will your customers need to be able to access quickly to get closer in their decision-making process? Display that content upfront. Make their experience an easy and intuitive one no matter which device they are using.<\/p>\n\n\n\n

\n\n\n\n

If you are interested in learning more about how TopSpot can help your business, please Contact Us<\/a> or give us a call at 713-933-0449!<\/p>\n\n\n\n

\n\n\n\n

Would you like to receive more information like this, sent directly to your inbox?<\/h4>\n\n\n\n

Sign up for our newsletter<\/h1>\n\n\n\n
\n
\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n\n\n\n\n\n\n<\/div>\n
    \n\n\n\n\n\n\n\n\t
    \n\t\t

    \n\t\t\t

    \n\t\t\t

    \n\t\t\t

    \n\t\t<\/p>\n\t<\/fieldset>\n<\/div>