Hi does anyone know how to hide text that is within a tag such as a h1 tag? It also would be great if there was away of making that text visible if the tags background does not load.
Search engines and text-only browsers see the text but everyone else sees the image. I'm pretty sure Chris did an article on image replacement that showed various other techniques and rated them for accessibility.
Hi thanks for the tip i'll give it a go and also I will hunt down Chris's different techniques on image replacement blog / podcast. I am very wary of keeping my sites accessible, SEO and using web standards. Due to this I dont want to use too many hacks any thoughts??? :?:
Anyway you only should replace words by images with the word in it (company name etc). If you use it on to many elements on your site it gets suspicious for google.
But the question of whether any of the mentioned methods are good for SEO remains to be answered - technically, you are hiding stuff from Joe Public, but you are showing it to Mr. Google. In a sense, this is the no-no. It's like making text the same color as its background (remember those days?). So you would have to decide what Google might interpret as "hiding text" the least. And if I was Google, negative positioning would look darn suspicious to me in any case.
I read an article somewhere, I'm not sure if it was Chris' or another, that looked in depth into google's reaction to the negative indent technique. Currently, although it could change at any time, google does not penalize it's use and this technique has been popular for a very long time.
However, I do have one problem with it. I cannot center any element, in FireFox, that I use the negative indent on. There's no problem in IE but FF slams it to the left no matter what I've tried. Obviously, I can center a container and put it in that but it annoys me whenever I have to add a container as a workaround. Other than that, I love it. I still get the pretty graphic logo but also have the seo benefit of using semantic header tags.
Cheers
Simon ;)
Search engines and text-only browsers see the text but everyone else sees the image. I'm pretty sure Chris did an article on image replacement that showed various other techniques and rated them for accessibility.
Simon
Anyway you only should replace words by images with the word in it (company name etc). If you use it on to many elements on your site it gets suspicious for google.
My method: See http://css-tricks.com/header-text-image ... ment-14822
But the question of whether any of the mentioned methods are good for SEO remains to be answered - technically, you are hiding stuff from Joe Public, but you are showing it to Mr. Google. In a sense, this is the no-no. It's like making text the same color as its background (remember those days?). So you would have to decide what Google might interpret as "hiding text" the least. And if I was Google, negative positioning would look darn suspicious to me in any case.
However, I do have one problem with it. I cannot center any element, in FireFox, that I use the negative indent on. There's no problem in IE but FF slams it to the left no matter what I've tried. Obviously, I can center a container and put it in that but it annoys me whenever I have to add a container as a workaround. Other than that, I love it. I still get the pretty graphic logo but also have the seo benefit of using semantic header tags.