Follow me on Twitter

Once upon a .com boom time, back when search engines predominantly ranked sites based on keywords alone, there was a common practice in SEO carried out by every web designer and his dog - something called 'cloaking', a form of keyword spamming.

This practice at the time was allegedly the Holy Grail of ranking highly in search engines, and usually consisted of spamming your page with keywords that were invisible to the user but visible to search engines – white text against a white background was a common method.

Naturally it didn't take long before search engines realised this was affecting the reliability of their search results, and they started penalising for such practice by changing the way they ranked sites by introducing more variables, such as checking for link popularity, duplication, relevance, stagnation and more.

The concept behind this outlawing was simple: It's deceptive. If the user can't see it, then it has no place hiding on the page. Imagine for a moment, that you arrived at search engine results and one particular link promises information about Dell notebooks, but when you visited the page it was a completely unknown brand. This sort of thing used to be rampant.

Fast forward to today and designers are, in a similar way, using this very same practice although with legitimate intentions. I'm of course referring to the art of image replacement using text-indent, which for our noobie audience is the practice of moving text off the screen via CSS to reveal an underlying image. Example:

<h1>My web site design services</h1>

h1 {
   text-indent:-9999em;
   background-image:url(heading_web_sites_services.gif);
}

The result of this is the text being rendered off-screen in order to not get in the way of the image, which in this case is a header with a non-standard font used to fit in with the design.

But hold on a second: Going by Google's webmaster guidelines on this subject, this is technically a form of deception, as they note (emphasis added by me)...

Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors. Text (such as excessive keywords) can be hidden in several ways, including:

Using white text on a white background
Including text behind an image
Using CSS to hide text
Setting the font size to 0

Cue the grey area. Reading further Google actually recommend using an image instead as long as it's accompanied by an alt attribute. What does this tell us, besides (surprise surprise) providing further evidence of Google's lax attitude towards modern web design principals? To me, this means that Google's algorithm might not be very good at detecting the difference between...

<h1>My web site design services</h1>

...and...

<h1>cheap web sites, affordable web sites, web site discounts, custom web sites, cheap hosting</h1>

...when text-indent is used, which is why they still have to manually check web sites for quality. I've used this technique on a stack of sites all of which rank highly organically on Google and all of which, according to Google, are using deception.

It appears Google's issue is really only with the deceptive practice of using text-indent for keyword spamming. By that logic, they (technically) should have no problem if text-indent is used legitimately as shown in the first example, because we're simply replacing text with an image of exactly the same text. There's no deception.

Something contradictory interesting to note on this subject is that Google go against their own recommendations. Disable the styles on Gmail and you'll see the words Google Mail Logo inside an h1.

Is it really good practice?

Until I see any proof to suggest otherwise, I have no plans to change the way I do things. Aside from keeping the mark-up semantic (because we're using an actual heading instead of an image), it makes the document more accessible to people relying on screen readers, and it means we're sticking to the golden principal of separating presentation from content. These are all good enough reasons.

Keeping it real

The rule to remember when using this technique is to use it for the intended purpose. The example shown at the beginning demonstrates a legitimate method of solving a semantics problem while simultaneously maximising accessibility on that component, whereas the second example is clearly designed to spam search engines. If Google catch you in the second practice, they won't tell you but you'll know all about it when you see your site disappear in a search engine black hole.

As long as you're intentions aren't deceptive using text-indent should not have any negative impact on your SEO. I've seen the complete opposite on more occasions than I've had hot dinners.

I say if it's been treating you well so far, stick with it (if it aint broke don't fix it), but keep one eye on the SEO game because Google can change the rules on a whim.

Comments

Replying to comment article

FYI: You are currently not logged in. It's cool though - you can still comment. But only members get a profile page, access to the download section and they can pimp their own web sites. Feel free to register or Login now!

Your name:

Your comments:

Note: HTML tags are automatically stripped from comments.

Are you human?

Sorry, I have to ask. So what sort of animal is this? (Hint: you don't have to be perfectly specific)

Back to top