A common design question we receive from clients is if putting content behind tabs and accordions is okay for SEO. Content is one of the most important factors for any internet marketing strategy, so how it is displayed to your users matters. While there’s no definitive answer for how content should be displayed, there are some guidelines around it that Google offers.
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 we consider this content less accessible to users, and believe that you should make your most important information visible in the default page view.”
Content tabs and accordions can be okay as long as you consider what might be important for your users and the search engines to read. The information may not hold as much weight when it comes to SEO, but this doesn't mean that Google cannot read, process or index it, only that it's viewed as less important for organic rankings. So if it’s really important information, make sure your users can see it by default.
Below are a few examples of TopSpot designed and developed websites that organize content with these guidelines in mind.
In this example, there is plenty of space for this company’s most important content to be visible by default including a product summary, application info, benefits and a very detailed product overview – 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.
What about mobile?
With a primary mobile index from Google 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’s 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.
Accordions / Accordion Content
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 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.
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’s important information, it serves as more of an FYI for users in case they’d like more information.
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 page. Similarly 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.
When it comes to designing for SEO, 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 up front. Make their experience an easy and intuitive one no matter which device they are using.