Demystifying Google’s text-indent mystery
Written September 9, 2009. 14 comments.
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 noob 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.
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
Is it a good practice to have keywords in H1 tag?
IE: “Fruit and Flower Baskets” vs “Fruit Baskets, Flowers, Gifts, Flower Baskets, …” you get the idea.
Great article Mike.
In a project I’m working on, there’s an image with some snazzy text,
for obvious SEO reasons I typed in the text and made it disappear using text-indent, also, I added an H1 to it with the content being the title of the site (no keyword stuffing).
I’m thinking it won’t get any penalties for this right?