Using CSS to Replace Text With Images

Will Google penalize?

[mindaugas13]

I am looking at a well-structured CSS website for a large university website and am seeing that they use an image to replace the H1 tag using a span.

Are there any problems with doing that for a site (SEO-wise?)

What about if the H1 tag reads <h1>Acme Widgetry Sales </h1> and the image that replaces it using CSS is just the logo that reads "Acme Widgets"? (This is due to the fact that "widgetry sales" is a much more popular search term than "acme widgets".) Basically, it just uses the more pupular phrasing and is a little bit different than what the image reads, but is not meant to mislead the reader/SE's. Any problems with that?

Also, they are using H2 tags for their main linking structure - any problems/advantages to this, SEO-wise?

[Clint]

I would never replace text with images since of course the SE's can't see images as text. In fact, even if you "write" or type the actual text in an image (like a nav link), I recently heard G can't see those. Now they may see the alt or title tags for images, but SE's don't give much precedence to them, they (esp. G) gives far more weight to the <title> tag and headliner tags.

Moments ago in another thread, I saw something about CSS. I then did a random search in G and clicked a few pages' "Cached" link, then clicked the "cached text only" link on the pages and all CSS was lost. So going by that, G, or the G bot, is not seeing CSS.

If an image logo has an important key phrase in it (made into the image) like "blah-blah-services.com" and "blah blah" is pertinent to searches, then you do not want just the image alone on your webpage. You want to have the important text that's in the image also as text above or below the image.

[mrMister]

Clint, I think you're missing the point.

The site is using a technique called CSS image replacement.

In the HTML code you have something like...

<h1>The Acme Widget Company</h1>

However in the CSS, you tell CSS enabled browsers to hide the text between the h1 tags and replace it with an image of your choice. This might be the Acme widget comapny's logo for example.

It's quite commonly used for accessibility reasons. If you are blind, your text reader will not interpret the CSS, and will therefore read the text between the h1 tags. If you are not-visually impaired and using a standard CSS enabled web browser, you will see teh company logo in all its glory.

Now the thing is, you could coneceivably use this feature to stuff <h1> tags with keywords that most users won't see.

To answer the original poster's question...

As far as I know, Google still does not read external CSS files, and almost certainly doesn't interpret inline CSS, so you will probably get away with it, for now. If Google investigate a Spam report however, you will bet a manual ban for doing it.

Also bear in mind that Google is constantly evolving. There will come a day when Google reads and interprets CSS tags. When that day comes, there won't be any warning, and the first you'll know of it is when a Google Update comes along and your site will be nowhere to be seen in the SERPS.

[suidas]

I think it's naive to think that automatic spam penalties are soley a factor of coding. Other factors, like how long the site has been around, how high its PR is, its topic and so forth must be taken into account. If MIT's homepage were to mistakenly do something spammy—imagine some server mistake that made it seem cloaked—I doubt anything would come of it. If a new site with zero PR and the word Viagra were to do the same however, kersplat.

[suidas]

Odd coincidence, but I just found a wonderful confirmation of this—a major state university that engages in the most shameful keyword stuffing—keywords in comments, keywords in divs absolutely positioned in negative space, etc. They haven't been penalized at all.

Anyone else see this effect?

[mindaugas13]

The one I am talking about is a Florida University. It uses the same H1 tag and replacement image on every page - which also seems odd since that's not sematically proper. I guess my question was about how much people think I can bend the wording for it not be construed as misleading.

Now, the University would probably not get penalized for all this even if Google decided to read CSS in the future .

I'm just surprised I don't see CSS trickery as the new wave of spam & stuffing. Or at least being discussed here as such.

[moltar]

mindaugas13, I use that trick all the time (negative indent with background image) and never had a problem with SEs. SEs don't even read external CSS.

Plus I beleive universities would be automatically put on white list and rarely would it happen that it would be banned.

I'm just surprised I don't see CSS trickery as the new wave of spam & stuffing. Or at least being discussed here as such.

There is lots of it. I see it all the time. You just look in the wrong places :)) But it's not a pretty picture I tell ya!

[Nikke]

I'm actually not at all sure about using this technique any more. It worked miracles on a site I'm running for a while, but after Bourbon the site is lost in the serps. Only for the two main terms that I happened to replace with a background image...

Otherwise the site is well placed in Google SERPs, so I really don't think there is a manual ban.

[Clint]

However in the CSS, you tell CSS enabled browsers to hide the text between the h1 tags and replace it with an image of your choice. This might be the Acme widget comapny's logo for example.

It's quite commonly used for accessibility reasons. If you are blind, your text reader will not interpret the CSS, and will therefore read the text between the h1 tags. If you are not-visually impaired and using a standard CSS enabled web browser, you will see the company logo in all its glory.

So what do the SE spiders see, the text or the image? What I'm saying is if just the image, that's not a good thing.

[tedster]

Spiders see the text. Browsers with css and images turned on see the image.

Whether image replacement techniques can pass a manual check is another thing. I can see plenty of room for a manual penalty interpretation, especially if the website shows no other signs of attention to accessibility issues -- and certainly if there is ANY mismatch between the <h1> and the text in the image.

[zgb999]

Googlebot is visiting my css about once a month. I guess they are doing that for some reason...

[Clint]

Spiders see the text. Browsers with css and images turned on see the image.

Thanks Ted (msg #10).

[moltar]

Googlebot is visiting my css about once a month. I guess they are doing that for some reason...

Are you sure that is a real googlebot and not just fake UA string?

I've never seen G to get any of my CSS files. Maybe I just don't have enough traffic who knows... Or maybe they are doing it selectively as they are testing new technologies...

[zgb999]

Are you sure that is a real googlebot and not just fake UA string?

I checked the IPs of the "Googlebot" visits in the last few months accessing the css-file. They seem to come from a German search engine using Googlebot as name for their spider and not from Google.

Sorry for the mis-information!