What is "hidden text?" Can I hide text in HTML to get a top ranking?
What is “hidden text?”
Can I hide text in HTML to get a top ranking?
Hidden Text and the Search Engines’ Terms of Service
Using HTML Font Color to Create Invisible Or Hidden Text
Showing Hidden Text By Highlighting
Using Style Sheets to Create Invisible Or Hidden Text
Hidden text is textual content which your visitors cannot see, but which is still readable by the search engines. The idea is to load a Web page with keywords and keyword phrases that would be unsightly to visitors but that would improve the page’s rankings in the search engine results, and to do so without letting your visitors see the text. Hidden text is identified as search spam by each of the major search engines.
The simple and direct answer to the second part of the question is that you should not use hidden text. You may be able to trick the search engines for a brief period of time by hiding keyword stuffed sentences on your page, but you will risk having your site permanently banned from the search engines. As we state on our SEO Services page, search engine optimization is not a process of manipulating or tricking the search engines.
Below we will describe in detail the methods that misinformed webmasters and search engine optimization beginners often use to create invisible or hidden text in Web pages. The method worked wonders back in 1996 and 1997, before search engines were able to automatically recognize and defeat them. It was a time when search engines were eager to index as many pages as possible – to grow their indices as quickly as possible. Back then, all manner of spam was tolerated. As a matter of fact, the founders of Google specifically referred to the manipulation of search results as a factor that compelled them to create Google in the first place. In The Anatomy of a Large-Scale Hypertextual Web Search Engine by Sergey Brin and Lawrence Page, Brin and Page state that their first design goal is to improve search quality and later state that “any text on the page which is not directly represented to the user is abused to manipulate search engines.”
Google has some very clearly stated opinions about the use of hidden text.
From Google Search Central:
“Hiding text or links in your content to manipulate Google’s search rankings can be seen as deceptive and is a violation of Google’s Webmaster Guidelines. Text (such as excessive keywords) can be hidden in several ways, including:
- Using white text on a white background
- Locating text behind an image
- Using CSS to position text off-screen
- Setting the font size to 0
- Hiding a link by only linking one small character—for example, a hyphen in the middle of a paragraph”
Fortunately, search engines have been vigilant about fighting efforts to manipulate their results since 1997, and each method described below is specifically prohibited by each of the major search engines. Of course, Google has led the way in the fight against spam since the fight began. Using any of these techniques can result in your site being permanently banned from the major search engines. If your webmaster or search engine optimization consultant is employing any of these techniques, they are playing a game of cat and mouse with the search engines. As we say in our discussion of doorway pages, your website is the mouse.
We use none of the techniques described on this page. As a matter of routine, when we find a website utilizing any of these techniques, we file spam reports with each of the major search engines as a service to our clients. If you use any of these techniques, the same is likely to happen to you. Do not use them. If you are researching your competition, and you find that they are using any of these techniques, please report them to the search engines by filing a spam report.
Method 1: Making Font Color the Same As Background Color
The simplest and oldest method for creating invisible or hidden text is to use inline font codes to change the color of the text to match the background color of your web page. If your normal text is against a white background, then you simply change the color of the hidden text to white.
If you background color is white, i.e., bgcolor=”#FFFFFF”, then you use <font color=”#FFFFFF”></font>.
Click here to see an example of hidden text using Method 1.
Method 2: Making Font Color the Same Color As Background Image
A slightly more devious (slightly harder to detect automatically) method of creating invisible or hidden text is to set the background color of your page using an image and setting the font color to match it. In the example below, we use a small black square as a background image for the table, and have colored the text black using the HTML font color command: <font color=”#000000″></font>.
Click here to see an example of hidden text using Method 2.
Method 3: Making Font Color Almost Match Background Color or Background Image
After thousands of webmasters learned the hard way that Google was able to detect and penalize sites which used Methods 1 and 2 above, many altered their methods slightly. Instead of setting the font color to match the background color exactly, they set their font colors to almost match the background color.
Click here to see an example of hidden text using Method 3.
The idea behind Method 3 is that the webmaster or SEO consultant will be able to argue that they aren’t specifically violating the search engines’ terms of service. After all, the text isn’t quite invisible. Some also believe that they are thwarting the search engines’ software detection systems by changing the color of the text slightly. Neither of these assumptions is correct.
It is easy for a human to review your page and find your hidden text by simply “selecting” and highlighting the whole page. To see the hidden text we’ve just created above, click on “Edit” at the top of your browser window, and select “Select All.” Or, just hit Ctrl+A to do it quickly to any page. When you select all, invisible text will appear which was previously hidden because the page will change color slightly – it will be highlighted. Alternatively, you can use your mouse to select the invisible text between the arrows, and it will appear highlighted.
Since style sheets are now readable by most of the Web browsers in use today, many webmasters who would never consider using HTML font code to hide text are back in the spam game relying on the hope that search engines cannot read style sheets and automatically detect invisible or hidden text. We are confident that Google and other search engines are working hard on automated detection algorithms for the following class of search engine spam.
Even though there are legitimate uses for each technique presented in Method 2, misusing any of the techniques will result in your site being penalized when you are caught, and all it takes for you to get caught is for one of your competitors to report you by filing a spam report.
Method 1: Color Matching
The first method has no legitimate use, and is just a different method of implementing the techniques described above. Instead of using HTML font commands to make the text color match the background color, you can use style sheets to do so. With style sheets, you can control the font size, color, face, and style, and making a particular stretch of text hidden is as simple as matching its color to the background color. Using this method, your hidden text is easily detectable by simply highlighting the page as described above.
Method 2: Hiding a Div
The second method is much more interesting, and can only be done with style sheets. It is also more difficult to detect because simple highlighting will not cause the hidden text to appear. In Method 2, you create a division (div) of text on your page and place it off the viewable screen of the browser. There are three ways to do this: (1) use the position command to place the text off the viewable screen area; (2) use the “visibility : hidden” command to cause the browser to keep the text in the div hidden; (3) use the z-index command to place the text below the viewable layer.
Method 2(a): Positioning the Div Off the Viewable Screen
Using style sheets, you have the option to absolutely or relatively position any division. Using absolute positioning, you can simply position the text you wish to hide any number of pixels off the screen to the left of the window. Here is some example code:
position : absolute;
left : -1000px;
If you put that in your style sheet and then assign the class “hideme” to your div, then the div will display 1000 pixels to the left of the visible screen – i.e., it will not appear on the screen.
Method 2(b): Using “Visibility: Hidden” Style Commands
An alternative to the method above is to simply use the built in features of style sheets to hide your text:
visibility : hidden;
Again, if you put that into your style sheet and then assign the class “hideme” to your div, the text in your div will not appear in the browser window, but will be visible to the search engine spiders.
Method 2(c): Hiding the Div “Below” the Visible Layer
Another sneaky way to hide text from your visitors while keeping it available to the search engines is to put the text in a layer that is “below” or “behind” the visible layer. The horizontal and vertical dimentions of the viewable screen on your web browser are the X and Y indices. The third dimension is the Z-index. Instead of describing left to right (X) or top to bottom (Y) dimensions, it describes above and below or back to front dimensions for layers of Web pages. Think of a web page as being constructed of a stack of pages. Coding using the Z-index enables webmasters to keep text and images underneath or behind the viewable screen until the visitor takes some action, such as clicking a button or putting their mouse over a specific location. Then the Z-index can change, allowing the hidden content to become visible, giving the impression of interactivity.
Legitimate Uses of the Hidden Text Techniques Described in Method 2
There are legitimate uses of the techniques discussed in Method 2. You may want to have the text remain off-screen or hidden until the visitor clicks a button or performs some other action. Or you may want to build in navigation links for people who are using specialized browsers, for example speech readers or other browsers for the handicapped, and you may want those links to remain invisible to the rest of your visitors. When building for accessibility, it is common to keep some content and links invisible to normal browsers. For example, many accessible sites feature shortcut links at the top of the page which link to the navigation and content areas of the page, enabling speech readers to skip redundant navigation. Visit FindCounseling.com and view the source code to see an example of using hidden links to improve accessibility for people with disabilities.