Did Google just put an end to Tabs, Carousels and Accordions?

Google’s Gary Illyes has announced on Twitter that if you ‘put contents in a JavaScript array’ and only display it when the user interacts with an element, e.g., ‘click to expand’, the hidden content won’t be indexed by Google.

For example, tabbed content, like that shown in the gif below, won’t be indexed.

As you can imagine, this got us talking. Carousels, tabs and accordions are all legitimate devices to display content. So what’s OK and what isn’t?

First, let’s examine why Google have done this.

Why is Google ignoring content hidden by JavaScript?

Carousels, tabs and accordions are all valid use cases for hiding content with JavaScript.

The issue is that to ‘hide’ the content behind a tab, a CSS rule is usually applied to set the ‘hidden’ element’s display property to none; meaning it exists in the code, but is not displayed on screen.

You’ve probably already spotted the issue. Short-sighted, black-hat webmasters have started abusing this. Effectively, they are cloaking content by showing one thing to the user and another to the search engine’s crawlers.

Here’s Mr Cutts explaining the concept of cloaking:

Now, Google can’t apply an automatic downgrade/penalty to websites hiding content with tabs, carousels and accordions because there is far too much risk of penalising a legitimate use.

Their decision to simply ignore the hidden content is probably the most sensible. It negates any advantage for people attempting to game the system and doesn’t hurt anyone using tabs, carousels or accordions correctly.

Putting users first

As always, the motivation behind the announcement is improving a user’s experience. Google’s rationale is, if content is relevant and useful for a user, it shouldn’t be hidden.

On this point, I agree. When conducting a search, I am motivated to click a result based on the relevance of the snippet.

When I land on the destination page, I expect to see immediately the content within that snippet. If it’s hidden behind a tab, or in a collapsed section of an accordion, I won’t see it and will scroll up and down for a bit before hitting the back button, slightly confused.

This gives us a clue about how to optimise our content for both users and search engines without having to rely on content hidden by JavaScript.

Introducing Chunking

Chunking isn’t anything to do with the 80’s classic movie, the Goonies. It’s a principle of interaction design.

According to ui-patterns.com, chunking is where you ‘group information into a limited number of units or chunks, so that information is easier to process and recall.’

The simplest example of chunking is this:

Telephone number before chunking: +44(0)1293265374

Telephone number after chunking: +44 (0)1293 264 374

Before chunking the phone number is impossible to understand and it’s hopeless to try and remember it. After chunking, it’s much clearer, with the international dialling prefix, area code, local number, all broken down into smaller units making it easier to process.

Applying chunking to your content

Here, it’ll be easier to show you a good example of chunking, rather than try to explain it.

Each section explains a specific feature or benefit about their automation product. All of the content is easy to digest, and not a single JavaScript carousel in sight.

This approach is good for users, because they can quickly see what’s relevant or interesting to them. It’s also good for search engines because they can crawl and index everything.

What about mobile navigation drawers?

No doubt, you’ll be familiar with the navigation drawer (or hamburger menu). It’s basically content (your navigation) hidden by JavaScript and more and more these menu styles are appearing on the desktop experience too.

So, does this mean Google will start to ignore your navigation? Does that negatively impact how your site gets indexed?

Reading the announcement literally, this could be the case. But we know Google is clever enough to figure out what a navigation menu is.

So the short answer here is it’s ambiguous.

The RocketMill rule of thumb when accessing the SEO impact of anything ambiguous is to ask: “Is this good for my users?”

At which point, I think this post about hamburger menus from Techcrunch is interesting. The TL:DR is hamburger menus are a problem because content that is out of sight, is also out of mind. The proposed solution is tabbed content (a form of chunking), much like what we see with Facebook’s App UI.

Image credit: Techcrunch

Is all of your content displayed in tabs, carousels and accordions? How are you planning on tackling the SEO impact on this? Let us know your thoughts @rocketmill