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 Responses to “HTML “text-indent: -9999px” and holding the line”

  • 1 Luigi Montanez Says:

    Thanks for these insights Maile.

    I had listened to the podcast between you and Vanessa Fox from a few months back, and I’ve been working on a blog post on this exact topic. Just as I was about to publish it, I checked your website again, and saw this post. Incredible coincidence on Towel Day.

    http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

    [Reply]

  • 2 Bob Gladstein Says:

    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]

  • 3 Graywolf Says:

    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]

  • 4 Ben Griffiths Says:

    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]

  • 5 Hunter Says:

    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]

  • 6 Luigi Montanez Says:

    In the podcast I referenced, it was mentioned that using the alt= attribute on an image is an acceptable alternative.

    So if I do , will Google consider that an equivalent to My Site Title?

    [Reply]

    Luigi Montanez Reply:

    Urrgh, the comment box stripped my HTML code. Here’s a link:

    http://gist.github.com/413544

    [Reply]

  • 7 SearchCap: The Day In Search, May 25, 2010 Says:

    [...] HTML “text-indent: -9999px” and holding the line, Maile Ohye [...]

  • 8 Sebastian Says:

    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]

  • 9 Andrew Hedges Says:

    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]

  • 10 Ceri Says:

    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.

  • 11 Mert Gokceimam Says:

    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]

  • 12 Mert Gokceimam Says:

    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]

  • 13 Andy Nattan Says:

    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]

  • 14 Sean R. Says:

    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]

  • 15 Sebastian Says:

    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]

  • 16 Marty Martin Says:

    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]

  • 17 Londa Hoobler Says:

    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]

  • 18 Google & Site performance: The compilation answer album | Maile Ohye: Love & Technology Says:

    [...] comments from my last post about text indent made me feel like Captain Hammer, so this time I’m crossing my fingers to make allies, not [...]

  • 19 Digimon Says:

    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]

  • 20 Google considera text-indent: -9999px SPAM | Webtags Says:

    [...] fato é do conhecimento de todos a muito tempo, mesmo assim,  fiquei surpreso ao descobrir aqui e aqui que o Google começou a punir esse tipo de técnica classificando o site como [...]

  • 21 » SEO黑链,你还能猖獗多久? PPC网络赚钱 Says:

    [...] Google工程师Maile Ohye在博客上写到,有些东西不方便写到Google管理员工具,就在她自己的博客里面分享了一个SEO技巧:如果有可能,请不要使用类似于text-indent:-9999px,margin:-4000px;left:-2000em的CSS代码.( If possible, it’s still best to avoid techniques such as “text-indent:-9999px” or “margin:-4000px” or “left:-2000em”. ) 相关文章: 互联网生活才刚刚开始,Internet仍然有很多机会 [...]

  • 22 Reverse Phone Search Says:

    I am new on your site but I must say that your blog is quite informative.

    [Reply]

  • 23 Ceri Says:

    This this comment may be spammy… considering the user’s name and the URL they entered in…

    [Reply]

  • 24 SEO Checklist Part 2: Best Practices Says:

    [...] -9999em; left:-9999em;display:none, etc), which is not ideal because the search engines may discount this as hidden text. Important: resist the temptation to work in additional keywords or text into the text replacement, [...]

  • 25 SEO Checklist Part 2: Best Practices | TMMWW Says:

    [...] -9999em; left:-9999em;display:none, etc), which is not ideal because the search engines may discount this as hidden text.Important: resist the temptation to work in additional keywords or text into the text replacement, [...]

  • 26 SEO Checklist Best Practices | One man SEO Says:

    [...] If you must have graphical navigation, do you use the CSS image replacement technique as a workaround, and do those graphics have descriptive and keyword-rich ALT attributes that are useful for both humans and search engines? Image Replacement is a technique that employs CSS (Cascading Style Sheets) to substitute in replacement copy and HTML – such as a text link or heading tag – when the stylesheet is not loaded (as is the case when the search engine spiders come to visit.) The text-based replacement is weighted more heavily by the engines than the IMG ALT attribute — thus it is preferable to relying solely on the ALT attribute. Of the many ways to implement the image replacement technique, most use CSS to physically move the text off the screen (text-indent: -9999em; left:-9999em;display:none, etc), which is not ideal because the search engines may discount this as hidden text. [...]

  • 27 SEO Checklist : Best Practices | One man SEO Says:

    [...] -9999em; left:-9999em;display:none, etc), which is not ideal because the search engines may discount this as hidden text.Important: resist the temptation to work in additional keywords or text into the text replacement, [...]

  • 28 Removing Page Titles In Thesis — Jim F Munro Says:

    [...] a recommended solution because of the possibility of being construed (by the search engines) as a nefarious, evil, black hat technique. Oooooh *hand [...]

  • 29 How To Silo Your Website: The Masthead | seo cloak Says:

    [...] situation I suggest using an image replacement technique. Now this is not a clear cut issue, and some people at Google don’t endorse it. So if you are going to use it make the image exact or very close to the text being replaced. The [...]

  • 30 Put Your Top Keywords In The Masthead | DevWebPro Says:

    [...] situation I suggest using an image replacement technique. Now this is not a clear cut issue, and some people at Google don’t endorse it. So if you are going to use it make the image exact or very close to the text being replaced. The [...]

  • 31 Dominic Watson Says:

    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]

  • 32 AS Says:

    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]

  • 33 Springboard SEO Says:

    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