Isulong SEOPH Contest

Isulong SEOPH: CSS Image Replacement

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:

“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

http://www.ame-phil.com *

*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.)

And i found these comments interesting:

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.

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.

Incidentally, I found this page re: Image Replacement:

MIR: Malarkey Image Replacement

Image replacement is a topic which keeps reappearing on websites and in books. There are whole sections devoted to the pros and cons of each method in books such as Web Standards Solutions and The Zen of CSS Design.

Personally, my preferred image replacement method is Phark as it
requires no additional <span>s. But Phark is known to cause
scrollbar issues in certain browsers and breaks in IE5 and of course
'breaks' in the rare CSS on, images off scenario.

Do the mess around

I'm working on a personal site design project which focusses purely
on typography and uses no images, one font and only one colour (plus
black and white). In doing this I discovered that replacing,

element { text-indent:-999em; overflow:hidden;}

with

element {letter-spacing :-1000em;}

had some curious black hole style effects. So I started to make some simple tests and when they worked I followed them up with an examples page.

I still have to test these styles first before i make my comment.

posted by RB2 @ 1:51:00 PM