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!