A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Home » Code Snippets » CSS » Accessibility/SEO Friendly CSS Hiding Submit one!

Accessibility/SEO Friendly CSS Hiding

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

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

Subscribe to The Thread

  1. Mike says:

    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.

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

  3. Roie says:

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

  4. Adam says:

    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 says:

    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.

    • Flaviu says:

      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.

  7. Phil D says:

    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 says:

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

  12. 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

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---