Danny Sullivan is a SPAMMER

I'll still be happy to remain a member of his peanut gallery.

That CSS is perfectly Ok with SE guidelines. Some lurid assclowns posting BS in a WebProWorld thread just got too much attention.

Yep, agree completely, Sebastian.

Has anyone seen what was actually *in* the SEL H1 tags? I didn't, so I'm not sure what we're discussing here.

We discussed the Fahrner Image Replacement technique at cre8asiteforums in 2003; we actually had a number of great debates there, as cre8 counts some CSS — and, particularly, Accessibility — folks as members and/or moderators. The general idea of Accessibility is to make websites usable for sight-impaired people, among others, and so the image replacement techniques stirred up great excitement because they provided a way to display images for those who could see them while also providing non-displaying explanatory text that could be read (aloud) by screenreader software. Kind of an alternative to image Alt text, which sometimes isn't flexible enough to explain much at all. Great excitement; good debate. Then I finally took a look at the code, which used CSS to hide the explanatory text, and so cautioned against hiding anything due to search engine issues — which requires a certain amount of bravery when you're saying that to Accessibility advocates, even if they're your friends. :) Anyway:

This technique is aimed at providing an image for sighted viewers, and readable text (I'm assuming by an aural browser reader) for non-sighted visitors that is made non-visible by setting the display to "none".

Having read this briefly, here's my take on it: any technique that relies on hiding text with display: none runs the risk of penalization by search engines, if not today, then sometime. Why? Because it's too easy to abuse.

And yet, the technique increases usability for non-sighted viewers.

In essence, what we're seeing here is the apparent divide between increasing usability and requirements for taking advantage of free search engine traffic.

My suggestion, rather than hiding text, would be to provide a second page for non-sighted viewers (all text, along the "print this page" lines, and block search engines from indexing it). Or, a "click here to have this image read to you" popup. Or, if you can live with some kind of repetition on the page, just add the text on the page itself.

There are other image replacement techniques:
http://www.google.com/search?hl=en&client=opera&rls=en&hs=OJI&q=CSS+image+replacement&btnG=Search

IMO, this is akin to using CSS to hide dropdown submenus and JS to display it — but not quite, because in the dropdown scenario, the text (the menu links) *are* visible to people with JS-enabled browsers, screenreaders and search engines, but I always wondered if/when search engines would have a problem with that technique. (I never asked, because I figured I wouldn't get an answer, but I could be wrong.) It's also a similar scenario to meta-refresh pages; you can do some pretty interesting non-SE-related designer-y things with meta-refresh, but due to search engine issues, one is best off just leaving it alone. We have to deal with the world we live in as it is — or, as my grandfather used to say, "you pays your money and you takes your choice".

All that said, I don't know what was in Danny's H1 tags. The Webproworld thread has a comment by weslinda:

... This is in no way shape or form being used as an image replacement. This isn't ALT text. This is simply a link and text in an H1 tag being hidden off page. As Webnauts shared, it is not a unique tag per page, it is the same tag on every page of the site, and there are thousands. Which makes it semantically incorrect, and a fairly egregious error in my opinion.

I have no idea why this was done, or for what purpose, but it seems pretty clear that Danny didn't know about it. From Danny's comments in that thread:

The stylesheet was created by the designer who initially created our site template, who isn't an SEO. Looking at it more closely today, I understand why he did this. See, the logo at the top of our page isn't an image on its own. It's part of the overall page background:

http://searchengineland.com/styles/i...header_bg2.jpg

So we can't put a link around the logo, because the logo is part of the page background itself.

Anyway, long story short -- there was no intention to spam the search engines. We hardly need to spam the search engines for that crucial text of "Danny Sullivan" or "Search Engine Land." We're sort of relevant for them without even trying, I think most people would agree.

We'll look at a way to make the logo be a hyperlink that doesn't involve using a hidden style

Yep; that can happen, although I can't imagine why the designer would have made the logo part of the page background (?) in the first place, which ultimately meant s/he had to find workarounds for that particular choice. Just wait until the Semantic markup purists get a hold of that one. Danny, duck!

Just kidding.

Seriously, the amount of laterally related "stuff" we have to know in order to do a proper job is just ...

I've actually seen that recently a lot. It may be a specific design program that seems to do it that way. Perhaps DreamWeaver and/or GoLive? Designers who don't know that you'd want your logo not to be part of the background may be simply using some default of their program.

..part of the CSS it only ever gets downloaded the one time and speeds up downloads - you could of course put a long time delay on the cache timeout for the logo and have the same effect but thats another matter.

Maybe so, Jill. I don't know about GoLive, but Dreamweaver doesn't make logos (or anything else) part of the background by default. In fact, it doesn't really do anything unless you cause it to do it.

Kali, my understanding of browsers is that by default they cache everything on the pages you visit, so I'm not sure that making something part of the background would be a benefit. Are you thinking that images called into pages via CSS get cached ... differently, or something along those lines?

The biggest draw I can see for having it in a background image, is that it results in 1 less GET request, which as Yahoo have attempted to demonstrate recently on the YUI blog, can be crucial to speed. That said, I'd have thought a logo in a background image would offset the saving via a larger filesize. Plus its slightly less markup to grind through, and the css style rule /is/ cached, where the html is not, because its never been encountered before.

Okay. If they're getting the CSS file, it's because they're downloading a page, but you're right that they're encountering the HTML on each page separately. However, I'm not sure that that savings exists with respect to images because images get cached anyway. (And the HTML generally may be among the least heavy file weights of all the page elements, which of course doesn't negate the desirability of lightweight code.) That said, I'm certainly not a browser maker, so maybe I'm missing something.

And, I have to admit that I'm less worried about larger file sizes than I was ten years ago. As an example, Rand and crew are using hefty images, the pages download fast (although I'm not on dialup), and the SEOmoz site looks great. So it's a choice thing.

I believe that using an external CSS file will still allow the image to be cached.

Or, at least that's my assumption.

But then, since the image would be cached in either case (whether by direct insertion into the HTML or via CSS), I'm not sure what the benefit would be of calling a logo via CSS. I can think of other images that are best called via CSS (backgrounds, for instance), but not the logo. In my view, the logo needs to be linked to the home page, so it's much easier just to insert it into the HTML than to call it as a background via CSS, which then requires a workaround to add the link.

That's just my opinion, though.

Susan Moskwa from the Webmaster Central team said:

[...] your intent (in hiding text, or in using any technique that has the potential to be abused) is important. If your intent in hiding text is to deceive the search engines, we frown on that; if your intent is purely to improve the visual user experience (e.g. by replacing some text with a fancier image of that same text), you don't need to worry.

Of course, as with many techniques, there are shades of gray between "this is clearly deceptive and wrong" and "this is perfectly acceptable". Matt [Cutts] did say that hiding text moves you a step further towards the gray area. But if you're running a perfectly legitimate site, you don't need to worry about it. If, on the other hand, your site already exhibits a bunch of other semi-shady techniques, hidden text starts to look like one more item on that list. It's like how 1 grain of sand isn't noticeable, but many grains together start to look like a beach.

As the Guidelines say, focus on intent. If you're using CSS techniques purely to improve your users' experience and/or accessibility, you shouldn't need to worry. One good way to keep it on the up-and-up (if you're replacing text w/ images) is to make sure the text you're hiding is being replaced by an image with the exact same text. [emphasis mine]

Sometimes I wonder who these people are that want clearly-defined statements of THIS IS OK and THIS IS NOT. Isn't it obvious that humans won't be happy in any world where things are either black or white? Seriously... is that not obvious yet? Hello? Is it just me??

ThreadWatch was a forum of marketers... and mostly technically savvy ones. To have Google, the infamous "it's an algo" company, say "focus on intent" is GOLDEN. Why.... WHY I ask, do you all seem to want to destroy that with an incessant "but what do you mean/can you clarify..." querying of Google's PR people????

(sigh)