Click-To-Expand SEO – Is it Good Or Bad?

Reconciling the UX of a website and at the same time optimizing its natural referencing requires some sacrifices for one or the other, especially when it comes to content.

A text optimized for natural referencing is indeed essential on the pages of a website to improve its ranking on search engines. On the contrary, web designers would do well to keep the visual aspect of the site as clean as possible. Hidden text can be used as a means of reconciling the two.

If the user experience is clearly not sacrificed, one can however wonder if the SEO of a hidden text is just as effective as a visible text.

We’ll give you an answer to that question, but first, let’s see what hidden text is.

What Do We Mean By Hidden Text?

When we talk about hidden text, we are not referring to the Black Hat SEO technique which consists of inserting the text of the same font color as that of the background of the page or using font sizes so small that the text becomes invisible.

Obviously, by doing this, you’ll be violating Google’s recommendations and will run the risk of penalties.

Here, we are referring to the partially hidden text which becomes visible after an action on the part of the user. It is used a lot in FAQs. It can also be an extract of content followed by “learn more” or “read more” button. By clicking on the button, the entire text will appear.

There are several Blackhat techniques for producing hidden content:

Putting the text to be hidden in the same color as the background of the site (white text on a white background for example). The content literally blends in with the colour scheme of the website. It is the simplest and oldest technique. The development of new languages (CSS and JS) has opened the way to other, more complex techniques.
Placing text behind an image using CSS.
Placing text outside the screen using CSS.
Embedding text in 0 font is another, fairly basic solution.
Using the NoScript tag.
Resorting to IP Cloaking.

Till a few years ago, when the Google algorithm was not this sophisticated, the above mentioned Blackhat SEO techniques were able to manipulate Google. Websites employing them were able to rank for certain keywords not visible on the page.

Gradually, as the Google algorithm became much more advanced and sophisticated, it was able to detect spammy tactics aimed at fooling it.

Does Google Penalize Hidden Content?

How does Google treat content that’s hidden? This is a question that has confused SEOs for a long time. If a page has hidden content, does Google not crawl and index it? Or if it’s indexed on Google, does it contribute to the ranking?

In 2013, Google’s Matt Cutts finally put an end to all the speculation and revealed that as long as you’re not trying to stuff something in a hidden way that’s deceptive and manipulative or trying to distort the rankings, Google does not penalize hidden content. If you’re doing that to improve user experience, there’s nothing to worry about.

However, if you’re using a tiny little button that users can’t see and there’s like six pages of text buried in there and it’s not intended for users, then that is something that will consider as hidden text.

If you’re using Blackhat SEO techniques like making your text and background of the same colour or setting the text font size to 0 or to a negative number, you will be penalized by Google. Your website will be removed from the Google Index and will not appear in SERP.

How To Hide An Element With CSS In An Accessible Way?

In creating a site, the need to hide elements in the HTML code is recurrent. There are several ways to do this with CSS, but not all of them are correct.

A common method, which is wrong, is to use display: none to totally hide the desired part of code. This technique is inaccessible because it eliminates the element from the page as if it did not exist. Most bots finding an element with display: none will skip it without reading it.

1. position: absolute

The simplest solution is to use position: absolute instead of display: none.

.skip {
position: absolute;
left: -9999px;
}

This way the screen readers will continue reading the hidden element.

2. text-indent:

An alternative solution for hiding a page element may be the text-indent property, with a negative value.

.skip {
text-indent: -9999px;
}

This method is sometimes used to keep the container element on the page, making only its textual content disappear.

3. Hiding text with JavaScript

A final aspect to consider is the management of page elements that appear only after a user action, using JavaScript.

It is wrong to hide them with CSS: if these elements (for example a drop-down menu) appear thanks to JavaScript, they must be hidden when the page is loaded according to the same principle.

The simplest technique is to use JavaScript to assign a class to the desired element and then hide it (without using display: none) via CSS.

Final Thoughts

Numerous experts from Google have iterated the fact that Google does NOT penalize hidden content if it is not done in a manipulative and deceptive manner.

If the content is hidden to improve the UX and with employing any Blackhat SEO practices, it will be crawled by the Google bot and get indexed.

Hidden content will also help in boosting Page Authority and therefore contribute to ranking, provided it supports the keyword the page has been optimized for.