A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

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

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