CSS Image Replacement: When Did It Become Black Hat SEO?

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!

Like every new innovation on the internet it was gamed by scrupulous webmasters who were trying to get a cheap fix for their rankings; the same people who abused keyword stuffing, META keyword abuse, hidden JavaScript content etc. Unfortunately this has seen instances of legitimate CSS image replacement get lumped into the same group.

What is CSS Replacement?

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:

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.

It must be Black Hat, people are still using it!

Obviously there are instances common across the web that show abuses of CSS image replacement, but there are also instances of hidden javascript content, META keyword stuffing etc. The internet is full of stupid people who are willing to try everything to get ahead but thankfully they are often easy to spot – the real “black hats” are the ones doing things you don’t know about.

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.

Should I still use CSS replacement?

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.

Other than ALT there are no real alternatives at this moment of time that will work as well and many well known SEO’s have mentionedthis in response to Maile’s article.

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?

About the Author

Kev Strong is an online marketing consultant at Newcastle Upon Tyne based digital marketing agency, Mediaworks.
A lover of all things search and an ex-web developer, Kev Strong (a.k.a Goosh) is a specialist in advanced search engine optimisation.

2 Comments

I have always seen this as a valid technique that gets a bad wrap. Where it becomes a problem is when it’s used frivolously and includes irrelevant text. I guess the real question is, what are the consequences dished out by Google if you get hit in the crossfire even when you’re using it properly?