Blue Widgets - Google and CSS Files
January 8th, 2007 by Michael Gray in Google, Grayhat SEO, SEOIf you're new here, you may want to subscribe to my RSS feed. Read my top posts or learn more about Michael Gray. Want more frequent updates follow me on Twitter. Thanks for visiting!
With all this talk about Google Crawling CSS files I thought it might be nice to get an idea what’s within guidelines and what’s not.
This is a CSS tip I picked up from CSSZenGarden that allows you to satisfy lots of people at once. For example this element could easily exist in top or side navigation
Viewing source code it would look like this:
<div class=’navtop’><a href=’blue-widgets.html’><img src=’images/blue-widgets-nav.jpg’ alt=’blue widgets’><span>blue widgets</span></a></div>
The CSS would look like this
.navtop span {display:none;}
IMHO that’s perfectly fine, you give the client what they want, the designers gets what they want, and the spiders get what they want. I would certainly hope that this implementation wouldn’t trigger an automatic ban and if it came under hand review that it would pass as well. The problem is when people do something like this:
<div class=’navtop’><a href=’blue-widgets.html’><img src=’images/blue-widgets-nav.jpg’ alt=’blue widgets’><span>buy cheap blue widgets online</span></a></div>
I’d say that’s a pretty clear intent to trick the search engines, but what about this
<div class=’navtop’><a href=’blue-widgets.html’><img src=’images/blue-widgets-nav.jpg’ alt=’blue widgets’><span>large blue widgets</span></a></div>
Is the addition of “large” enough for it to be considered “bad”. If I were a search engine engineer (stop laughing) I’d have to say yes it is bad. If the text in the image said “large blue widget” then you’d be ok. Now what happens when you use a photo or illustration and not a textual image? The spam line becomes a lot fuzzier. For example I could use the image below with this technique and link to a page about ‘Paris Hilton‘ or ‘cheeseburgers‘ and still be accurate and non spammy?
It’s an interesting and difficult problem for search engines to come to try and solve.
Sphere It
January 8th, 2007 at 6:23 am
Its not really much different to the issue of what to put in your alt text and I expect Google will handle it in much the same way.
January 8th, 2007 at 7:42 am
Dammit, mad4 - thats *exactly* what I was going to say! *laughs at self*
January 8th, 2007 at 8:31 am
I don’t even really like your first example =) A ban, in that case, is too heavy-handed IMO, but if I was a Googler, I’d code Googlebot to ignore the SPAN text.
The image serves a couple of purposes: 1) branding, obviously, and 2) navigation. The IMG element takes care of the branding, and the A HREF element takes care of the navigation. The ALT attribute and SPAN elements are both useless.
January 8th, 2007 at 9:40 am
You don’t even need SPAN to do image replacement. This has been around for a long time and I’ve always wondered what Google does about it. Blanket penalties would be ridiculous, but it’s an easy way to spam.
This is why I like Yahoo - they still believe in humans, which in a case like this - I can’t imagine bots being able to distinguish between black and white (and the grays you mention).
January 8th, 2007 at 11:51 am
Yea you don’t need span. Have a look at http://demotemplates.joomlashack.com/voodoo/index.php?jos_change_template=js_voodoo_oo1
The top images are replacing actual text. I consider it a usability feature. Even with graphics turned off you can use a graphics based site.
January 8th, 2007 at 1:28 pm
I have been doing this for awhile now for usability/accessibility reasons (with some SEO benefits in mind) and there are so many ways to do this that I doubt a crawler could just “ignore the span” like they would ALT texts.
There are too many methods that would be difficult to detect even looking through the CSS. For example, many people use text-indent to push text out of the borders of DIV, and then use a background image.
The bot would have to calculate how much text indent would push text out of the viewable size per each element.
I have also seen methods where the text sites above an image with the same color as the image background. However if the image isn’t loaded or css is turned off the area where the element should be is black allowing the text to be visible. As seen here -> http://www.mondaybynoon.com , how is a bot going effectively monitor those practices?
January 8th, 2007 at 1:55 pm
Ross,
What makes you think they are ignoring ALT text? ALT text to Google is the same think as on page text according to the evidence I see. No more or less important than content.
January 8th, 2007 at 4:34 pm
That is simply what I have read in several places, however that might not be the case anymore.
My impression is that alt text only is considered when the image is also used as a link, and then the alt text is used as anchor text.
I am far from an expert though, so that could be incorrect.
January 8th, 2007 at 7:22 pm
The use of display: none for image replacement is a bit troublesome for these few reasons.
1) the possibility of being flagged for spam by search engines (this should not be so, but it’s the highest risk technique for this)
2) accessibility, screen readers cannot read any text that is display: none;
3) extraneous markup, the tags are not necessary.
For image replacement you should be using a text-indent: -9999px (or to this effect), essentially bumping the text off of the screen for most users.
This will reduce your SEO risk, as well as improve accessibility and code bloat.
Google ‘image replacement’ for a great round up of all techniques available from Dave Shea’s site, MezzoBlue.
January 8th, 2007 at 8:08 pm
“text-indent: -9999px”
From a bots point of view wouldn’t this be easy to spot as well?
January 8th, 2007 at 9:39 pm
Ross,
Here’s evidence showing ALT text being treated the same as on page content
http://www.xuru.com/blog/google-and-alt-tags/