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
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.”
During 2018, Google successfully indexed the content.
During 2021, Google successfully 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 successfully indexed the content.
During 2021, Google successfully indexed the content.
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 successfully indexed the content.
During 2021, Google successfully indexed the content.
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 successfully indexed the content.
During 2021, Google successfully indexed the content.
4. Internal JSON Tab (Dynamic)
Tab Name: “Int JSON”
The tab is hidden by default, with static a JSON (JavaScript dictionary), 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.
Interestingly, information in a JavaScript dictionary that is replaced is not considered to be content.
During 2021, Google did not index the content.
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.
During 2021, Google did not index the content.
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 successfully indexed the content.
Content from a JSON API is considered to be content.
During 2021, Google successfully indexed the content.
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 successfully indexed the content.
During 2021, Google successfully indexed the content.
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.
Using the onClick event with internal content does not trigger the content for crawling.
During 2021, Google did not index the content.
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 successfully indexed the content.
During 2021, Google successfully indexed the content.
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.
Using the onClick event with internal content does not trigger external content for crawling.
During 2021, Google did not index the content.
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 successfully indexed the content. The iFRAME is only linked to through this web page. It has been found and indexed.
During 2021, Google did not index the content. iframe content is no longer indexed.
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.
During 2021, Google did not index the content.
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.
