Join Merj - We're Hiring

12 Experiments for Tabbed Content SEO

Development News

12 Jul 2021
9 minutes
By Ryan Siddle
Author Avatar

SEO Research and Development

Most of our SEO research and development never gets to see the light of day. We help our enterprise clients innovate in competitive spaces by taking on challenges. Some research projects run for days, while others can take months. We are making more of our internal SEO research publicly available. We are looking to support marketing technology and demand generation teams who lean into challenges. Get in touch with Ryan Siddle (Email, Twitter or LinkedIn).

This experiment was first created in 2018 to understand how Google may react to Bootstrap 4 responsive designed. We have updated the results to reflect 2021.

Why Hide Content?

Placing content within tabs or accordion panels allows customers to view shorter, clean and user friendly webpages. When tabs are used in responsive design, they enable desktop, tablet and mobile devices to contain the same information that is presented suitably for the device. Clicking on a tab exposes additional content that is supplemental to the main body of content.

Experiment Summary Table

Item Content On Page
Load
Indexable in
2018
Indexable in
2021
No tabs Yes Yes Yes
1. Visible Tab (Static) Yes Yes Yes
2. Hidden Tab (Static) Yes Yes Yes
3. Internal JSON data (Static) Yes Yes Yes
4. Internal JSON data (Overrides) No No No
5. External JSON data (Static) Yes No No
6. External JSON data (Overrides) No Yes Yes
7. OnClick Internal JSON data (Static) Yes Yes Yes
8. OnClick Internal JSON data No No No
9. OnClick External JSON data (Static) Yes Yes Yes
10. OnClick External JSON data (Dynamic) Yes No No
11. iFRAME Robots Allowed Yes Yes No
12. iFRAME Robots Not Allowed Yes No No

History of Tabbed Content

For the past few years, Google has adapted its recommendations for hidden content, largely to conform to changes for executing JavaScript, and to pave the way for the introduction of the mobile-first index.

Before 2014, Google indexed tabbed content. The crawler and indexer was less advanced, not having rendering capabilities. When it came to content hidden by JavaScript, Google simply indexed the page source.

In November of the same year, things changed when during a Google Webmaster Hangout, John Mueller revealed that the search engine had actually been discounting hidden content for "quite a while."

This surprised many in the SEO community, but Google said little more of the subject until November 2016, when Gary Illyes mentioned in a Twitter conversation that the mobile-first index should actually have full indexing ability, as tabbed content on mobile is considered it to be part of a good user experience.

He also stated at the SMX West in June 2017, that it could take up to five years for the mobile-first index to fully roll out.

A little more information was revealed in October 2017, when John Mueller clarified that tabbed content will be considered part of the mobile-first index on the condition that it is loaded on the initial Document Object Model ("DOM").

He also made sure to note that if the content is loaded after clicking on a tab, it will not be considered for indexing.

The next big leap in the mobile-first index timeline was at the end of March 2018, when Google officially announced roll out and stated that it would now be increasingly using the mobile versions of site content for indexation.

The Experiment

Action Points

You can view the source of the tabbed content experiment webpage.

We aimed to test and check different ways of inserting content on the web page, both on DOM load and onClick events.

There were certain prerequisites that we had to abide by in order to ensure its success and legitimacy, which included:

  • The use of a new URL that Google has not "seen" before.
  • Ensuring unique content on each tab, each less than 32 words in length.
  • Being careful not to "ping" any APIs or iFRAMEs involved in the test.
  • The ability to monitor traffic to the web page and APIs.
  • Use of Bootstrap 4 (Alpha) tabs.

We tested one non-tabbed piece of information and tabbed eight different tabs, with 12 potential scenarios. The initial control test shows that the static HTML outside of the tabbed area is indexable.

The static HTML is the content outside of the HTML tabs.

site:merj.com "Tabbed content can improve the mobile user experience."

Screenshot of Google 2018 for Tabbed Experiment 0

During 2018, Google succesfully indexed the content.

Screenshot of Google 2021 for Tabbed Experiment 0

During 2021, Google succesfully indexed the content.

1. Visible Tab

Tab Name: "Visible"

The tab is active on the page load and contains static HTML markup. The site operator used was:

site:merj.com "The first tab has static content that is always visible and should be seen."

During 2018, Google succesfully indexed the content.

Screenshot of Google 2018 for Tabbed Experiment 1

During 2021, Google succesfully indexed the content.

Screenshot of Google 2021 for Tabbed Experiment 1

2. Hidden Tab

Tab Name: "Not Visible"

The tab is hidden by default on the page load and contains static HTML markup.

site:merj.com "Content that is not visible on the initial DOM load, but is static should be seen."

During 2018, Google succesfully indexed the content.

Screenshot of Google 2018 for Tabbed Experiment 2

During 2021, Google succesfully indexed the content.

Screenshot of Google 2021 for Tabbed Experiment 2

3. Internal JSON Tab (Static)

Tab Name: "Int JSON"

The tab is hidden by default, with HTML markup that should be replaced by the internal JSON:

site:merj.com "Initial content was here before the internal hash was used to generate a new message."

During 2018, Google succesfully indexed the content.

Screenshot of Google 2018 for Tabbed Experiment 3

During 2021, Google succesfully indexed the content.

Screenshot of Google 2021 for Tabbed Experiment 3

4. Internal JSON Tab (Dynamic)

Tab Name: "Int JSON"

The tab is hidden by default, with static a JSON (JavaScript dictonary), which is present on the page load:

site:merj.com "The DOM load has triggered this internal replacement message."

During 2018, Google did not index the content.

Screenshot of Google 2018 for Tabbed Experiment 4

Interestingly, information in a JavaScript dictionary that is replaced is not considered to be content.

During 2021, Google did not index the content.

Screenshot of Google 2021 for Tabbed Experiment 4

5. External JSON Tab (Static)

Tab Name: "Ext JSON"

The tab is hidden by default with HTML markup that should be replaced by the external JSON:

site:merj.com "Initial content was here before the external AJAX call to a JSON API."

During 2018, Google did not index the content.

Screenshot of Google 2018 for Tabbed Experiment 5

During 2021, Google did not index the content.

Screenshot of Google 2021 for Tabbed Experiment 5

6. External JSON Tab (Dynamic)

Tab Name: "Ext JSON"

The tab is hidden by default with an AJAX call to an API, which returns JSON on the page load:

site:merj.com "A DOM load has occurred. This content has been called externally to replace the message."

During 2018, Google succesfully indexed the content.

Screenshot of Google 2018 for Tabbed Experiment 6

Content from a JSON API is considered to be content.

During 2021, Google succesfully indexed the content.

Screenshot of Google 2021 for Tabbed Experiment 6

7. Internal Click JSON Tab

Tab Name: Int JSON Click

The tab is hidden by default with static a JSON (JavaScript hash) and static HTML that should be overridden:

site:merj.com "An internal onClick event will replace this paragraph using an internal hash."

During 2018, Google succesfully indexed the content.

Screenshot of Google 2018 for Tabbed Experiment 7

During 2021, Google succesfully indexed the content.

Screenshot of Google 2021 for Tabbed Experiment 7

8. Internal Click JSON Tab (Static)

Tab Name: Int JSON Click

The tab is hidden by default with static a JSON (JavaScript hash), which is only loaded when the tab is clicked using the onClick event:

site:merj.com "The user has triggered this internal replacement message after clicking on an onClick tab."

During 2018, Google did not index the content.

Screenshot of Google 2018 for Tabbed Experiment 8

Using the onClick event with internal content does not trigger the content for crawling.

During 2021, Google did not index the content.

Screenshot of Google 2021 for Tabbed Experiment 8

9. External JSON Tab (Dynamic)

Tab Name: Ext JSON Click

The tab is hidden by default with static HTML that should be replaced with an AJAX call to an API, which returns JSON only when the tab is clicked using the onClick event.

site:merj.com "An external onClick event will replace this paragraph using an external AJAX call to a JSON API."

During 2018, Google succesfully indexed the content.

Screenshot of Google 2018 for Tabbed Experiment 9

During 2021, Google succesfully indexed the content.

Screenshot of Google 2021 for Tabbed Experiment 9

10. External JSON Tab

Tab Name: Ext JSON Click

The tab is hidden by default with an AJAX call to an API, which returns JSON only when the tab is clicked using the onClick event:

site:merj.com "A click trigger has occurred. The user has requested this external replacement message."

During 2018, Google did not index the content.

Screenshot of Google 2018 for Tabbed Experiment 10

Using the onClick event with internal content does not trigger external content for crawling.

During 2021, Google did not index the content.

Screenshot of Google 2021 for Tabbed Experiment 10

11. iFrame Allow Robots Tab

Tab Name: IFRAME IF

The tab is hidden by default with an embedded iFRAME that contains a robots directive of "index,follow", which is present on the page load:

site:merj.com "A simple IFRAME that can be indexed and can be embedded within a tab to provide generic duplicate messaging across multiple web pages."

During 2018, Google succesfully indexed the content. The iFRAME is only linked to through this web page. It has been found and indexed.

Screenshot of Google 2018 for Tabbed Experiment 11

During 2021, Google did not index the content. iframe content is no longer indexed.

Screenshot of Google 2021 for Tabbed Experiment 11

12. iFrame Disallow Robots Tab

Tab Name: IFRAME NINF

The tab is hidden by default with an embedded iFRAME that contains a robots directive of noindex,nofollow, which is present on the page load.

site:merj.com "A simple IFRAME with a noindex directive should not be indexed."

During 2018, Google did not index the content.

Screenshot of Google 2018 for Tabbed Experiment 12

During 2021, Google did not index the content.

Screenshot of Google 2021 for Tabbed Experiment 12

Summary

We were somewhat surprised to learn that Google does not consider JavaScript dictionary strings to be content. That said, if content needs to be hidden, use dictionary strings or the onClick event handler to call an API.

For businesses that need to have their content discovered in tabs, use static HTML on the page load or call an external API, but ensure to avoid using onClick events for loading content.

Get the Newsletter

Stay in the loop with our monthly Newsletter to get the complete round up of market shifts and how to stay ahead.

Let us help you solve your digital problems

We help leading organisations to optimise their digital presence the right way, by tailoring software to integrate business and digital processes, so the humans can focus on strategy, while the machines do the heavy lifting.