Accessibility/SEO Friendly CSS Hiding

Photo Source: www.iconfinder.com

#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; ''


Caution:

This is bad practice! as Google will simply remove your site from their search results altogether. Google has stated time and time again thruough 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.

For SEO purpose, be aware that this technique could lead you to be blacklisted. The same reason as above. 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 or at your own risk. We are not responsible for any thing. Thank You!