HTML “text-indent: -9999px” and holding the line

Because today is Towel Day and because it’s just you and me, I can write about stuff I couldn’t say on a large platform like our Webmaster Central Blog. For example, I can write that:

 

If possible, it’s still best to avoid techniques such as “text-indent:-9999px” or “margin:-4000px” or “left:-2000em”.

 

And you can scream at me, “But I do it for accessibility! You’re mean, I’m nice!”

 

And that may be true. Another truth is that using “text-indent: -9999px”, or hiding text (keeping text out of the user’s sight in a browser), is common spammer’s technique to hide off-topic keywords and/or links to manipulate search engine rankings.

 

hidden links using text-indent
Example of “text-indent:-9999px” to hide unrelated links and boost PageRank to those sites. Search engines will never notice!

 

Google has top-secret algorithms designed to detect when text is hidden/positioned off screen. If this type of hidden text is detected, our important red phone rings, and this becomes one of the signals that may cause us to believe your site is deceptive.

 

Given that Google only wants to return the most relevant sites to users, if we consider your site deceptive, its rankings may be negatively affected.

 

So what should a webmaster do?

 

Try to hold the line — avoid hiding text. We’re trying to find an elegant solution. And once we do, I’ll write an official post.

 

What solutions are being considered?

 

With HTML5, my friend Ian Hickson shared a few possibilities that could satisfy both webspam and accessibility needs:

 

  1. Hide content from screen users but show it to screen reader users.
    Use media-specific CSS, e.g. @media speech { } vs @media screen { }.

    Caveat: Not yet implemented by screen readers.

  2. Hide irrelevant content, such as hiding a login form once the user is logged in.
    Use HTML5’s hidden=”” attribute.

    Caveat: This was just drafted a few months ago. I’ll get Ian’s latest take on the subject once he returns from paternity leave. Congrats, Ian!

 

Happy Towel Day, everyone!

 

Update made later on towel day: Luigi Montanez and I have some crazy connection. He just posted on the same friggin text-indent topic (enjoy my anchor text, Luigi!). Suddenly all that was impossible is possible.

45 Replies to “HTML “text-indent: -9999px” and holding the line”

  1. I’ve read that it all comes down to the reason you’re pushing the text out of view — whether it’s to make the page seemingly relevant to text that’s not available to users, or if you want to use pretty image-based headers but want to keep the content accessible.

    But that means that you have to rely on the search engines to figure out the intent of your indent, and that’s always made me nervous.

    [Reply]

  2. OK I get where you’re coming from but to tell people not to use a technique and say there really isn’t a workaround or viable alternative that google recommends right now, just doesn’t fly. Not trying to be mean or a troublemaker but a bit of a realist.

    [Reply]

    Maile Ohye Reply:

    Michael, I hear what you’re saying: “to tell people not to use a technique and say there really isn’t a workaround or viable alternative that google recommends right now, just doesn’t fly.”

    I think there’s alt text and other design alternatives in most situations. In rare cases, this yucky grey area is precisely the spot we’re in. And that’s exactly why I’m talking about it on my blog and not WMC.

    The current reality is that from Google’s standpoint, it’s still best avoid text-indent. While I’m positive there are totally legitimate text-indent:-9999px cases, it’s still a very common technique to spam. I’m not saying “if you use text-indent you’ll be penalized”. I wrote, “it becomes one of the signals that may cause us to believe your site is deceptive.” Note the use of “one of” and “may cause”.

    Believe me, I love efficiency, elegant solutions, black and white. Right now, in regard to text-indent, things aren’t the prettiest. I appreciate your realism. What’s funny is that I feel like I’m trying to do the same, but you don’t like mine. lol.

    See you at SMX Advanced, yes? We can duke it out there. Or perhaps I’ll just buy you a drink.

    [Reply]

  3. Never leave to a search engine what you can do yourself. Don’t be lazy with your code and expect googlebot to sort it out. Sure, the spiders might get things right some of the time, but why take the chance?

    [Reply]

  4. I’m with Graywolf on this. HTML5 is a pretty lame suggestion too.

    [Reply]

    Maile Ohye Reply:

    Hi Hunter,

    I already think of text-indent as a workaround. I’ve heard it referred to as “the hidden text hack”. Placing text off screen randomly 9999 or 4000 pixels isn’t often the designer’s intention, it’s just that they can’t figure out another way to, say, call out text for screenreaders.

    html5 can offer a legitimate methods. Rather than make a workaround like -9999 the only option, we can actually create a solution to the problem.

    [Reply]

  5. Of course there are better cleaner ways to apply keywords to images, although the power of ALT attributes in comparision to anchor text is somewhat overestimated across the boards.

    I appreciate the info, as well as the insight WRT Google’s POV on the risks of perfectly legit (IOW well meant) “hidden text”, but I agree with Michael. I hope that, as long as there’s no real alternative, Google won’t penalize webmasters for very popular “best practices”; at least not w/o a human review.

    Also, there are other cases where text must be hidden, and display:none; along with a procedure enabling the user to view the textual contents can’t solve each and every design problem.

    [Reply]

    idosolu Reply:

    What’s worse is there is no alt attribute for images embedded into the background of an element using css. My problem of having to use -2000px indents would be solved if I could somehow describe the image for when it’s turned off.

    [Reply]

  6. A reasonable compromise might be for the almighty Googlebot to track how many times the technique is used on a given page. 2 or 3 times? Probably just being used for headers. 20 or 30 times? Probably being used to hide irrelevant links. What do you think?

    [Reply]

  7. One thing I don’t get here is that in the current enviroment PNG Sprites are a #1 thing… You can’t currently use the <img tag and the alt= tag with these the only option is to set them as a background image and if you want relevant text to go with that sprite image text-indent -9999 is the only real way, it also opens up the ability to change the logo/image with a change of CSS file.

    I get that it is sometimes used in a very spammy way but this philosophy is that as some people use cars to commit crime no one should use a car or the police will think your a criminal.

    [Reply]

    Maile Ohye Reply:

    Ceri, I appreciate your comment. I’m only trying to say that “If possible, it’s still best to avoid techniques such as ‘text-indent:-9999px’ or ‘margin:-4000px’ or ‘left:-2000em’.”

    I didn’t say “avoid at all costs”. I’m just trying to let people know the current state of spam detection so that if they care about rankings, and if they could find a less risky method than hiding text, they now know the facts when making a decision.

    [Reply]

    Ceri Reply:

    I understand where you are coming from but (in my personal opinion) your blog post read as if using text-indent -9999 etc is such a damaging thing that it could case people to “avoid it at all costs” meaning that they end up avoiding sprites, or worse they use sprites but with no text/anchor text at all losing a massive amount of page relevance.

    Which would be worse using text-indent -9999, or not adding any anchor text at all (Which would be syntactical incorrect).

    [Reply]

    Steven Luscher Reply:

    I’d just like to take a moment to build upon what ceri said. Using the “text-indent” CSS property to replace a piece of text with an image (it’s called the “Phark” method) is not just a clever trick – it’s also a performance measure.

    Once we’ve put many, unrelated images into one image file, we can use the “background-image” property to attach that image to an element on the page, and the “background-position” property to slide the desired part of the image into view. This allows us to cut down on the number of image asset requests that a browser has to make. Every unique image that you embed on a page using the “img” tag launches a separate image asset request, with all of the latency that comes with it. Yahoo is pretty unequivocal when they say that minimizing asset requests is “the key to faster pages.” http://developer.yahoo.com/performance/rules.html#num%5Fhttp

    For those that are new to the concept of interface sprites, this sprite image, together with my explanation, should make the performance benefits of CSS image replacement clear: http://www.flickr.com/photos/mezzoblue/3217540317/

    [Reply]

    Ceri Reply:

    Thank you, that is exactly my point. Sprites are a very important speed enhancement to all modern sites.

    Without using the text-indent trick there is no way of adding relevant text to these area’s, when it is for example a menu item that you are using a sprite for not having any anchor text would be a disaster SEO wise.

    [Reply]

    Walter Ian Kaye Reply:

    Not all browsers support sprites. Specifically Opera Mini on my cell phone. Fortunately Facebook Mobile only used a sprite for a relatively short time. In short, sprites are not mobile friendly.

  8. If anyone wants to spam SE’s there are tons of methods to do that. A very elegant CSS trick to use image inside header should not be punished at all. If this CSS technique can be used for spamming , alt tag can also easily be used for spamming.

    So Google is basically still not trying to avoid spamming , they just try to force people to use what they want. Google should seriously stop forcing people using what they want. Internet is not based on Google.

    And while we are talking about Spam , why does Google still keep all those spam , crack , warez sites in their Search Index ?

    [Reply]

  9. Comments strip html code

    You can easily spam Google with using suggested alt tags. You can add title for your h1 and put your spam explanation inside your title and then you can put spam keywords inside image alt tag.

    [Reply]

  10. Good to hear clarification straight from the horse’s mouth on this.

    Do we need to wait for next Towel Day for your thoughts on the Guest Blogging issue?

    [Reply]

  11. There is a similar technique in widespread use for CSS menus. The Son of Suckerfish menu hides links using position: absolute; left: -9999px; (see: http://www.htmldog.com/articles/suckerfish/dropdowns/). This seemingly benign application can be exploited to hide links.

    Content is commonly hidden and collapsed using JavaScript
    (http://www.learningjquery.com/2006/09/slicker-show-and-hide). This technique also has the potential to be exploited.

    What’s particularly interesting were the remarks about the “algorithms designed to detect when text is hidden/positioned off screen” and how these other techniques relate to “the signals that may cause us to believe your site is deceptive.”

    [Reply]

  12. Sean, the key question is “how to algorithmically determining intent”, respectively “does Google trust their algos enough to penalize webmasters automatically for textual content that’s hidden on finish of page load”. I’m pretty sure that Google’s anti-spam algos do approve such stuff in most menus, site logos and whatnot. I’m suspicious of unavoidable false positives.

    [Reply]

  13. But but but…ah dammit.

    I get that you’re saying it’s a “signal” totally. I also get and agree with other folks who are saying there are other tons of ways to spam the SE with on and off page stuff.

    I’ll take my tinfoil hat off and say I assume that a few “possible” signals here and there aren’t going to generate an automatic penalty unless a definite spam signal is detected?

    [Reply]

    Maile Ohye Reply:

    True, Martin. Our detection of hidden text alone certainly doesn’t generate an automatic penalty.

    I wrote the post because while a webmaster knows that spamming alt text is an obvious trigger for a search engine while adding descriptive alt text is fine, I want you all to know that the same can’t be said of the technique of hiding text — at this moment, hiding text isn’t as cut-and-dry/carefree with us. So, when you’re designing a site you can make more informed decisions about what when and how you might take risks.

    [Reply]

  14. We just couldnt leave your website before saying that we really enjoyed the top quality information you offer for your readers… Would be back often to check up on new stuff you post!

    [Reply]

  15. You wish you had “top-secret algorithms designed to detect when text is hidden/positioned off screen”.I can send you 20 examples of sites rankings for competitive keywords that are using that technique. Plus another 100 where the use of that tecnique is legitimate. Please, do not use FUD tactics anymore, it is starting to get boring!

    [Reply]

    Maile Ohye Reply:

    Digimon, the boring FUD was actually my failed joke. We don’t have an “important red phone” either. Many of us, at least in engineering, don’t even have desk phones (I think I only used mine once a year). Interestingly (to me), they’re now opt-in and not provided by default.

    [Reply]

  16. You have an image with a pig and text that says: Save with our bank now!

    Save with our bank now!

    These two techniques produce the same result. What is the problem? When you need to use sprites, the text indent ‘trick’ makes the site load quicker for users. If it was best practise to stick a pencil in your eyes, would you do it? No cause its stupid and there are alternatives.

    It’s the same with the following, which will get you penalised regardless of what technique is used… best practise or not.This is deceitful because you’re packing keyword rich text into it that doesn’t have anything to do with the picture.

    Money saving techniques save techniques with bankname now!

    Apple and WordPress do it… why can’t anyone else? The widely used HTML and CSS specs are very old… why are standards and Google holding back a technology that is forever moving forward?

    [Reply]

  17. How about using z-index along with CSS sprites? This is what I typically do:

    Home

    Then in the CSS I set a background-image for #home and the appropriate hover effect to position the image and set the z-index of #accessibleHome to -1 (also don’t forget to set position to relative, absolute or fixed). This way, if a user has images disabled he/she will be presented with the ‘Home’ text that was sent back using z-index.

    Is this also considered ‘bad’ and should be avoided?

    [Reply]

    AS Reply:

    Since I can’t edit, what I typically do is put a ‘span’ inside an ‘a’ element (or any other element) which also has inside it the alt text (e.g. Home as in this case) and then do the rest with CSS as described.

    [Reply]

  18. Analogy:

    Walking into Red Lobster dressed up like a gangster isn’t going to get you kicked out of the restaurant–but if you and your rough looking friends start making noise, you might be thrown out quicker than other noise makers, since eyes might already be on you?

    Perhaps negative text-indents trip a flag, and after a certain number of flags are tripped, a site goes under manual review?

    If you aren’t up to any sneaky tricks with a site, I wouldn’t worry at all about image-replacement or other legitimate uses of negative text indents.

    [Reply]

Leave a Reply

Your email address will not be published. Required fields are marked *