Can Hiding Elements on a Mobile Site Hurt Your Rankings?

There’s some confusion about hidden content for SEO, and how it interacts with mobile web development and indexing. I’ve decided to write this post to cover the issue and hopefully shed some light on the situation.

The Risk of Hidden Content

Hidden content has long been a forbidden practice on websites, primarily because of past abuses. It’s a story that has been around as long as Google has; something comes about to abuse the search ranking algorithm, and Google updates the algorithm to penalize sites that are abusing it. It happened with keyword stuffing and the meta keywords field, it happened with tiered link building and private blog networks, it happened with thin content and content spinning, and everything else that’s penalized today.

Hidden content was a huge risk because it formed a disconnect between what Google’s indexers see and what the average user sees. Google wouldn’t, in the past, take into account the formatting or positioning of text, just whether or not the text (or other elements) existed.

Shady black hats took this loophole and abused it to get content ranking for queries it shouldn’t. They would write paragraphs or pages of text, sometimes full blog posts and other times just keyword lists, and hide them. I’ve seen text made to be the same color as the background, text shifted far to the left or right, top or bottom. I’ve seen CSS used to make the font size zero with no text spacing, so it looks more like a period than a sentence. I’ve even seen text hidden behind images or other elements where it’s impossible to see or interact with unless you somehow block that element from loading. Possible reasons included:

  • Keyword spam. Wanting to rank for content that you didn’t write could lead to wanting to include keywords that aren’t relevant to the content. This was a lot easier to do back when Google analyzed content based on keywords and nothing else, rather than the modern, more semantic-based approach. As usual, more sophisticated algorithms make it harder to pull off basic techniques.
  • Keyword abuse. There are other reasons you might want to include keywords you shouldn’t. For example, if you spam a few cases of your competitor’s brand name, you could potentially rank for their brand name in Google’s search results. At least, you used to be able to; that hasn’t really happened in a long time.
  • Link cloaking. This is especially prevalent on sites that like to exchange or sell links, or for thin sites made as part of tiered link building or a link wheel. Hiding those links makes the site look more legitimate at first glance, and can even potentially fool some of the people working to refine search algorithms. It was also used to get several unrelated businesses, all owned by the same company, to share SEO value illegitimately.

All of these reasons are spammy uses of hidden content and, naturally, are penalized by Google.

The goal was that Google would see that content and index the page based on it, and would rank the page higher for queries involved, when the actual content of the page as viewed by a web user would have nothing to do with the topic. Obviously this is abusing the loophole and is penalized.

When Hidden Content is Safe

Hidden content can be safe in some instances. I’m sure you’ve seen and interacted with some of them, in fact.

  • Hidden navigation. Every time you have a navigation drop-down that has a bunch more elements hidden behind the first, it’s technically hidden content until it’s revealed.
  • Subscription gates. Sites with subscription content often want to attract new readers through the search results, so they allow a “one free visit” before the subscription gate closes in. Some major news outlets do this, with five or ten free visits per month before you’re locked out of everything new. Granted, there are a bunch of other problems with subscription content these days, but this is one legitimate use of hiding content.
  • Legacy compatibility. Some devices are unable to render Javascript or Flash, while others might not want to work with cross-site scripting or CDN content serving. Rather than simply fail, a backup of the content is hidden but available in case it’s necessary. It’s hidden content but, again, hidden for user accessibility.

Picture a frequently asked questions document. A lot of times on the modern web, an FAQ is going to have all of the questions listed out, but the answers nowhere to be found. In order to view an answer, you need to click on the question.

In the past, that question might have been a link to a separate page with an answer ranging from one sentence to a full blog post in length. Most of the time, this was caught and penalized as thin content, so techniques have changed. These days, the question expands and the answer appears on the page.

The answer was always there, simply hidden behind a collapsible element. This is, at first glance, hidden text. There are two critical differences, however.

The first difference is that the text is not irrelevant or spammy in any way.  It’s a simple answer to a relevant question, and is thus an important part of the page.

The second and much more important difference is that the answer is not actually hidden. It’s invisible when you first load the page, but it’s easily made visible when the user wants to see it. The intent is not to hide the content and game the search algorithm, it’s to make the page easier to navigate.

This is an example of how Google rates similar concepts differently. In one case, hidden text is an abuse of a loophole and is penalized. In the other, it’s a benefit to user accessibility and the user experience, and is a benefit to the page.

Modern Responsive Design

Modern responsive design is based all around dynamically adjusting elements of a page. If you visit a website that has a responsive design, you can resize your browser window to see how different elements disappear and reappear at different sizes. Usually the first element to go is the navigation; mobile navigation requires a very different design than desktop navigation due to how users interact with their devices.

After navigation, media-heavy elements of content disappear. Autoplay videos shrink or disappear, large images and lightboxes disappear, and so on. Eventually, all you’re left with is text and maybe some social media links or something. This way even the smallest and lowest power devices are capable of using the page.

There have been a few case studies and articles written about this and its impact on SEO. See, when you load the page at a small scale, those dynamic elements still load, they’re just hidden. Even if you load the page on a mobile device, that content is generally lazy loaded in the background in case the user wants to see it. Yet without being able to expand the window, it’s possible that the content is never accessible.

Couple that with Google’s new mobile-first indexing, you can see how this might look like a problem. Content that’s inaccessible but is indexable? Sounds like a penalty to me! Even big names in marketing think this can be a problem.

Modern Solutions to Modern Problems

Google is a lot more sophisticated these days than it was a decade or more ago, and you can bet they have thought of and come up with solutions to various issues like this. With responsive design specifically, it’s easy to see that the intent is not to cloak content, but to make for a better mobile user experience.

Google is, in fact, pushing ever harder for mobile compatibility and mobile device accessibility. Their whole mobile-first indexing policy shows this more clearly than ever before. So how do they get around the responsive design hidden content problem?

Essentially, they just compare it to the desktop version of the page. As Google says, “…if the content is visible on the desktop version of your site, we can crawl it and use the information for ranking your mobile site as well since we can share indexing signals between desktop and mobile versions.”

Again, it all comes back to intent. If your goal with hiding content is to game the search algorithms in an attempt to rank for some reason you normally wouldn’t, be it a keyword you don’t normally use, a link you shouldn’t have, or whatever, you’re going to be penalized. If your goal is to present content in a way that a user finds easiest to access, with additional information hidden until the user wants to read it, that’s fine.

Does Mobile-First Change Anything?

If you’re keeping up with SEO news, one of the latest big shakeups is the new Mobile-First Indexing update. Google has decided to push mobile compatibility even more, especially since the majority of their users are now browsing the web using mobile devices. When over 50% of your users use one device type rather than the other, it’s a simple decision to focus on them first.

Mobile-first is a little tricky. Google is simply giving indexing preference to sites that have mobile versions. It’s not a comparative metric, though; it doesn’t give you more value for having a mobile site than your competitors not having one, any more than you currently have. Instead, what they do is simply change their index such that the mobile version is the “primary” version of the site, while the desktop version takes the back seat.

In practice, this doesn’t really change much. Very few websites are going to have a mobile version without having a desktop version, it’s simply not done. You leave too much traffic on the table ignoring either one side or the other. Mobile users will still have the mobile version show up as the default when they search, and desktop users will still see the desktop version first. It’s simply more encouragement in a hazy way typical of Google, to push people towards mobile compatibility.

With mobile-first, Google probably isn’t changing anything. They will now give preference to mobile versions of sites rather than desktop versions whenever possible, but they won’t be penalizing anymore any more than they already are if they don’t have a mobile version. Google can still compare the mobile and desktop versions and identify when “hidden” content is actually just an accessibility feature, and they’ll take that into account.

Do you have to do anything? Not really. If you have a mobile version, you’re good to go, regardless of whether or not any of the elements are particularly hidden as compared to a desktop view. If you don’t have a mobile version of your website, it’s well past time to develop one.

The only instance where you should make a change is if you find you have hidden elements or hidden text or links on your site, hidden in a spammy way. Maybe your web developer or marketer hasn’t progressed since 1998, or maybe you were hacked and the hacker simply added spam content to your page. Ideally you will have noticed this a long time ago and abandoned the technique or fixed the problem, though, so it shouldn’t be an issue in 2018.