Using JavaScript to Hide Content: Advanced White Hat SEO?

Oct 18, 2011   //   by Darren Slatten   //   Contests, Copywriting, Google, SEO  //  28 Comments

If you provide some kind of SEO-related services, there will come a time when your client or boss looks you in the eye and says something like this:

“Yeah, so about those page edits you recommended…

We’re actually quite happy with the current design of our landing page, and our tests have shown that adding text to the page actually decreases conversions. So…um…is there any way you could optimize this page…like…without adding all those words to it?”

To most SEO’s, the idea of achieving top rankings in a competitive niche–without putting keyword-rich content on the page–is unrealistic if not downright ridiculous. But from a design perspective, we also have to acknowledge that text and keywords are not always what’s best for Users. Sometimes, the best User experience comes from a simple, minimalistic interface with no distractions.

The Google home page itself is a perfect example. Arguably one of the most valued resources on the Web, and certainly one of the most visited, google.com currently displays a total of 25 words.

+You Web Images Videos Maps News Gmail More Sign in Google Search I'm Feeling Lucky Privacy Change background image About Google Advertising Programs Business Solutions

But what if Google was your client, and they wanted you to optimize their home page to rank for keyword phrases related to search engine

Would you recommend something like this instead?

Google home page with Wikipedia-style text

Hmm…no, that’s not going to work. So it’s kind of a Catch-22, isn’t it? On the one hand, you’re trying to satisfy your client and their Users by providing a slick, clutter-free interface…and on the other hand, you’re trying to be mindful of Google’s relentless addiction to plain text content. So what do you do?

Well, if you don’t know how to code basic JavaScript (or you’ve seen how bad Google sucks at reading JavaScript and thus avoid it entirely), then you probably pick content over User interface, pollute the page with stacks of keyword-dense garbage, and hope that the potential increase in search traffic eventually makes up for the immediate loss of conversions.

But what if you didn’t have to choose? What if you could fill your landing pages with SEO-friendly content…without it getting in the way of your Users?

Luckily, there’s a solution. It’s called hidden content.

* GASP! *

That’s right, folks…if you’re trying to improve your website’s User experience without hurting your search engine rankings, then you need to start hiding some content–ASAP. But you can’t just hide it anywhere–you need to hide it somewhere where search engines will see it for sure…but Users won’t.

Wait... isn't that SPAM?

That depends on a number of variables, but the short answer is:

No, it’s not spam. It’s not even gray hat SEO. Hiding content is perfectly acceptable, as long as you do it right.

Which brings us to the million-dollar question…

What is the right way to hide content?

Unfortunately, Google isn’t likely to provide a useful answer anytime soon. So you know what? I’m going to take a crack at it. Seriously. I’m going to make a genuine effort to lay down some technical guidelines for all the aspiring content-hiders out there, and I’m going to do so without pretending like “your intent” has anything to do with it.

So here we go. First I’m going to suggest the guidelines; then I’m going to provide a working example that incorporates all of these best practices.

Basic Implementation Techniques for Content Hiding

  • User Friendly – Hidden content implementations should improve the User experience and must not impair the User experience.
  • Dynamic – Hidden content elements must have a visible state–a set of conditions under which the hidden content is visible and readable by Users. The visible state must be capable of being activated by a browser event. The event should be automatic (e.g., document.onload) or it should be triggered by Users’ actions (e.g., element.onclick). In the case of Users’ actions, the trigger element should be conspicuous and intuitive.
  • Accessibility – Hidden content should not be implemented in such a way that it causes the content to be inaccessible to Users with disabilities or Users who rely on screen readers or similar devices.
  • Progressive Enhancement – Hidden content must default to a visible state when rendered in a browser that either doesn’t support JavaScript or doesn’t have JavaScript enabled. A document in which all hidden content elements are in the default visible state should provide a User interface that is functional, cohesive, and reasonably intuitive.

A Perfect Example of Hidden Content

If you don’t really understand the BITCH, don’t worry–I have an example for you. And this isn’t just any ol’ example; this is my attempt at creating a perfect example.

Let’s say you have a news blog with the 10 most recent stories showing on the home page. For whatever reason, you decide that the home page should include the full text of each post. The problem is…your Users are overwhelmed by all that text, and all they really want is an easy way to scan the latest headlines before they choose a story to read. The solution…hide some content!

This example has two versions: the original plain text version and the modified “hidden content” version. As you can see, the User experience is much better in the modified version, simply because it’s easier to navigate (especially on a mobile device that requires swipe scrolling). But the real magic is in the code, so take a few minutes to view the HTML and JavaScript source. Before you go check it out, I’ll leave you with some questions/concepts to think about:

  • Compare the HTML source between the two versions. What differences do you see?
  • What happens to the Hidden Content version when JavaScript is disabled?
  • What is the likelihood of Google flagging the Hidden Content page as suspicious or deceptive?

Plain Text Content

Plain text content example

Hidden Content

Hidden content example

 

Download the Hidden Content Example

The live examples linked to above are hosted on GitHub. This means you can easily download the source code files for your own personal or commercial use (files are released under a non-restrictive free software license). And for the truly advanced SEO’s out there: you can even fork it or suggest improvements via pull requests.

Download the Hidden Content example source code files!

Similar Posts:

Darren Slatten

Darren Slatten is one smart mofo. Some say he's the World's Greatest SEO. When Darren isn't studying SEO or web programming, he's usually busy developing online marketing strategies and web hosting solutions for local small businesses. Darren also likes to use keyword-rich anchor text in his guest blog bio links, but only when it makes local SEO for small business sense to do so.

More Posts - Website

"Newsletter" Our weekly newsletter features some of the best curated SEO content from around the web!



Comment Policy

  • Arfan says:

    This is a great tip, I implemented this on my “frontpage” using a FAQ model, so they could “read more” about the question they wanted but it helped rank the front page greatly.

    A similar thing that I find works is Ajax and excerpts of posts on the front page.

  • Justin says:

    A true pioneer. Great job, Darren.

  • Yousaf says:

    I have used similar technique on a few sites, including our own :)

  • Etienne says:

    I never skip a post by the legend called SEOMofo. What a great piece on progressive experimentation. Super stuff Darren!

  • @mario_luan says:

    Great post Darren!!!!

    What if the user search for a specific query, like “ABC1234″, and Google shows him those page with hidden content? (Imagine that the matched word for his query would not be visible in those news titles, for example).

    So, ok, it’s not “hurting” search rankings, but what about the user experience? In this situation, the user must click on addiotional links to see the (entire) content he is looking for.

    What about provide the hidden content using AJAX technology? We could build several URLs to “host” all hidden content and make sure that Google would provide the right pages/urls for each query/piece of content.

    • Darren Slatten
      Twitter:
      says:

      Mario,

      You bring up some good points.

      Regarding the User experience (in my example at least), the assumption is that a condensed version provides a better interface for most Users. In other words, the extra click that is required is a small price to pay compared to the alternative (scrolling through several screens of text).

      Regarding the use of Google’s AJAX crawling technique, it could work reasonably well for my specific example, but there are many cases where it wouldn’t be the best solution.

      One thing to consider is the fact that Google is one of very few Web crawlers that are programmed to handle this URI pattern correctly, so it’s difficult to justify a solution that wouldn’t work in all search engines.

      Also, the cost of developing a server-side solution (required to make the AJAX crawling possible) puts the AJAX technique out of reach for most websites.

      • Following up on Mario’s comment, I think his point is that users won’t know where to click to find whatever it is that matched their search. If it happens to be in the last article, it’ll be way more than one extra click. It’d be cool if the right article expanded based on the incoming query. And maybe highlighting the text too. I’m not asking for too much am I? What do you mean you already have a day job? :-)

        Thanks for sharing!

        • Darren Slatten
          Twitter:
          says:

          Following up on Mario’s comment, I think his point is that users won’t know where to click to find whatever it is that matched their search. If it happens to be in the last article, it’ll be way more than one extra click.

          True, in this case the Show/Hide functionality could actually hurt the User experience, but I don’t consider this to be compelling enough to abandon the idea completely. Here’s why:

          1. In the scenario you described, you’re assuming that the User would have to visually scan through the body of each article to find the information relevant to their search query. However, this assumption overlooks the fact that the User would be able to scan the headings first, and choose the article that is most-relevant to what they’re looking for. In a real use case, the User would most likely scan the headings first anyway, so the Show/Hide functionality would in fact benefit these Users, since it eases that process.

          2. In the scenario you described, there is no distinction between Google’s Users and my Users. By that I mean: I’m trying to provide the best possible User experience to all visitors–not just the ones coming from Google. What about the Users who have my site bookmarked and just want to see the latest headlines at a glance?

          3. The problem you describe isn’t unique to my example interface. For example, Google will rank a page for terms that never appear anywhere on the page. In those instances, no amount of scanning or clicking will reveal the Users’ search terms.

          However, the real takeaway here is that my example lacks a convenient way for Users to Show All/Hide All, and that brings up an important point that I hadn’t considered…

          My example provides 2 main views: (1) the one presented to search engines, Users without JavaScript enabled, and Users with screen readers, and (2) the one presented to Users with JavaScript enabled (i.e., “normal Users”).

          However, one could argue that an exemplary implementation of hidden content should provide Users in the latter group with an option to “downgrade” their view to that of the first group, and activating this option should require minimal effort. My example would fail this test, because as you pointed out, it requires 10 separate clicks to bring all content into a viewable state–not exactly a minimal effort.

          So yeah…I guess I need to update my code and improve the BITCH. Day job be damned! ;)

  • Christophe says:

    Hi Darren,

    Look good, thank you.
    Is your script free of use ?

    Cheers

  • David Leonhardt
    Twitter:
    says:

    One of my clients has something like this on his sales pages. He lists each of his packages, and their is a “more information” link to click for the details of a given package to appear. This was done 100% for user experience, not for SEO. I don’t think he even benefits SEO-wise, because those pages are generally not landing pages for the search engines.

  • Marbella says:

    I will not go near anything resembling withe hat which is really black hat. Google will always find these tricks and you will be blacklisted on Google.

    • Darren Slatten
      Twitter:
      says:

      I will not go near anything resembling [white] hat which is really black hat. Google will always find these tricks and you will be blacklisted on Google.

      Really?

      That’s weird…because when I look at your site with JavaScript disabled, I find 7 hidden content elements–each containing at least one keyword (specifically, the word “property”) and one link. So your home page is currently using JavaScript and DHTML to hide 7 links and 7 instances of one of your top-priority keywords.

      Sure, we can play the intent game and try to pass this off as an innocent slideshow, but considering the fact that your username is Marbella–which is a keyword you’re trying to rank for and not your actual name–I’m not sure you qualify to receive the benefit of the doubt. But let’s ignore that for a second and see just how white hat your site really is.

      Let’s see…

      – The only comments on your “posts” are trackbacks from your other posts.

      – Every single page on your site is either worthless or scraped content.

      – Keywords obnoxiously stuffed into every conceivable crevice.

      – Multiple posts consist of a single text string of ~500-600 words. Posts span at least 4 languages (English, Spanish, German, Swedish), are poorly punctuated, and contain no HTML code, which suggests this content is being scraped/aggregated from external feeds.

      – Overuse of internal linking, with no regard for usability. Possibly an attempt to maximize the SEO benefit from “syndicating” your “articles” on external sites.

      I think what you meant to say is: I will not go near anything resembling white hat.

      Your site is the epitome of low-quality garbage that Google desperately tries to avoid. Its sole purpose is to generate real estate leads for you, and it provides nothing of value to anyone else. Don’t kid yourself; you’re essentially a spammer.

      But yeah…thanks for commenting. <3

  • Hmerologia says:

    Are you sure this is a “white hat” way to implement?
    It look’s a little dangerous to me.
    Even if this trick doesn’t hurt a site right now i’m sure that very soon on next google’s algorithm update will include a way to penalize this.
    Thank you anyway but in any case i hate java and i most hate to use java for seo.

    • Darren Slatten
      Twitter:
      says:

      Nobody said anything about Java. The simple fact that you don’t know the difference between Java and JavaScript is a clear indication that you’re not even qualified to voice an opinion in this matter. Check your class schedule again–you’re in the wrong room.

  • Ileane
    Twitter:
    says:

    This one went over my head in terms of SEO. Nope I take that back – it just went over my head period. I think I need a video so I can “see” what your talking about, otherwise I’m lost.

    Thanks for sharing though, everyone else seems to get it and I’m SEO challenged. :)

  • Jim Maidis says:

    Thanks Darren for your perfect java example and the informative article. Very useful and simple as a pie. My opinion is that of course it is a ‘white’ method and i cannot see any problem by using it.

    Cheers!

  • Jim Maidis says:

    *PS: i meant ‘javascript’ of course. :)

  • Mike Guelph says:

    That makes sense to me if Google doesn’t have a problem with it. Makes it much easier for the reader instead of having one gigantic page.

  • M Massey says:

    This is perfect for my site! I want to offer more information on my products, right on the page where they can buy them, but I don’t want to have it all out there at once all around where people are trying to buy stuff. I want them to be able to learn more about something if they want to, not sort through everything to try to find what they need! This is exactly what i’ve been searching for thank you so much!

  • Torben
    Twitter:
    says:

    Very interesting post Darren. I have downloaded your code, but how do I set up the page? I don’t expect a full guide, but maybe you can give me a hint

  • So how could this be used in a Joomla website??

  • [...] Der findes en amerikansk SEO’er, der forsøger at løse paradokset mellem god SEO og Usability med det, han kalder Hidden Content. [...]

  • Brad says:

    Hi Darren, I’ve only just found your little gem of a website but I have been reading religiously since yesterday :)

    Have you done any performance testing with this content hiding technique? Would be interested in any follow up research you can/have done with it?

    Thanks

  • THANKS FOR SUCH A GOOD INFORMATION…

  • I have this huge chunk of content on the front page and really wanted decrease the amount of page being used by the text (which is stupid if yout hink about it) and your script came in handy.

    Just wanted to thank you for this.