Can jQuery Hidden Divs Hurt Your SEO?

Published May 31, 2014 by Mitchell Wright in SEO
1
The views of contributors are their own, and not necessarily those of SEOBlog.com

To those with a passing knowledge of SEO gleaned from cursory searches of the last decade of search engine advice, the phrase “hidden text” is terrifying. It conjured images of invisible keyword lists and strict Google penalties that ruin the life of a site. On the modern Internet, however, there are plenty of good reasons to use hidden text. More importantly, Google understands that they are perfectly legitimate and doesn’t penalize you for them. So, how can you tell if you’re angling for a penalty or if you’re on the safe side of the search law?

What is a Hidden Div?

A div, for this purpose, is just a segment of text or an image you want hidden, enclosed in the div tag. A hidden div is one that, when you visit the page as an outside, is hidden from view. It might become visible when you click a button or fill in a form. It might be used to accordion text snippets for easier viewing, or to hide an expandable table of contents. It’s also very often used in FAQs, where each question has a hidden div including the answer beneath it. One of the most common modern uses of a hidden div is to provide a mirror of the content in the Facebook comments plugin which, residing in an iFrame, is hidden from Google’s indexing normally. There is nothing black hat about providing Google with the comments on your page, particularly when users can see them as it is.

Unfortunately, there are just as many ways to use a hidden div in an attempt at black hat search manipulation. Hiding keyword stuffed content is the main offender.

Google has gotten wise to many of these tricks. They can tell the difference between legitimate hidden content and black hat hidden content. It’s all in the content itself; if you’re hiding it because you’re ashamed, it’s black had and should be removed. If you’re hiding it for layout, convenience or form reasons, it’s legitimate and you’ll be fine.

The Issue of Indexing

The-Issue-of-Indexing

For a long time, Google would cheerfully index hidden divs. Then they made a change and started penalizing all sites with hidden divs, regardless of context. Then they backed off and stopped penalizing sites, but the question as to whether or not they index hidden content is still up in the air.

The answer seems to be that Google will index any hidden content it can find, though some forms of hiding it – raw JavaScript rather than jQuery, for example – obfuscate that content, as Google doesn’t execute scripts on your pages. Of the content Google indexes, however, only a small percent is actually parsed and factored into your search ranking.

One thing you can do to test if a search engine sees your content or not is to disable JavaScript in a browser and load your site. That’s a closer approximation of what your site looks like to search engines. Try to configure your content such that anything you want seen is visible by default, rather than hidden. You can still keep some content hidden – particularly content you want hidden behind forms and kept away from the general public – but you should keep the majority of it visible.

Black Hat Uses of Hidden Text

Black hats have been using hidden text as long as there were search engines to try to fool. Every hidden text method worked, for a short time, before the search engines grew wise and penalized the sites that used them. Some examples of hidden text you want to avoid:

  • Same color text. Set your background color to black and your font text to black. From a user’s perspective, there’s nothing on the page, unless they think to highlight the text. From the search engine perspective, the text is in plain view. This was usually used to hide a list of keywords stuffed in for value. An alternate version of this, using images as backgrounds instead of text, sprang up when search engines started detecting when bgcolor and font color were the same. Another variation left the colors very slightly different; almost undetectable by the human eye, but still visible to search engines. Again, this stopped working.
  • Color matching or hiding a div outside of the usual viewing area. Some websites would put a div skewed far to the right of a web page, rendering off the screen of all web browsers. If the user never noticed the horizontal scroll bar, they would never know it was there.
  • The Visibility: Hidden CSS command. Again, another way to make a div invisible. This can be legitimately used, but it’s also easy to misuse.
  • Layering elements. Using the Z index to position an image over top of a snippet of text effectively hides that text from users. Occasionally this was used in lieu of alt text for images, or for text to speech readers.

Of course, spamming keywords or shady links in any of these areas is decidedly black hat and will get your site penalized. Thankfully, they’re all old methods that no sane web developer would bother with today. JQuery hidden divs work much better, with much less code, and with legitimate uses.

Ignoring the Hats

Ignoring-the-Hats

The biggest problem with the modern SEO industry is the large amount of information that’s been published and is now out of date. Google is an ever-evolving, very sophisticated hybrid of crowdsourced decisions and machine learning software. Within the algorithm, there is no simple if:then statement for categorizing a site as black hat or white. It won’t take a look at your site, see a hidden div and immediately penalize you. It’s all about context, and context is something Google has worked very hard to understand.

This is something that applies to every aspect of SEO. Google can, more than likely, read and understand your intentions. If you are taking steps to promote your site in a manner that circumvents their rules, you’re going to risk penalties. If you’re doing something that could be categorized as black hat, but you’re dong it because it provides value to your users, Google is more than capable of making the judgment based on context. Too many webmasters are afraid of making use of very useful snippets of code, simply because someone ten years ago used it for a nefarious purpose.

Just think of it this way; you aren’t going to trick the robot. You won’t convince it that something you’re doing is good if it’s a black hat technique, and you won’t convince it something you’re doing is bad if it’s a perfectly legitimate practice.

Yes, Google does make the occasional mistake. In these instances, it’s easy to take steps to repair your site ranking. You can, with relative ease, make a case for redetermination and have your ranking restored. Further, if they do flag something you’ve done, it shouldn’t be a problem to change something minor to distance yourself from the item causing the penalty. Sometimes it’s as simple as embedding your divs in your site rather than calling it from an external source.

Written by Mitchell Wright

Mitchell Wright

Mitchell loves all aspects of Internet marketing and have been involved with everything from ORM to SEO to video and affiliate marketing. He currently works with bloggers to increase their ad revenue.

  • Jake

    Well written, thank you

Like us on Facebook
Follow us on Google+