Grow your CSS skills. Land your dream job.

Last updated on:

Accessibility/SEO Friendly CSS Hiding

#content {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Removes an item from the page, without affecting page flow or causing scrollbars. Much better than display: none; or even visibility: hidden;

Comments

  1. Permalink to comment#

    Hello,

    For SEO purpose, be aware that this technique could lead you to be blacklisted.
    You can hide a mnu item, stuff like that, but if you hide a div full of h1 and anchors just for SEO purpose, google may blacklist list you

    So use with caution.

    • That has to do with what you are putting inside the DIV, not with this technique.

    • Mario
      Permalink to comment#

      You should also put top: -9999px; because of old opera.

    • Permalink to comment#

      This is bad practice! Period! Google will simply remove your site from their search results altogether. Google has stated time and time again thru webmaster central for web designers NOT to position elements off the screen. If you are going to need to hide an element use the “display: none;” property, and not “display: hidden;”. If Google penalizes your site for hiding content they will notify you if you have a webmaster tools account, otherwise you may get no notice at all of a manual action taken against your site. If you are penalized, simply submit a request for reconsideration to Google, and explain why you are using the “display: none;” property and prove its for legitimate use, such as having the elements appear with alternate sizes depending on the resolution of the users screen, hence “media queries” in CSS.

    • Sam
      Permalink to comment#

      I use flexslider and have numbers as a pager for the slides, 1, 2, 3, 4, etc, you can’t use ‘display: none’ or it would also hide the images you have set to replace the numbers. Text-indent shifts the numbers, allows you to show the images instead and also allows for screen readers.

      I see no problem with this technique, I have used it for awhile now and never been penalised.

    • Permalink to comment#

      you guys are talking about hiding content in 2013? stop talking about seo, you don’t know anything about it. lol. go stuff some alt “tags” like the other 95% that just reapeats the same crap.

      CTR, bounce. you wanna know seo, go read google’s about page and learn a programming language so you actually know how the algo might work. this hiding text stuff is crap.

      think an h1 is special? you’re years behind. the largest font on the page is h1. we ranked a site from 0 to #1 for seo los angeles by drastically reducing the bounce rate and increasing in the ctr while pumping up the reviews. that was 3 years ago, its still #1. who would have thought that google places weight on the metrics users provide? hrm. go figure. like users matter. lol. lets hide a couple keywords and call it seo friendly instead.

      1 http://www.google.com/about/

      thats seo, cro == seo
      you’ll be seeing that over the next few years, eventually you guys that mindlessly repeat everything and claim to be an expert will start repeating it. oh and 1 more thing, microworkers that all. ttyl =P

  2. I think that SEO hiding will be better to do with javascript.

    • You may have some merits here. As I understand JavaScript is a stumbling block for the search spiders. Is Google getting smarter now?

  3. Roie
    Permalink to comment#

    I wouldn’t define this as SEO friendly. In my opinion any hidden divs may cause you to get blacklisted

  4. Adam
    Permalink to comment#

    I have to agree that while in theory it could be considered bad, there are ligitimate uses for this code for purposes other then hiding SEO chunked keywords.

    I would say avoid it, but i doubt google has the time to check why it would be used.

  5. Emanuele
    Permalink to comment#

    My teacher at University described us a technique like this for accessibility purposes (i don’t remember very well. maybe for skiplinks.).

    Actually i’m not a fan of hiding text on a page but sometimes you have to… so thank you: this is another way to do the job.

    Personally i agree with Dalibor Sojic: for SEO i would use javascript.

  6. I use this al the time for access links and have never been penalised. I’ve also received comments from visually impaired people thanking me for making their lives easier.

    I wouldn’t want to risk using it for any dark side purposes though.

    • Permalink to comment#

      I agree with you.. Very useful for visually impaired people.. I wouldn’t use this for SEO, though.. I got blacklisted before, for using all kind of “tricks”, I wouldn’t do it again.

    • Leo

      “(…) I’ve also received comments from visually impaired people thanking me for making their lives easier.” – Nicholas Johnson

      I´m your fan, Nicholas. Really.

      So, kids: Forget Google. Its about users.

  7. Phil D
    Permalink to comment#

    I’ve seen both used but I’m curious if aonyone knows if using

    -9999em

    vs using

    -9999px

    make any performance/rendering issues or any difference at all?

    • Martin
      Permalink to comment#

      Phil D: eversince I got my 27′ iMac I prefer the -9999em, because even if you miss one digit it is more likely to be off the screen than -999px :) Same applies to text-indent

  8. Search Engines can blacklisted you after this

  9. I think it’s a blackhat seo for hiding contents

  10. 1. You won’t get blacklisted for doing this unless someone complains. The Google search-bot doesn’t read CSS.

    2. -200em, or larger, is preferable to using pixels.

  11. that is awesome

  12. If a search engine puts you in their blacklist for helping visually impaired people, then that search engine is retarded – that’s just my humble opinion.

    And one other thing, I would not be so sure that Google does not read your CSS. Probably not a full-blown CSS-parser, merely just looking if you hide big chunks of the page in a suspicious way ;)

    • Leo

      Couldn’t say better.

      If the search engines really care about it, they would start recommend something like that piece of css and role="screereader"or something similar.

  13. For SEO purpose, this technique could lead you to be blacklisted and try to keep clean and simple navigation which is also recommended for better usability

  14. Permalink to comment#

    In what situations would you use this code and how exactly is this better than “display:none” for accessibility?

    • Eleg
      Permalink to comment#

      @igor
      If you use an image as title with text inside it, you MUST provide the SAME alternative text.
      But if the image is CSS defined (via background-image) you have no place (=alt attribute) to put the alt text. By putting the alt text in a span in the Hx (=H1, H2 or…) and throwing it outside the screen with this technique, you allow screenreading softwares used by visually impaired and dyslexic people, and search engines bots to read this text. NB display:none hide content to screenreaders, so it’s useless to define an alt text :-)
      Some people prefer to provide “true” images with the alt attribute. But CSS images allow you to provide multiple sizes/contraste/layouts…
      If media=aural was correctly implemented by browser vendors (allowing us to use display=none in the majority of cases and display=visible/audible for visually impaired users), it won’t be necessary to use such a tortured solution!

  15. Before everyone runs off panicking that their site is full of black-hat techniques, GET REAL. Google only penalise for blatant abuses such as hyperlinks, text blocks and keywords that appear to be hidden from view.

    Providing accessible alternatives for (say) titles is acceptable practice. You only have to look at the search results for many high-profile websites’ that use SEO-friendly techniques to see that they are not being penalised.

    Screenreaders don’t care for CSS anyway, and as long as the content is accessible in situations where Javascript is turned off, you should be ok.

  16. I do not recommend using this strategy! A better way to hide text from the screen is using JavaScript.

  17. Wayne Gomez
    Permalink to comment#

    does it add more weight on the page ? or just the same as visibility:hidden?

  18. I have used this in the past, but currently I am using font-size: 0px instead.

    Thoughts on which method is better? I don’t see how my method would hinder visually impaired people using text readers, but I may be missing something.

    Bradley

  19. Permalink to comment#

    i think the better way for SEO Friendly hidden element is apply above CSS Hidden with javascript or jquery.

  20. Permalink to comment#

    I prefer the Scott Kellum method:

    .hideMyAss {<br/>width: 100px; <– or whatever you like height: 100px; <– or whatever you like background: url(test.png);<br/> text-indent: 100%;<br/> white-space: nowrap;<br/> overflow: hidden;<br/> }

    This seems to work just nicely. No drawing a box a million miles off the screen and no getting frowned upon my Google (or other search engines, but to be honest does anyone ever consider other search engines these days? But that’s a different debate).

  21. Permalink to comment#

    Thanks Adam. Scott Kellum method is a fantastic techniques and works really fine. More importantly, there is no rick of getting blacklisted.

  22. Google recommends* to use responsive css for smartphone-optimized websites that means visibility: hidden; and display:none; are ok for them

    *https://developers.google.com/webmasters/smartphone-sites/details

  23. OPhE
    Permalink to comment#

    I think maybe isn’t better

    hideme {

    position: absolute;
    overflow: hidden;
    top: -100%;
    left: -100%;
    }

  24. Gaieus
    Permalink to comment#

    I use this technique on a form field only meant for spambots on our forums (they tend to fill every field you throw at them). Google of course is not allowed to go to the register page anyway (robots.txt) so it’s not a question about SEO or not – and we gave a warning for the visually impaired in case they use a screen reader (although it’s quite unlikely on our forums as it’s about computer graphics).

    So yes, it has the “merits” and useful places but of course I would use it sparingly otherwise myself, too.

    [off] Nice little preview of my message to be sent below ;-) [/off]

  25. Permalink to comment#

    thanx
    that is awesome

  26. I’ve added additional content in a ‘read more’ section using CSS display:none; and jquery to reveal plenty of times – never had any problems with penalties before.

  27. Permalink to comment#

    OK thanks, but what if Google consider me spammer and i get penalties

  28. Interesting debate. I have a hit counter with which I don’t want to bore my readers.
    I have previously used
    .hidden { color: #bgbgbg; background: #bgbgbg; } page colour is #bgbgbg –
    with no apparent penalties, but this gives warnings on w3 css validator.

    I can see it by selecting it, as planned, but it is read out to the visually impaired, which is not planned.

    display: none and visibility: hidden do not cause warnings, but do not do what I want them to do! They really do conceal the contents so that even I cannot read them.

    Any opinions?
    I’m just too idle to go to another location to read the stats :D

  29. how do i make hidden content seo friendly with javascript. i have images that when clicked reveal the neccesary content as i dont want users to have to click through several pages to find info they need.
    one of the pages in question is http://mhi-uk.co.uk/budget-kitchens/.
    any advice regards graham

  30. A lot of it has to do with intent, guys. As was mentioned above, don’t cram a bunch of H1’s and spammy keywords in a div that’s floating out in space off the screen. That could get you busted by the big G.

    A very GOOD and ACCEPTABLE use of this is in the case of font replacements or image based logos in h1 tags at the top left of a web site where the default choices used by the designer is not best practice for search bots or screen readers (browsers for the blind).

    Just like you need to use alt tags in images, if you are using a graphic element that is important to visitors of your site visually you have to do SOMETHING to assist those visitors to your site that can’t “See” in a conventional sense.

    If SEO was easy, it would be called your mom. Read a book :)

  31. I’m using display:none initially and display:block on mouse hover for one of my client’s website, will it too hurt the SEO?

  32. Possibilities for Google penalties… Beware & act.. :)

  33. Permalink to comment#

    hi everyone!
    do scroll bars can affect SEO?
    i mean is there any problem if you use scroll bars to your site?

    home page in all articles scrollbars
    affect the SEO ?

  34. sandes
    Permalink to comment#

    Looked good but after reading comments found that it may harm SEO of website.

  35. Permalink to comment#

    This CSS style should be used for when you want to provide information to screen readers, purely semantic browsing, etc. But not display it on regular browsers.

    As with everything, use it properly and you’ll reap only benefits.

    Personally I use this at the very top of all pages I make to hide shortcuts to the main menu, and body content of a page. This way people who use screen readers can get to the content with out listening to all the websites header text again and again whilst browsing. Everyone else just gets the normal webpage.

  36. Permalink to comment#

    Well, while this method still works, there’s a better way now to do it:

    .hidden-text {
    /* Kellum Replacement Method: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
    position: absolute;
    text-indent: 100%;
    height: 0;
    white-space: nowrap;
    overflow: hidden;
    }
    

    According to the link in the comment, that has the bonus of increased performance and not ever appearing on screen due to some enormous screen-resolution.

    • Permalink to comment#

      By the way, I added the position: absolute; and height: 0; styles. They’re not included in the method zeldman discusses, but were needed in my case to keep the layout working (without them, there is a blank space where the text would be).

    • Ross
      Permalink to comment#

      Many thanks, Tim!

  37. Bhaskar
    Permalink to comment#

    Google is focused or concerned about the content that is hidden, not with the technique. Google will ban you if you use (hidden) excessive keywords.

    Otherwise W3C would have removed “text-indent” in their latest release.

    If you consume Alcohol and drive police will fine you or may be put you inside the jail. But if you consume Alcohol and enjoy without violating any rule no one will do anything to you. Police or government never ban alcohol, they ban or punish only those who use alcohol and violate law. Here alcohol represent the attribute text-indent: -9999px, Police represent Google, driving a car after consume alcohol is like putting excessive keyword and consuming alcohol and enjoying without violating any law is like using text-indent: -9999px for some good purpose say helping in Accessibility of web content.

  38. Permalink to comment#

    Came here while searching around to see if using the ‘clip’ feature of CSS has any harmful effects. Guess, i’ll still keep looking, but clip seem to be a far better choice than the above (which in all fairness was posted a long time ago).

  39. Permalink to comment#

    ‘display:none’ causes the element(s) to be removed from the accessibility tree that the browser constructs. This means that the elements will not be available to assistive technologies (namely screen readers).

    If your intent is to include additional information for visually impaired users, the positioning technique that Chris describes here is one of the W3 recommended techniques. Another one that I’ve seen uses clip:

    .visuallyhidden { 
       position: absolute; 
       overflow: hidden; 
       clip: rect(1px 1px 1px 1px); 
       height: 1px;
       width: 1px;
    }
    

    Note the height and width of 1px. This is because a height and width of 0px causes most screen readers to ignore the region (i.e. the browser does not add it to the accessibility tree). Also, setting the clip dimensions to 0px will cause VoiceOver to ignore the clipped region.

    I cannot speak for other search engines, but Google is well aware of the offscreen technique for accessibility and will not blacklist or downgrade a site for using it properly.

    One additional note: if you use offscreen positioning to hide skip links, make sure that they are made visible when they receive focus. Skip links also benefit sighted users who cannot use a mouse (i.e. keyboard-only). They need to see the links in order to use them.

  40. Alex

    I can say only that Google use hide text techniques by them self just see the labels on the textfields here: https://accounts.google.com

  41. Guenni
    Permalink to comment#

    the whole thing to hide some text is using microformat or so called rich snippets.
    This is well seen by google an other search engines but often it destroyes your complete layout.
    So if you want to use (look at schema.org) these goog ranking tools but not to adapt those bad looking divs you have to hide it. And i guess the method by text-indent is ok.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".