Black Hat SEO is a term that gets bandied around with everything that the “White Hats” deem to be underhanded or to appear to be giving a webmaster an unfair advantage. When a legitimate web design technique gets caught in the crossfire, it annoys me – especially when the search engines are unable to differentiate from a useful, (Google) law abiding technique and blatant abuse by spammers.
With the introduction of CSS came the ability to create beautifully elegant websites that not only worked for the majority of cross-browser users, but also worked with screen readers making it an accessibility evangelist’s wet dream!
The purpose of CSS replacement is, primarily, to show an image in place of text when CSS is loaded in a supporting browser. When CSS is not loaded, the text will show in its place. This is often used with:
It involves using CSS to load an image in the background and off-setting or disabling the text from being shown to enable the logo to be shown in its place. There are several methods such as setting an ID, a class, span wrapping etc. An example piece of code might look like this:
background: url(‘/images/logo.png’) top left no-repeat
However, a friend of mine who works at a very large entertainment outlet was told by his Head of Search “Remove the CSS Image Replacement from the logo as that’s Black Hat!”
Even Maile Ohye, Googles Senior Developer Programs Engineer recently announced that common CSS replacement methods were advised against. I have to ask at this point: When did CSS Replacement become Black Hat?
As noted in the examples above, the CSS replacement tactic has been used in exactly the way it was meant to be used: as a replacement for the text.
The simple rule I have always stuck to with CSS image replacement is to replicate the text that is shown in the image. This not only helps accessibility guidelines, but it also benefits SEO as it is actual text on the page as opposed to text in the ALT attribute.
However, bear in mind that sometimes web developers unknowingly create false positives by being overzealous by using this method and adding keywords or phrases in there and not sticking to the text replication rule. Search Engine Land was called out for this back in 2007; in 2008 this was later found to be acceptable:
I hadn’t caught this during the design process; our designer had no idea it was a bad thing. We fixed it. And not two months later in a discussion forum, I saw a Google rep saying this exact tactic wasn’t bad if the text matched identically.
In a world of mixed signals it’s often hard to make the choice, especially when people are advising you to not take the risk.
ALT is a perfectly acceptable alternative, but with newer browsers (such as Internet Explorer 8 ) removing the hover over functionality to show the ALT text of images, CSS image replacement is a much more useful alternative for soft text readers/temporary screen readers.
It won’t get you penalised, but you might get caught up in the signals – in my eyes, it’s worth the risk for something that works so well.
What do you think – is CSS image replacement black hat?