Hidden text is one of the oldest black hat SEO techniques in the book. Anyone old enough to have been browsing the web in the early 00s, when Google was big but their algorithm was much less refined, you would probably remember all of the ways people tried to game the search results. One of them was to create massive lists of keywords, or even entire stolen articles, and hide them on the page. Sometimes scripts hid the content. Sometimes it was as simple as black text on a black background. Sometimes the site owner set the font size to 1 so it was little more than a black line. In any case, it quickly became apparent that hidden or invisible text was never aimed at users, and was always made to influence search in an inorganic way. Google quickly put a stop to it.
Since then, advancements in technology have given website owners a few ways to hide text in a way that’s friendly to users. Essentially, there are reasons you might want to hide text without hiding it from users. The most common example is this one. On that page, you see an example of a series of questions with no answers. It’s an FAQ.
With an FAQ, you have three options for displaying the answers to the questions. The first option is to have them there, visible and ready to be read and scanned. This is fine, and it’s what most sites do these days. The second option, which was a lot more common a few years ago, was to make each question a link and direct that link to a page that answered the question. These days, this isn’t a great option, because it often means a dozen or more pages with only 100-200 words on them, which would be considered thin content as far as Google is concerned.
Now, you can still do the link method, so long as the articles at the other end are full length. This means the answer to each question would need to be at least 1,500 words. If you can pull that off, you likely have the basis for a pretty strong SEO presence. However, if you make the content too overlapping from one answer to the next, or if it’s full of meaningless fluff, it’s going to hurt you as well.
The third option is what is listed on that FAQ page: hiding the content. The questions are links, but rather than taking you to a new page, it just expands the space under the question and puts the answer there. You can do this using hidden DIVs and jQuery.
Google’s Stance
What does Google actually have to say about hidden text these days? After all, it has been quite a few years since it was a big problem, and most people have moved past the idea of using it.
Google’s official page is part of the quality guidelines and can be found here. For the sake of this post, I’ll summarize it for you.
- Hiding text and links on your site can be considered deceptive and is a violation of the webmaster guidelines.
- Methods of hiding text include matching font and background colors, placing an image over the text, using CSS to position text off-screen, setting font size to 1 or 0, or hiding a link by only linking a period or another small character.
- Not all hidden text is considered deceptive. Text hidden behind scripts or in Flash files can still be valuable to users.
- Google recommends any text hidden within a script or video should be posted as plaintext as well, using <noscript> and other methods.
The primary guideline is whether or not the text is visible on your site. In the case of a jQuery hidden DIV with an expand link, the text is made easily visible, and thus is not considered hidden. You’re doing it not to hide the text from users, but to make your user experience and your site design a little better.
One issue you may run into is the script you use hiding your text from users who don’t have scripts enabled. In this case, you will want to use the above <noscript> tag around a copy of the text, so that users without scripts on can still see it. To test, use a browser like Lynx or use a NoScript extension for your browser and see how your site looks.
Guidelines to Follow
There are a few guidelines you should follow when you’re hiding text using scripts. Make sure you keep them in mind and use this as a checklist when you’re done, to guarantee you’re not breaking the rules.
First, make sure to avoid the signs of black hat manipulation Google lists above. The matching colors, font sizes, and other issues are all easy for Google to detect and penalize, and will hurt your entire site. Don’t even experiment with them; even if your search ranking is hurt for a few days, the loss of trust makes you less resilient to future issues or to competition.
Next, make sure to include a plaintext copy of the text you’re hiding within <noscript> tags. I can’t stress this enough. This makes it visible to no-script users and tells Google that you’re not trying to hide text from users.
Third, consider whether or not the content actually needs to be hidden. Why are you hiding the content? Is it going to break your layout if it’s all visible at once? If so, maybe you should work on making your layout more flexible instead. Is it too long for a single page if it’s all visible? Perhaps it would be best to split into a few distinct pages. Is it all variations on a single theme, such as troubleshooting information for various models of the same product? It might be a better idea to consolidate them into one page listing all of the models for which those steps apply.
Finally, keep in mind the way users browse a site. When they’re looking for a specific piece of information, they’re going to skim for it. If they don’t see what they’re looking for, they’re a lot more likely to go back to the search results and go to the next promising looking page. They aren’t going to go on a scavenger hunt through your “read more” and “click to expand” links.
Always remember that Google is prone to devaluing content hidden behind scripts, even if you provide the <noscript> version. They have mentioned before that hidden content will be indexed, but will likely be given much less weight than the visible content, specifically because it’s hidden. This holds true regardless of the purpose of the content; it’s only when the content itself is designed to game the search engines, such as keyword lists and numerous links, that you get into penalty territory. In other words, even in the best case scenario, you’re not getting the full value of your text.
So when should you use hidden text?
- User reviews for products can be truncated to 100 characters or so and hidden with a “Read more.”
- Transcripts for a video can be primarily hidden, if the video is not the main focus of the page.
- Any page that is NoIndexed by default – such as back-end support or members-only content – can be hidden as much as you want, since Google isn’t going to be indexing the page to begin with.
- Drop-down text in menus and navigation is perfectly fine. Google is only concerned with “core body content” that could be hidden and shouldn’t be.
Another notable exception is mobile pages. If you’ve ever browsed a mobile page on Wikipedia, you will notice that the only primarily visible section is the introduction section. Each subsequent section is hidden behind a drop-down that expands when you tap on it. This is considered just fine as far as Google is concerned, because it’s condensing a lot of text that could take a long time to scroll through to find what you want. Instead, users are able to simply scroll to the section they want to see and expand it.
How to Hide Text Using jQuery
The easiest way to hide text is to use a DIV and some JavaScript/jQuery to hide it by default. For this example we’ll use the FAQ idea, though again, hiding primary site content like that can be detrimental to the page.
First, you will need to call the jQuery library at the top of your page. This will be a line that looks like:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
At the top of your page. However, if you’re using WordPress, Drupal, or another major CMS, chances are it already has jQuery enabled for other functions and for plugin usage.
Next, still at the top of the page, you will need you start your actual script. This will have a <script> opener and some code, found on this page. You can see the function at the top that determines how the answer part of the FAQ opens and closes wit hits animation. Below that you see the </script> tag, ending the script.
Then you have the CSS you need to integrate the script into your content. There are two bits in the style section; one for the question and one for the answer. Format these however you like.
Finally, you have the individual DIVs. These go down in your content. The DIV has a class that references the script, in this case faq_container. Within that is the faq class, and within that is the class for the question and the class for the answer. Each of these has script elements associated with it above, so none of the formatting or scripting needs to go in the div itself. You can see where the “question goes here” and “answer goes here” entries are; that’s the plaintext you’ll see when the question is expanded. Repeat the entire div structure for each question and answer set.
There is also a method you can use to replace the text within a box or below a certain point depending on the link clicked. This is typically used for a tab-based layout, though it can be used in a variety of ways, up to the limits of your imagination. Rather than explain the code here, I’ll just link you to another example page on GuideFaq.com (now SpringShare.com). You can also see a master list of different toggles and hidden DIV examples here.
At the end of the day, there are a huge number of possible ways you can toggle visibility on a piece of text. Fancy new HTML and CSS features can involve fade-ins and other scroll-based content. Hello bars, slide-ins, and lightbox pop-overs are all common uses of “hidden” text, but once again, none of these are the core content of the page. They are all additional CTAs and attempts to get people to register for mailing lists. As such, Google would just as soon ignore them as index them, and you don’t really care if they show up in search.
Honestly, most of the reasons to use hidden text are largely meaningless. You’re also going to run into the issue of site speed when you’re loading scripts at the top of your site. The script has to load in order for the content to load, and the content has to load before Google will consider the page to be fully loaded. You’ll have to play with asynchronous loading if you want to keep all of your page value from fast loads.
Should you hide text? You can if you want, but I wouldn’t really recommend it. Only do it on pages that don’t matter, or for content that isn’t important to the page. It’s okay to do for supplemental content or to cite sources, for example, and can be used for things like video transcripts, but shouldn’t be used for the main content on the page.
