Hidden Text and Search Engines : Everything You Need to Know

Hidden Text and Search Engines : Everything You Need to Know

Hidden text is one of the methods of SEO optimization and site promotion in search systems, as well as tactics to improve the usability of a web resource. In this article, we consider the peculiarities of this optimization, how hidden content works, how Google treats it, and how to hide text to reap the benefits without being sanctioned by search systems. You can read more information on sanctions in the related article Google Algorithms That Affect SEO.

What Is Hidden Text?

Hiding text is one of the most widespread means of optimization. It may include accepted methods, and black SEO approaches, for example, including keywords on pages to increase their rating. This content is not visible to the visitors of a web resource; however, it is analyzed by search robots. Read more information in the article about White Hat VS Grey Hat VS Black Hat SEO.

There are several ways to hide text. Some of them can be implemented without the use of CSS, but crawlers easily define such content. The most common mistakes are:

  1. The color of the font coincides with the background color;
  2. The applied text in the font size 0;
  3. Applying an image over the text;
  4. The method of hiding text with CSS;
  5. Applying style attributes, <div style=”display:none”> how to create hidden text .</div>;
  6. A link can also be hidden. It will start with “.” or “-”, etc.

Invisible content is intended for search systems. In these texts, keywords and phrases are used as often and many as possible, which is necessary for the search of a page.

Reasons to Use Hidden Text

Why is hidden content used, and who does it?  Webmasters apply this method for several reasons, among which are:

1. Filling hidden text fragments with as many keywords and phrases as possible. Their density on the site page will increase, and as it is assumed, the hidden keywords will promote the site.

2. Increasing site usability. The visual hiding of content on the site page is sometimes a necessary technique in web design and development. The hidden text will improve the user experience for content reading.

In some cases, this method is used to track data and user involvement. For example, an article with the link or buttons “Show” or “Read more” is published.

Google’s Opinion on Hidden Text

The times when content was widely hidden on web pages using white texts on white background have passed. Has Google changed its attitude towards the method of hiding text with or without the use of CSS?

Google’s manual for webmasters on the search for the hidden text says: 

If your site contains hidden text or links, it can be removed from the Google index, and it will not appear in the search results pages.

November 2014 John Mueller, Google’s leading analyst, and SEO expert, stated that the search system will not index hidden content. In Google+ chat, the specialist has once again confirmed this position. 

July 21, 2015 Harry Illies, an analyst on the Stack Overflow forum, stated that websites with hidden content have lower ratings.

July 27, 2015 In a separate discussion on the Stack Overflow forum, Harry Illies confirmed again that Google would index web resources with such content, but their value will be lower. 

Specialists at Reboot Online, an Internet marketing agency in London, conducted an interesting experiment. For six months, they compared the indices of websites with hidden content and text that was completely open to Internet users. Throughout the experiment, the “Read more” type of hidden text was applied – a portion of the text is visible, while the remaining fragment is hidden behind the button. Webmasters were checking CSS, textual field, visible text, and JavaScript that were hidden in 20 domains. 

The specialists also created a new word that Google had never detected before the beginning of the experiment. The term andefabribiles had become the fictional name of a new type of bacteria.


This experiment has precisely shown Google’s position on “ making CSS text invisible” and the advantages of having the text open to users by default. Google algorithms devalue the weight of hidden text through CSS and JavaScript. Interestingly, Bing and Yahoo do not decrease the weight of pages because of hidden content.

Poor Practices That Can Harm a Web Resource:

  • Oversaturation of text with keywords;
  • Using white text on a background of the same color;
  • Placing an image over the text;
  • The positioning of the text beyond the screen limits using CSS, for example, by shifting the text behind the visible part of the webpage; 
  • Using size 0 font;
  • Posting text and links intended only for crawlers (for instance, with the use of display: none);
  • Applying invisible or almost undetectable text oversaturated with keywords and phrases (tiny font size, hardly visible font color, etc.)

Support Ggoogle

It Is Allowed:

  1. To use the alt attribute for images.
  2. To duplicate content in the < noscript > tag using JavaScript for its uploading. Ensure that the information is identical when Javascript is enabled and disabled in the browser.
  3. To add descriptive text in the format of HTML (hidden text HTML) while using video on a webpage.
  4. To use a font of 14–16 px by default.
  5. To post readable content (the size and font are visible, not blurred with the background, and texts are within the page boundaries).
  6. The use of techniques to hide text fragments is allowed if it is necessary for site convenience. For instance, if a segment of long text is hidden, but can be opened to read a full version.

How Google Crawls Content Hidden with CSS from Javascript

With the development of algorithms, the search system has learned to read the context of site content like a human. Google search robots crawl not only the codes but also texts that are hidden behind the “Read more” button. It is crucial to eliminate elements that could hide text from users (like it is done using black SEO methods) to prevent a drop in ratings. If you use methods of hiding to improve site design and usability, there are alternatives. It is better to choose the method called “CSS hide specific text.” If you do hide text, keep it to the optimum keyword density of 5-7%.

How do You Hide Content in CSS

As well as the methods of hiding the text without the use of CSS. CSS is used to hide text because it is difficult for search system crawlers to detect such content. Here are some ways to use CSS to hide text:

  • Use the attribute display:none. 

<div class=”hiddentext” style=”display: none;”>This text is hidden </div>

One example of this attribute in use is creating printable versions of the articles on the site. It is possible to use the HTML version of the page and make it printable by applying the display:none attribute to the elements of navigation and ads of the page. This method is also used for creating the menu, e.g., DHTML.

  • CSS for positioning the text beyond the screen. Example of the code:



position: absolute

top: 0px;

left: -5000px;


  • How to hide the HTML element by using the display feature: to hide an element for the style display, set the value “none.” 

document.getElementById(“element”).style.display = “none”;

To show an element in the image properties, set the value “block” for the style display. 

Labirintami Shutterstock

How to Hide Content in SEO-friendly Manner

There are so-called white, or allowed, methods of hiding the text. They will not lead to the exclusion of the web resource for Google index and other search systems or the decrease of the site rating in the SERP.

To increase usability. Hidden text can improve site usability and be a part of its interface, such as the hidden block of a drop-down menu, pop-ups, or news announcements. The purpose of these techniques is not to manipulate the positions of the web resource, but to improve usability. It is possible to use ready-made scripts, for example, Prototype, jQuery, and others to create multi-level menus, pop-ups, and other effects.

Here is a video from Google webmasters on how the search system processes hidden fragments of the text, the bulk of which becomes visible after clicking on the button:

The speaker states that in general, such techniques are allowed and do not contradict the recommendations of Google for webmasters if they are not used with the intention of manipulating the site rating.

To manage the relevance. One of the white methods of managing site relevance is to hide part of the text from search robots. It can be contact information on satellites when the main domain is promoted. To hide the text from Google, use tags to close indexing, i.e., <noindex> and <nofollow>. Content can also be displayed as an image with the help of JavaScript and Flash.

The main thing when hiding content CSS, or JavaScript, or HTML, is if the text is visible on the site. You can do this not to hide the text from users but to improve the interface and site design.

One question that could come up is the scenario used while hiding the content. It is crucial to take into account that users may have the scenarios switched off. In these cases, it is recommended to use the <noscript> tag around the copy of the text. That way, it will be displayed for users who do not have scenarios enabled. For testing, use the browser (for instance, Lynx) or NoScript extension for the browser.

Important: If you have not published the hidden text, your system could have been hacked. Check for the presence of viruses on your site, in particular applying webmaster reports, and changing access passwords for the control panels of the site, hosting, databases, and FTP. 

Google Mobile-First Index and Hidden Content

Before deciding to introduce hidden content, take into consideration the Google Mobile-First index.

More and more users are using mobile devices instead of their PCs; therefore, Google develops new ranking indexes and algorithms. In 2017, 50,3% of Internet traffic in the world was generated by mobile devices, as they are accessible. This figure is growing consistently.


Due to the popularity of mobile devices, we can assume that with the use of the site mobile version, Google will pay more attention to drop-down menus, menus with tabs, and other forms of hidden content. John Mueller also confirmed this.

This statement makes hidden content even more valuable, as it provides web developers and SEO specialists with more possibilities of positioning content, improving the visual aspect of a web resource, and ensuring positive user experience. Read the related article about Mobile-First Indexing.

How Sites Should Use Hidden Content and Enjoy the Benefits

Place valuable information with the optimum density of keywords and phrases. Remember, hidden content should be purposeful. Provide users with the ability to read the information in full if you add the link or button on a page. Adapt the site for mobile devices, read more information in the article about How to Keep Your Site Fast for Mobile Devices.

When used strategically, hidden content improves the user experience. Do not try to get around Google, and manipulate the ranking, use this technique to benefit from it.

About author
Since 2017, Mary has been actively engaged in marketing and SEO. She closely works as a freelancer with IT companies that focuses on the American markets. Years of work in copywriting led her to online marketing and its constituents such as SEO.