Is hiding text with CSS to improve accessibility bad for SEO?

Almost five years ago I posted an article titled Google, SEO and using CSS to hide text. In the article I brought up the possibility of getting in trouble with Google and other search engines for using CSS to hide text for accessibility reasons.

Both at the time and several years later the general reasoning among developers (at least as far as I am aware) has been that as long as your intent is not to fool the search engines you should be fine. But is that still the case?

The reason I’m asking is that a client has hired an SEO company that claims using CSS to hide text – any text, for whatever reason – is likely to result in an automatic search engine penalty. Not necessarily a complete removal from the index, but a lowered ranking.

Techniques that this affects are various image replacement methods, positioning content off-screen (sometimes also called the off-left technique) and other methods that involve using CSS to hide pieces of text from sighted visitors but not from screen reader users.

Considering that many people have been using these techniques for years and seem to be doing just fine with search engines, I really wonder if there is any truth to the SEO company’s claim.

What does Google say about hiding text then? The closest thing to an answer I’ve been able to find is the following from an article called Hidden text and links on their Webmaster Central (emphasis added by me):

If your site is perceived to contain hidden text and links that are deceptive in intent, your site may be removed from the Google index, and will not appear in search results pages. When evaluating your site to see if it includes hidden text or links, look for anything that’s not easily viewable by visitors of your site. Are any text or links there solely for search engines rather than visitors?

The intent of hiding content to improve accessibility is most certainly not deceptive. Content hidden for that reason is there for visitors who can’t see the screen (or who happen to be using a text browser that doesn’t support CSS). Sometimes that includes search engines.

Obviously hiding heading elements stuffed full of keywords should be penalised. But one would hope that a manual review is performed to avoid incorrectly penalising sites for hidden content that is not “deceptive in intent”.

Does anyone reading this happen to have any reliable and current info to share? Does it matter which CSS technique is used to hide content? Does it matter what HTML elements are hidden? Pointers to a definitive and authoritative answer would be fantastic.

Posted on October 11, 2010 in Accessibility, Search Engine Optimisation

Comments

  1. October 11, 2010 by Anonymous

    i use a lot of display: none to hide complete menus from search engines, as well as text and individual words. no problems since years.

    i did have problems when manipulating the DOM after onload, that is modifying the cloaked content back to some more legible form. that didn’t work out too well.

  2. I had a project earlier this year that raised very similar issue. The design has included a drop-down list (and form) to select a country website, but I needed to preserve the links to other country sites as real links.

    I wrote up the case here: Search-engine friendly country site select boxes

    Basically I offer what I called “enhanced content” to users with Javascript disabled (IE I hid the links).

    In this Google Webmaster central post a Google Employee says that “The key is whether or not there is a mechanism - either automatic or one that is invoked by the user - to make the content visible”. If you create valid code, you’re safe…

    /jAmES.

  3. I’ve heard this from some supposed SEO ‘experts’, but have seen no direct evidence that hiding content for accessibility has an impact on search engine rankings. Many very significant sites, including Google itself, use off-screen text and there is no indication anywhere of SEO penalties.

    A recent client of ours was concerned about this and received direct, though unofficial, confirmation from someone at Google Search that these techniques have no impact so long as their use is not “deceptive or malicious”.

  4. I use the off-left technique to ‘hide’ skip links on my own site. I know, it’s a controversial issue in itself!

    I haven’t noticed any problems with Google, or any search engine for that matter.

  5. I think we all agree that “deceptive intent” here means “keyword stuffing”. Honest reasons for hiding content might be :

    • Image replacement
    • Clarifying page structure (eg titles for screenreaders)
    • Preloading scripting text (eg error messages and such)

    There doesn’t seem to be a lot of techniques to distinguish between “honest” and “deceptive” intent, but comparing the keywords present in the page and those hidden, and considering if they repeat from page to page would give a fairly accurate view.

    With that reasoning, I trust that sprinkling header tags containing “search” and “navigation” won’t impair a website ranking. Image replacement is another story though…

  6. I agree with Jared and Goulven. Honest, discretionary hidden text should not nor does not hurt rankings. If you use web standards and provide good content, you’ll be fine. I believe tweaking textual content is fair game, but definitely stay away from stuffing keywords off-screen and in alt attributes, etc.

  7. Nine times out of ten, the offscreen text is simply the explicit label for a graphical UI element (image replacement). The graphical ui is used for sighted, graphical-UA-using users and the off-screen text is used to actually clarify the UI for people using assistive devices – hardly a deceptive practice.

    I’ve never heard of this working against a website. It sounds like there’s a new crop of black-hat SEO experts out there spreading new FUD about building standards-based and accessible websites.

  8. If true, this is horrible and quite depressing..

    Currently studying HTML5 in details I can’t help worrying if/why nobody came up with the idea of adding an <accessibility> tag, which – in time, when adapted in searchengines’ spiders and bots – should allow adding content for people who need it.

    We (web developers) can’t accept not being able to present content for blind people – and they can’t live without it…

    And thanks for sharing this question Roger!

  9. Roger, don’t worry, there is a manual review in force in Google for websites that are possibly picked out as spammy. As long as you use any of the replacement techniques (e.g. just replacing what is already available in images or flash), there is no need to worry.

    Of course, hiding text via CSS just to stuff some keywords in has always been a bad idea!

  10. Admittedly when I first heard/read this was a few years ago now but the advice was that Google only penalised hidden text when the CSS was inline in the HTML and that it didn’t pay attention to CSS in external stylesheets, especially if the CSS directory was added to robots.txt.

  11. October 12, 2010 by André D

    I agree with what Google’s Matt Cutts says in this video: http://www.youtube.com/watch?v=fBLvn_WkDJ4

    If you’re hiding text content in favor of an image, you should use an img with the alt attribute instead of CSS techniques such as the -9000px margin. That’s what alt is for. Incidentally, this is also an argument against using CSS background images for images containing text, which makes it easier to style for printing anyway.

    Another related Matt Cutts video.

  12. October 12, 2010 by HeyHudson

    I work for a large government website in the UK and accessibility is one of our number 1 priorities. We hide content quite a lot when needed for accessibility purposes and we recently heard from Google that it is OK to do so.

    Afraid I don’t have an actual document/source I can supply you with, but it was straight from the horses mouth, so to speak.

  13. I did a bit of research regarding this not so long ago and came to pretty much the same conclusion as you have.

    But recently I learnt something new; that hiding text with CSS when working with Rich Snippets is not a good idea.

    Source: How long does it take for rich snippets to appear – GoogleWebmasterHelp

  14. October 12, 2010 by Matthew

    Tell your client to sack their SEO company.

    They are clearly just reading from an “SEO cheat sheet” and have no real understanding of how methods such as this are deployed in the wild.

  15. The problem with the alt attribute comes when you’re using CSS Sprites, which are actively encouraged by Google for speeding up page loads. They use them themselves in abundance.

    You would think that if they encourage CSS Sprites, they would also provision for their use as long as you’re not being spammy.

    I’ve used CSS Sprites on a number of sites with text shifted off-screen and seemingly received no penalties.

  16. Tell your client to sack their SEO company.

    I’d just reply to the SEO company: Thanks for this recommendation. But this specific change you asked for would lessen the accessibility of the website, or require that invest further time and effort in finding an alternative solution. Since the current solution is not discouraged by Google or other search engines, can you provide proof that it is actually problematic, and estimate the negative impact of the current solution?

    There is a lot of not-so-competent SEO professionals out there—SEO people say so themselves. In conflicting situations, asking for some kind of proof, even though it might not be scientific proof considering the secrecy of search engine algorithms, might be the way to go.

    Currently studying HTML5 in details I can’t help worrying if/why nobody came up with the idea of adding an <accessibility> tag, which – in time, when adapted in searchengines’ spiders and bots – should allow adding content for people who need it.

    Please, no. The goal is to make every feature of HTML accessible, not to provide the local equivalent of the dreaded plain-text alternative website. Regarding adding an accessibility element, what would it do and how would it work? How do you define “people who need (accessible) content”? Would the content of the accessibility element be for blind users only? Or would it be for blind users, deaf users, old users who may need bigger text, people with cognitive disorders, etc. Would you use an audience attribute on your <accessibility> tag to target specific handicaps?

    You may want to read more about accessibility techniques for HTML documents. HTML has very good accessibility potential, we just need to use it right. I might be wrong, but I think there is no need for a specific accessibility element.

  17. How would Google know about CSS text hiding? Parse the CSS files aswel? Nah, show me the evidence or just move along you SEO cowboys.

    I tend only to use the image tag if the image is actually content. Other images as a background. One ambiguous area would be something like a logo in the masthead for example, which could be construed as content.

  18. An ‘accessibility’ tag, or similar, would be fine if everyone agreed to use it appropriately.

    If it was a free ticket to keyword stuffing that google honoured, you can bet it would be abused. Same with offleft and any other technique.

    Pretty sure google’s automated assessment of content considers a lot of factors. How much is hidden (ratio of hidden to visible), whether it can become visible (by analysing css/scripts), the content and markup of hidden areas vs the visible areas.

    I don’t have any firm evidence but consider: these web development techniques have been in use for many years now, and search engines still show pretty decent results. The system still ‘works’ imho. Don’t panic! ~:)

  19. Our recently launched website, may have fallen foul of Google and problems with hidden text as well as having been manually reviewed and knocked off the search engine for the “obvious search phrase”. It originally appeared low down the listing and has since disappeared. Unfortunatley it is the name of our business !!!

    It’s a bit annoying as inspection of the site will show that although highly optimised, there is nothing particularly spammy about it. To our disadvantage, there are currently not a great number of inbound links - it’s a soft launch and we’re not promoting too hard at the moment.

    Many of the sites appearing as a result of that search phrase, may not also not have too many inbound links, though appear on older domains. Also I suspect there maybe a slightly different set of rules for searches around phrases like “For Sale” where there is a great incentive to spam.

    All in all not too bothered at the moment as the main portal is being built on another domain altogether, though we will be monitoring the situation as closely as possible. Any hard and fast evidence with respect to CSS hiding text causing a penalty will be welcome here also. All we basically do is standard image replacement and use off screen techniques for accessibility purposes.

  20. October 12, 2010 by Roger Johansson (Author comment)

    Thanks for your feedback everyone. Seems like most of us can agree that hiding non-spammy text to improve accessibility should definitely not be penalised.

    James:

    In this Google Webmaster central post a Google Employee says that “The key is whether or not there is a mechanism - either automatic or one that is invoked by the user - to make the content visible”.

    In most cases the content will only be visible to users who use a screen reader or a browser with CSS disabled.

    dusoft:

    Of course, hiding text via CSS just to stuff some keywords in has always been a bad idea!

    Yes. I think it’s a good idea to make sure you don’t accidentally hide any text that contains relevant search keywords for the site (which I’ve seen happen). Better safe than sorry, even if the text is relevant and the intent is not deceptive.

    André:

    If you’re hiding text content in favor of an image, you should use an img with the alt attribute instead of CSS techniques

    Yes, that’s generally a good idea.

    Egor:

    How would Google know about CSS text hiding? Parse the CSS files aswel?

    It wouldn’t surprise me at all if they do, actually.

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.