Forum Moderators: not2easy
I've just read an article which mentioned that you can hide off the page a H1 tag and leave behind people just seeing just an image (e.g. Company Logo).
<h1>Buy widgets</h1>
h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}
I like the idea of doing this for obvious SEO reasons; but importantly, what is the view of the Search Engines?
Do they mind?
Has anybody used this technique on their website?
Does anybody recommend doing this?
Do they mind?
Not if you use the technique for the purpose you're describing. It can easily be abused though, and presumably search engines would take a dimmer view of this.
Has anybody used this technique on their website?
Yes. Lots of big commercial sites over the last year or so, and there's never been a problem.
Does anybody recommend doing this?
Yes, although I'd increase the text indent to -5000px so there's no chance of it showing, as per Revised Phark image replacement. Moderator cEM would tell you to add overflow: hidden; too, but it's not really necessary if your indent's big enough.
cEM would tell you to add overflow: hidden; too, but it's not really necessary
This is true (both that I would say that AND that it isn't really necessary), with one exception...if you intend to link the <h1>, the overflow:hidden is needed, otherwise the browser draws an underline from the image back off the screen to the left where the indent is. The overflow:hidden hides that from view.
If the header won't be made into a clickable link, however, the overflow:hidden is superfluous.
cEM
I've only seen this happen on Mac IE, and got rid of it with text-decoration: none; which seemed to do the trick.
Maybe it's because I tend to make included links display: block; that I haven't seen it more frequently.
It can easily be abused though, and presumably search engines would take a dimmer view of this.
Yeah, I've had conversations with a few folks who might have had conversations with folks that might work at Google who might have stated that this technique might not pass a hand check if combined with anything else that might be dodgy.
I just wish everything in SEO had such a definitive answer.
this technique might not pass a hand check
Yep, that's the real deal. The worry shouldn't be that Google frowns on a particular technique and will automatically penalize you. There are hundreds of ways of hiding content using CSS, and any attempt at automation would kick up way too many false positives.
If your motives are pure you should be fine, but it's worth asking yourself if your accessible image replacement could be construed by someone else as keyword stuffing.
What? They are hiding text, misleading the search engines.
No different then white on white text. It's cheating - what pure motives? It's not cheating when I do it, but it is when others do it?
In order to reduce clutter on a faq page only the questions are at first visible. Clicking on a question toggles the visibilty of the answer.
Drop-down CSS menus in which the submenu items are hidden until a hover or click toggles the visibility.
Both techniques are effective and widely used. The "purity of motive" comes in during a hand check.
If my "Widgets" drop-down menus reveals...
The History of Widgets
Types of Widgets
How to Use Widgets
Where to Buy Widgets
...I'm probable okay. On the other hand, if it reveals...
Blue Widgets
Blue and Red Widgets
Red and Blue Widgets
Red Widgets
Widgets That Are Blue
Widgets That Are Blue and Red
...my site just got the boot.
