CSS Image Replacement February 26, 2006
(Visited 42912 times)I guess we all know, Search Engines cannot read the letters on a jpg file. If on the mast head of your website you have some image that uses a really nice font saying:
“My Company Name - My Unique Selling Proposition Why You Should Get My Service.”
Search engines cannot see that. That is one reason why the Alt Attribute supposed to be used, but if you want to use purely text, you can do a CSS Image Replacement technique.
In your HTML File:
div id=”myimage”
span
My Company Name - My Unique Selling Proposition Why You Should Get My Service
/span
/div
In your CSS File:
#myimage {
background: url(”../images/path/myimage.jpg”);
height: 100px;
width: 760px;
}
#myimage span {
display: none;
}
What are the rules?
Content cloaking is a no-no. Where this means hiding content that people cannot see, but search engines can see in your attempt to modify the SERPs. Most of the top SEO experts believe that search engines really have no way of detecting this on a large scale even if they have been talking about it. And most of the time when a site gets banned for cloaking content, it was due to someone that reported it to the search engines, then they looked into it manually.
If you are going to look at the code above, the text you typed will not appear on the page when viewed on the browser. But search engines will see it. People using a browser will see the image. So it is important that what is written on the image, is also exact same text written inside the span tags. Mainly because, why your site gets on top of the SERPs, the first people that look into your code are your competitors. And sometimes one way to go on top, is to put your competition down. So never do something like this:
div id=”myimage”
span
My Company Name - My Unique Selling Proposition Why You Should Get My Service - My company does this, this, and that. We also offer this and that, we are the best in doing all these things. product 1, product 2, product 3, service 1, service 2, service 3.
/span
/div
Especially if that text is not written on the image itself.
If you want working examples… you can check
*This is just a web design client, not an SEO client, so not everything is optimized here for SEO.
I assume you are already running Firefox. If not, download one now, then download the Web Developer Toolbar. With that tool bar you can do a lot of stuff needed by a web designer/developer and one of them is to disable CSS. Once installed, it is a simple Ctrl-Shift-S and check how the site I showed you above appears with CSS disabled. This is somewhat like what the search engines will see. Check the logo on the mast head, that is using CSS image replacement, as well as the graphical page titles in the main content. (Those on Safari, yeah I know, I will that difference in color.)
Further Studies…
If you have the Web Developer Toolbar installed already. Try checking Greg Boser’s site without CSS. He is a real expert SEO and I am just some SEO dude down the street, why didn’t he do a CSS image replacement on his mast head? He is way better than me.
I will have you guys research on this and I will not explain much since the topic is changing already. But here is your assignment, figure out the user-agents for the search engine bots (easy to find online), and find your way how to view his site using a different user-agent and try to simulate a bot (Firefox is your friend in doing this). Visit Greg’s site again and pretend you are Googlebot, check his site again and you will see the difference. Now is that cloaking? Is it Blackhat? If you are going to ask me, he followed the rules in not cloaking content. Whatever content is on the site is the same content seen by the search engines. The difference is, he took out a bunch of code and served mostly content only by detecting the user-agent. Powerful for the Whitehat. Dangerous in the hands of the creative Blackhat. But I will not discuss this in detail anymore, whatelse a Blackhat can do since I do not want to promote Blackhat tactics here. I stay away from dark side. 
- Posted in : SEO Programming
- Author : Benj Arriola
Comments»
Excellent article Benj
Thanks!
I just found something. If you are really strict about your code to content ratio and want to get the code even lower in CSS image replacement, here is a solution taking out the span tags that I just found online
MIR Image Replacement
The key to proper image replacement should be to avoid using “display:none;” and instead use “text-indent::10000em;overflow:hidden;”. This solution is much better because you need not alter your HTML source to suit your design, which is the main ideas encouraged in separating style and content.
Yup, I agree.
Actually there are many ways to do image replacement but what I use right now is similar to what Markku uses only I’m using a negative text-indention.
[…] I’ve read this article from SEOPhil.org site. It’s quite interesting especially for us SEO-conscious web developers: I guess we all know, Search Engines cannot read the letters on a jpg file. If on the mast head of your website you have some image that uses a really nice font saying: […]
what we use is sIFR. ESPN, Nike, The Hollywood Reporter
and some other big sites use it and so far it seems to work fine. here’s the link if you want to learn more about it http://www.mikeindustries.com/sifr/