Hi. There is a legitimate technique is css where one uses a background image rather than a regular image. This is because handicapped screenreaders don't read background images, but they DO read regular images. So using background images is recommended, legitimate programming because it prevents a screenreader from reading unnecessary images to a blind person. That said, they also recommend that one uses image text replacement, where someone fills in content/words in the area with the background image that describe the image, but also sets the text's property to "hidden". With this technique, regular users see the image and people with screenreaders do not see the image but rather a textual description of the picture or it's meaning. This is similar to the alt tag, except that I can set this hidden text to be a bold <h2> which search engines give heavy weight to. I think most get where I am going with this by now. It's a perfect way to show search engines one thing, and users others things. My question is, does anybody know if Google or others will penalize a page that hides text, even if it is for a completely acceptable, legitimate, standards based reasons? Also, how much do search engines read external style sheets? Are they dilligent enough to do this or are they too lazy and just simply read the actual content on the page itself? I ask this, because the invisibility spec is set on the external style sheet, and not the html page itself. All the html page has is the big honkin text on it and no spec for any images (all background image entries on the external style sheet) and it's a spec in the external style sheet that hides this text.
Eric Enge just did an interview with Matt Cutts about hidden text. You can get to it via - www.voasi.com
Where do you find this stuff? Is this a legitimate statement or just a teaching from a guru? I think this is quite a non-legitimate teaching. Background images are mostly have no meaning. It may be abstract or something like that. Thus, what's the point of giving a text to it? You might even be considered stuffing keywords. In another word: "It's a perfect blackhat technique". Google has clearly stated that Google hate sites that display difference things to the bot and visitors. I've also always wandering about this. But I will never take the step of tricking it. My programming skill won't be more advance than multi billion company's.
Hey there, If you are trying to find a way to trick search engines, your time will be better spent building quality content. Crawlers can not interpret JavaScript from my knowledge. The only way they could tell if something is hidden or not is by looking at the css for a specific part of the site. For example, let's say you have a DIV with class MY_DIV. It would be pretty easy to find that information in your style sheet. Then, once that is found, just looking for the display property and see if it is hidden. I try to stay away from hidden text as much as possible. I would never use keywords in hidden text no matter what. In addition, I would never use an important image as a background image. You will want your important images to be picked up by google and placed in their image search results. Sincerely, Travis Walters
Hi there Travis. Agree with you. However, I'm wandering though If I use triple nested div with many inherited and overloaded css, that might be very "deep and tricky". I wander if the bots can detect the hidden text or not. I'm not trying though, will never do, I'm just wandering. Any experiment on this?
Hey there, Do you mean something like <div class="myHiddenDiv"> <div> <div> Some keyword here </div> </div> </div> I know programatically it would be easy to figure out. All you have to do is look at the top DIV and see that is hidden. If I was creating an alogrithm for a search engine, I would look for a hidden attribute in the display. If I found one I would look at all inner DIVs. It is pretty easy to delete all CSS and HTML markup between the hidden DIV layer to see what is actually there. Sincerely, Travis Walters
Quite similar, but not quite I mean. Let's say it's nested as Class1, Class2, and Class3. Class1 has blue background with red text. Class2 has no background and green text. Class3 has class2 inherited background and blue text. That will make the text seems "hidden". I know I can read it and find out that it's hidden, how matter complicated the css is. But I'm wandering whether the bots can or not.
Hey there, Yeah, I am pretty sure the bots could see that is hidden text. I know I could programatically determine the foreground and background color of a particular div layer, whether they are nested or not.. So If foreground color = background color, then text must be hidden. Sincerely, Travis Walters
SolomonZhang (#7), I don't think search engines are capable of detecting such tricks. It'll probably be too complicated for those, unlike tricks such as visibility="hidden" and the same colour for text and background within the same tag, which can be easily recognised. Would it work if you'd pull a trick to hide text with CSS and put the stylesheet in a directory that is excluded from being crawled via the robot.txt file?
Hey there, A crawler is a program correct? Not just any program, but a sophisticated one. It is probably more sophisticated than javaScript. Even though a CSS file may be in a directory that is excluded by robots.txt, what stops that crawler from using a script to tell if a DIV is hidden? With programming, anything is possible. I would not try to trick the crawler. Sincerely, Travis Walters
I would not try to trick the search engine also, if crawler detect this it will be game over for your website.
That makes me thinking robots.txt at first is designed to "tell" spider that the content should not be displayed or stored. So I guess they still be able to crawl it huh? Uhm, that's not actually I mean. Here's what I mean: Something like that. I think it will "hide" it. I'm not trying it, I'm wandering whether bots could read it.
Oh come one, give it a try and let us know how it works out. PLEEEAAASSSE!!! Would the following work, i.e. an image displayed over a text? Is this one of the common black hat tricks?
Just to comment further on this, i recently created a new affil site which was ranking well for key terms in Google. One day i just bombed out completely, i couldnt understand what i had done wrong. I looked through the code an remembered i was going to use a css image replacement technique which i scraped half way through development, trouble is i didnt remove the code. The css was setting every h1 on ever page to -2000px, pretty much the only problem with an otherwise kosher site. I have submitted an inclusion request but still not back yet, my advice is to read the Matt Cutts interview and then decide if its really worth it, Google can be fickle sometimes and what works on one site wont necessarily work on another.
Wow, that is 100% hidden text It's like a background image (in buttons, menus, etc). I don't think this is blackhat. I also think Google can recognize them both as separate entity.
Rather than setting display: none; we often use the css image replacement technique of negative margins. This is especially true when you have non-standard fonts you wish to display. Put the fonts in an image, then either put the text behind the image or in a div with massive negative margin. Somethin similar can be done with sIFR. If you want to display some content for users and others for engines, using flash, you can make use of SWFObject or Flashobject. Thus far, we have had no negative search engine results using the negative margin technique...