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;


  1. User Avatar
    Permalink to comment#


    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.

    • User Avatar
      Chris Coyier
      Permalink to comment#

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

    • User Avatar
      Permalink to comment#

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

    • User Avatar
      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.

    • User Avatar
      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.

    • User Avatar
      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.


      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

    • User Avatar
      Permalink to comment#

      Best tested CSS is:
      clip:rect(0 0 0 0);

  2. User Avatar
    Dalibor Sojic
    Permalink to comment#

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

    • User Avatar
      Sam H Mah
      Permalink to comment#

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

  3. User Avatar
    Permalink to comment#

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

  4. User Avatar
    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. User Avatar
    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. User Avatar
    Nicholas Johnson

    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.

    • User Avatar
      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.

    • User Avatar

      “(…) 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. User Avatar
    Phil D
    Permalink to comment#

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


    vs using


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

    • User Avatar
      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. User Avatar
    Stanislav Lisov
    Permalink to comment#

    Search Engines can blacklisted you after this

  9. User Avatar
    Permalink to comment#

    I think it’s a blackhat seo for hiding contents

  10. User Avatar
    mike foskett
    Permalink to comment#

    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. User Avatar
    Ahmad Awais
    Permalink to comment#

    that is awesome

  12. User Avatar
    Frank M. Eriksson

    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 ;)

    • User Avatar

      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. User Avatar
    Rajinder Sandhu
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

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

    • User Avatar
      Permalink to comment#

      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. User Avatar
    Permalink to comment#

    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. User Avatar
    Kenneth Dreyer
    Permalink to comment#

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

  17. User Avatar
    Wayne Gomez
    Permalink to comment#

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

  18. User Avatar
    Permalink to comment#

    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.


  19. User Avatar
    Permalink to comment#

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

    • User Avatar
      Permalink to comment#

      I agree. My experience is: JS and jquery is okay, but css is not the right way.

  20. User Avatar
    Adam Clark
    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. User Avatar
    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. User Avatar
    Sabuhi Yahyayev
    Permalink to comment#

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


  23. User Avatar
    Permalink to comment#

    I think maybe isn’t better

    hideme {

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

  24. User Avatar
    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]

    • User Avatar
      Randy Zeitman
      Permalink to comment#

      Gaieus, what is your contact info? (do you do private consultations? There’s no contact info on Google webmaster forum.)

  25. User Avatar
    Permalink to comment#

    that is awesome

  26. User Avatar
    Luke Kirk
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

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

  28. User Avatar
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

    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
    any advice regards graham

  30. User Avatar
    George Featherstone
    Permalink to comment#

    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. User Avatar
    Raju Singh

    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. User Avatar
    Vijayakumar S

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

  33. User Avatar
    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. User Avatar
    Permalink to comment#

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

  35. User Avatar
    Ryan Carson
    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. User Avatar
    Permalink to comment#

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

    .hidden-text {
    /* Kellum Replacement Method: */
    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.

    • User Avatar
      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).

    • User Avatar
      Permalink to comment#

      Many thanks, Tim!

  37. User Avatar
    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. User Avatar
    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. User Avatar
    Keith Hays
    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. User Avatar

    I can say only that Google use hide text techniques by them self just see the labels on the textfields here:

  41. User Avatar
    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 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.

  42. User Avatar
    Permalink to comment#

    I have a query on this, not sure if its OK or not to do.

    I want to remove (completly) some div’s from mobile view of a responsive site, depending on the mobile devices used. I also want to ensure that Google pagespeed score is accurate (for the devices that the div’s are removed).

    I am detecting mobile devices using their useragent. Google pagespeed bot uses iPhone, but even tho I have set div’s not to show on iPhones, they still show on Google Page Speed.

    Any ideas why this is, and would doing this look like black-hat SEO to Google, even tho it’s not.


  43. User Avatar
    Permalink to comment#

    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

  44. User Avatar
    Permalink to comment#

    if you want to use (look at 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

  45. User Avatar
    Permalink to comment#

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

  46. User Avatar
    Permalink to comment#

    What is about that?

    color: transparent;
    text-indent: -9999px;

  47. User Avatar
    Permalink to comment#

    hey folks! I know its late but how about visibility:hidden and z-index:-999;

    • User Avatar
      Permalink to comment#

      Some people, here in comments, mentioned earlier that “visibility:hidden” is not good practice.
      I’m thinking about negative z-index with “position: absolute” under the div with white background for hiding img element with itemprop=”image” for right now…

  48. User Avatar
    Kim McCann
    Permalink to comment#

    I know that this is an older topic, but I just came upon a situation in which I had to add a h1 tag but wanted to use an image instead on a home page that I developed:

    I found Keith Hays’ answer very helpful.

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

    Note: “clip: rect(0px 0px 0px 0px);” also allowed text to show up in the page source, but I don’t want to run into any accessibility issues.

    Is there any updated SEO information concerning the practice of using “clip” this way? Is it still acceptable for Google and other search engines?

  49. User Avatar
    Frisco Web Solutions
    Permalink to comment#

    have you ever listen about Robots.txt. Robots.txt file perfect to hide, google about this.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.