Google, SEO and using CSS to hide text

Many standards aware developers use CSS to hide text for accessibility or usability reasons such as hidden skip links and form labels, image replacement, or displaying help text only when requested by the user.

Those are all legitimate reasons to hide text, but many developers have still been worried that Google and other search engines may start to algorithmically flag any sites that use CSS to hide text as possible spammers.

Up until now, that has not been the case (at least not officially), but in the post SEO Mistakes: Unwise comments, Matt Cutts, who works at Google, states that I don’t recommend that people use CSS to hide text. That statement of course generated a whole lot of comments and questions from worried developers and webmasters.

Imagine if legitimate use of CSS to hide text would risk getting a site penalised, or even banned from Google and other search engines. That would be a disaster for many sites built with modern web development methods.

Fortunately that does not seem to be the case. Matt responds in a comment to the post Google Engineer Hammered over CSS Spam Comments at Threadwatch.org:

If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad.”

That is pretty reassuring, but I can’t help worrying about Google (and other search engines) implementing algorithms to programatically find text that has been hidden by using CSS. In another comment on the same post at Threadwatch.org, Matt Cutts says that:

We can flag text that appears to be hidden using CSS at Google. To date we have not algorithmically removed sites for doing that.

While it’s good to know that sites are not currently being removed without a manual review, that could change in the future. So I would advise anyone making extensive use of CSS techniques that hide text to make sure that it can’t be mistaken for spamming.

Posted on October 21, 2005 in CSS, Search Engine Optimisation

Comments

  1. October 21, 2005 by zcorpan

    I’ve always been against hiding text techniques. If you don’t want to display it changes are it shouldn’t be there in the first place. If you hide text for image replacement techniques, it will fail accessibility when images off but CSS on. For “hidden labels” in form fields, I think the title attribute could be used instead.

  2. October 21, 2005 by Tim Swan

    One would hope that if they are smart enough to develop an algorithm to find text being hidden with css they would also be smart enough to allow for things like Skip Navigation links.

  3. zcorpan, you make zero sense :)

  4. I think the crawlers should be smart enough to make out what is keyword-spam and what is not, especially when they can (can they?) smell out contextual text.

  5. October 21, 2005 by Aaron

    zcorpan, isn’t the whole point of hiding text to aid in getting better search engine response? Adding an absolutely positioned header (out of visibility) to your page helps identify, instantaneously, what the page is about (if written correctly). With styles or images disabled, a user can easily see what a graphic would represent. A graphic with this information definitely wouldn’t suffice. I’m sure if we keep writing our hidden text in appropriate manners, we will not be penalized.

  6. zcorpan, as noted you are making no sense. Hiding text and showing images are the only way you make google index the “image” without destroying the cisual design of your website, if you know what I mean. Here is an example of image replacement for the text, all images are plain text, with nasty CSS to hide it ofcourse.

    http://webshop.steinhaug.no/easy-webshop-funksjonalitet.php

    Sure, sometimes it’s just to temting for people (I’ve done it myself) to add a little extra text in the display: none; when you are working with a site. Can’t really blame one for doing so, it ain’t a perfect world when you look at it, and there has not been panalties for it either. On the other hand there are probably more legit reasons for using hidden divs than there are for using them for SEO, so I would be very surprised if websites in future will be penalized for doing so.

    If this is the future of google - which I doubt - I will surely switch over to MSN, been getting good results there lately, :D

  7. Aaron, its kinda a funny argument, the one of accessability. A SEO person often does alot of image replacements and stuff like this for the single purpose of getting better position in the SERPS, nothing else really matters, when getting picked at one could always argue that it’s the accessability which is in focus… thats why all this hidden extra divs and text… think of all the users on lynx…

    Whichever way - the accessability get’s better, and ranking gets better (since text is accually indexed) so its a win win situation for everyone.

    As a sidenote I very much liked this article, but I guess google wouldnt like this?

    http://www.maxdesign.com.au/presentation/more-links/

    Again, one could argue that its more accessible (Hence google can’t penalize such behaviour) - or more SEO (google should penalize such behavior)…

  8. Can’t help feeling that if Google starts large scale penalising of sites that use CSS, it won’t much matter whether the use was dubious or legit - the message will largely be lost except for the part that CSS is bad for SEO.

    And that could seriously harm the web standards movement.

  9. October 22, 2005 by theUg

    Imagine the situation: you have a large text, weighing in quite a few KB. In order not to torture the user with the seemingly endless scroll, one can be tempted to hide this whole text, leaving only table of contents. Then user would click on the link and the text would appear on, say, chapter by chapter basis. I am tempted to offer this in my library, so I ponder.

    By the way, ALA even had an article on how can this be done (nothing complex, certainly).

    As for image replacement, I would argue towards PHP tecniques, that let you automatically produce serverside images for certain tags (as for [h1] for instance) so you would get nice lettering and yet your HTML stays clean. I think ESPN.com headers done this way (I opened the site in an older Mozilla version under Linux and it replaced the pretty image with regular heading text).

  10. October 22, 2005 by Roger Johansson (Author comment)

    zcorpan: I don’t like hiding text either, but there are cases where it is useful.

    There are image replacement methods that work in the “images off/CSS on” scenario. An extra span element is required, but it doesn’t have any harmful side effects. I’ve been using a bit of image replacement (though not for headings) for a graphically intensive project I’m working on, but normally I try to avoid it.

    Kim: Hmm. Interesting point about the accessible more links.

    Steve: Agreed, but I don’t see why Google would start penalising sites that use CSS. Sites that use CSS to hide spam, however, may (and should) be penalised.

  11. I totally agree with Amrit here, Google are not going do something that will alienate the owners and developers of thousands of sites that are using accessible text-hiding techniques as long as what they are hiding isn’t an attempt to spam search engine results.

    Even if Google get to the point of using bots to discover sites with hidden spam text I would expect Google to be capable of creating an algorithm that generates a very small percentage if any false positives.

    What would be nice is if Google could develop a document stating what is and isn’t allowed. That way we can tune our sites hidden links and image replacement to avoid any ambiguity that would result in being falsely labelled as a content spammer.

  12. Stuart: Google actually has a document like that: Google Webmaster Guidelines

  13. Oh my, google hints something and the developer world goes wild!

    I am quite sure that not the technique per se will be punished, but the content that is conveyed with it. Meaning that if your content is just text then there is not much of a problem, if it is a plethora of internal links with keywords then it is.

    The dynamic text example above is a good one: If you want to offer a dynamically expandable and collapsible FAQ for example, then CSS is not what should be your first and only technique.

    Many developers make the mistake to hide things with CSS and then show it with scripting - or rely on :hover to show it which does not work in MSIE and requires a mouse - which means that when scripting is off the visitors will never reach the content unless they also turn off CSS. If you want to dynamically hide things then add the CSS to hide it via scripting by altering the className attribute.

    This had the ugly side effect that all the content flashed first and then got hidden, but you can circumvent that by using Dean’s onload trick (http://dean.edwards.name/weblog/2005/09/busted/) or write out the styles dynamically via document.write.

    An example would be my blog or onlinetools.org . There you get the site collapsed when JS is enabled but as a long list when it isn’t. There is even a “simple list view” for visitors who don’t like dynamic collapsing stuff. I am sure that google is OK with that, too.

    I do see far too much image replacement and hidden text being used nowadays, and skip links are a good example.

    A skip link benefits a keyboard user as much as it helps screen reader users. By hiding it you expect the keyboard user to turn off CSS or use a text browser to see it? You can work around it by using the :active and :focus stuff like molly at molly.com does, but I still consider a visible skip link much more helpful to the visitor and it shows much more that you did something in terms of accessibility than any banners or well-versed accessibily statement does.

    It is all a matter of using the right technique. As there is no chance to check in CSS if images are supported or not, it might be a good idea to make your replacements dependent on a technique that can check if images are supported. You could put the lot together: check with a simple JS if images are being loaded and supported (as in PPK’s JIR technique), then add a class to the body and make all your IR techniques dependent on that class.

    And don’t forget that images can be content, too, and all they need is a good alternative text in the alt attribute, no fancy replacement techniques.

  14. October 22, 2005 by Roger Johansson (Author comment)

    Chris: All good points, and I certainly don’t promote excessive use of CSS to hide text.

    Regarding skip links, you’re right that they are much more helpful when they are visible. Sometimes you may need to compromise and use the technique at molly.com (or 456bereastreet.com for that matter). And no, I don’t need to compromise on my own site, so expect the skip links here to become visible in the near future ;-).

  15. I don’t agree with Chris and Roger on the always-visible-skip-link. What’s the meaning of the skip-link on Chris’ homepage with styles on? It just brings you 20 pixels down the viewport. That’s got nothing to do with accessibility (or usability)…

    “A visible skip link […] shows much more that you did something in terms of accessibility…” - says Chris. I’m afraid it’s not a matter of exposure here (well maybe it is for cracks like Chris, Molly or Roger), but to my clients design is more important. They just want to sell their products, not their skip-links.

    Maybe we just have to get used to it, but in my opinion a visible skip-link on the most important area of your homepage is not desirable.

  16. October 22, 2005 by Roger Johansson (Author comment)

    Tom: If you can’t use a mouse the skip link is very, very useful on Chris’ site. Try tabbing to the content and you’ll see what I mean.

  17. Let us also not forget that a skip link is only needed when the navigation is a lot and keeps users to get to the content easily. If you put your nav after the content and use styles to position it then there is no need for them. Design issue solved.

  18. I believe there will always be legitimate reasons to hide text. I also believe that search engines have a pretty good chance to suss out hidden text spamming reliably.

    F.ex., most lucrative spamming involves links, and I can think of very few reasons to hide links, most of which (like skip links) are easy to recognize. What’s more, I can think of practically no reason to hide multiple off-site links on a page. And if a linked site is known spammer material then a hidden link to it should be a very reliable criterion that something fishy is going on. Non-link hidden text like keyword stuffing does not seem nearly as problematic; and even that is probably statistically flaggable, if not reliably detectable.

    So I don’t see any reason to fret. If you are a little careful about hiding links and your motives are actually upstanding, it seems you should have no trouble at all.

  19. There are more reasons to hide text than just skip links and headline image replacement … and they are usually about providing better accessibility for people using assistive technology.

    I use hidden text to give blind visitors extra clues about the site. For example:

    • A brief list of the access keys that are useful on the site
    • For very complex pages, I include “mileposts” which identify where the person is on the page, i.e. “Start of right column”.
    • For complex tables, I include the table summary describing the table layout.”
    • For personalized portals (MyYahoo, Google) there are lots of places where hidden text helps a blind person make sense of the page.

    Google challenge: Build yourself a personalized portal page at Google. Now, find a screen reader, turn off your display, and listen to the page. See if you can make any sense of it. Google has a lot to learn about accessibility, and doesn’t need to be breaking my use of hidden text.

  20. Bob, what you do is nothing punishable IMHO. Especially adding the appropriate attributes like summary is not adding hidden text but filling necessary data. On the other hand I have had quarrels with SEO agencies abusing the summary and alt attributes.

    Just wondering - I thought by now we realised that accesskeys are more of a nuisance than a help because of their technical issues (wats.ca have a lot on that issue), and they will be ditched in the WCAG2, how are your experiences? - how is “start of right column” helping a blind visitor? Doesn’t a wording like “related items” or “end of main content, following are promotions to other parts of the site” make more sense?

  21. October 23, 2005 by Felix Winkelnkemper

    Chris: There is a need for a skip-link even if you put the navigation below the content. You have two choices:

    If you put the navigation first, place a skip-link to the content.

    If you put the content first, place a skip-link to the navigation, as someone who just wants to navigate to another section of the website normally does not want to read the whole content first.

  22. Skip to navigation: How did that user end up on this page then? And I thought the links menu of the assistive technology helps in this case. Furthermore, unless the content has a lot of internal links or forms, reaching the nav should be the matter of some tabs. The problem of navigation first is that I need to tab through all links before I reach the content.

  23. Hidden text does not equal spam: There are popular techniques like image replacement or ECMAScript driven menus which “prove” this.

    An algorithm to detect spam might consist of hidden to visible content ratio assessment, or a content analysis of the hidden text (if it covers no keywords from meta data or visible text, it might be spam, for example).

    Since one cannot (or: should not) generalize this issue, and since there are ways to estimate if hidden text is spam, I believe in a reasonable solution.

  24. A straight “A” case for SEO vs. Accessibility. I’m not at all against hiding text for good reasons. I use links such as skip to here, skip to there, and hide them, so that people using readers can easily find what they want. I create the HTML before CSS, and make sure that the HTML is readable and easy before applying CSS. I hope Google won’t switch to automating the work. Then we’ll have to make a very hard decision on what to follow, accessibility to people, or marketing to bring in new people.

  25. Markus: Thanks for the link.

    I have emailed Google to ask for their official view on hidden text and whether they have any more specific advice for developers using text hiding techniques for legitimate reasons.

    I’ll let you know what they say should I receive a response.

  26. I assume it’s for only media screen as display:none is sometimes useful for printed media.

  27. Answering Chris Heilman’s “just wondering” questions in comment #20.

    I agree that accesskeys may not be the most useful thing in the world, but they have not been deprecated in WCAG 2.0. They are not mentioned in the normative part of the spec, but are offered as a technique in the HTML Techniques for WCAG 2.0 document, as part of section 9.9 Keyboard Access. By the way, they were not mentioned in the normative part of the spec for WCAG 1.0 either; only in the techniques document.

    My “start of right column” example was bereft of context. That particular situation is one of a portal that can be highly personalized, and the individual might remember that one of his favorite parts is in the right column. Use of the other clues you suggested are very appropriate.

  28. October 24, 2005 by Barry

    How are spammers accessing & hiding their links in apparently unsuspecting sites headers??? Please mail me for the many Spam URL’s & also to see the thousands of quality backlinks from Yahoo! & Google, I am baffled as I cannot believe that the site owners would allow such garbage…

    Have a Great Day!

  29. The Google algorithms should be able to recognize that a text-hiding selector lacks spamming purposes if the “media” attribute is set to “aural”, shouldn’t they?

  30. Regarding access keys: I think they can sometimes be very helpful for sites that you use a lot. For example, I would love to see an access key in Google’s search results for going to the next page!

  31. I’ll be interested to see what line search engines take when XHTML 2.0 comes in. You’ve got the idea there of allowing almost any element to have an “src” attribute, allowing it to be replaced with an image. So you’ve got the option of replacing text with unrelated images baked right into the language.

    Maybe the spammers will go crazy with that one.

  32. On skip-links once more: Paul Bohman provides An Accessible Method of Hiding HTML Content, which not hides the skip-link, but puts it out of the user’s sight with a margin-top:-500px.

  33. I hide text with CSS to help people that print out our website. For example: what you see on the website will be only copy plus some extra stuff. When you print it out, the copy stays, the extra stuff goes away, and I add a short “about this company” description, contact information, and the URL.

    If I have to worry that anything with a display:none attribute for a screen media is going to be flagged as SPAM, we may have to go back to creating mulitple versions of each site for screen, print, etc. goodbye benefits of style sheets.

  34. October 28, 2005 by Roger Johansson (Author comment)

    ..ak: That would indeed be bad for the web as a whole, but I don’t think it will come to that.

  35. Search engines’ current deficiencies include:

    1. Negligible understanding of synomyms and no understanding of context. I could write a great page about gardening without the words “gardening” or “garden” and the searchies would miss it.
    2. They favour long pages over short ones (I’ve seen the research, can’t remember the URL). This penalises concise, well-structured text and is therefore bad for users.

    Weakness 1 leads to the use of “keyword-rich text” to make it plain to searchies what a page is about and increase relevancy rankings. Keyword-rich text is verbose, repetitious and boring.

    So if you want high rankings but don’t want to bore readers, you sometimes need to use hidden text.

    It would be dangerous for searchies to penalise pages just for using hidden text, because they’d penalise:

    • most pages which use CSS to implement a drop-down or expanding / collapsing menu - including most tutorials on these techniques.
    • pages which use CSS to deliver tooltips and other supplementary information in situations where plain HTML can’t.

    And automatic penalties for hidden text would be ineffective because they’d miss spamming techniques such as:

    • displaying keyword lists in small fonts with very low contrast.
    • using CSS positioning to place other elements so they mask the keyword-rich text, i.e. hidden text without visibility:hidden or display:none.
    • simply lying about content by using keyword-rich text at the top which is unrelated to the page’s payload.

    456bereastreet is keen on accessibility. Which is better for disabled users?:

    • Hidden keyword-rich text preceded by a skip-link to concise, well-structured content?
    • Verbose, repetitious, key-word rich pages which are padded out to reach the optimal length for search engine rankings.

    I didn’t include an option “Concise, well-structured content with no hidden text” in that list, because search engines penalise that (see top of this post) and no site can afford to pursue accessibility to the point where it hurts search engine rankings.

  36. November 14, 2005 by Roger Johansson (Author comment)

    Philip:

    This penalises concise, well-structured text and is therefore bad for users.

    I have not had a problem with that on any of my own or my clients’ sites. None of the sites use any shady methods whatsoever and still rank very well for their relevant keywords.

    So my answer to your question would be “Concise, well-structured content with no hidden text”. :-)

  37. Do spiders actually open up a css document and check the tags to see if they use display:none I doubt this is the case since you can tell the spider not to.

    Hiding text in divs makes for a better user experience just as long as the user displays the div when appropriate.

  38. Hasn’t the text-indent technique already solved this?

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.