Code Snippet
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;
#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;
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.
You should also put top: -9999px; because of old opera.
I think that SEO hiding will be better to do with javascript.
I wouldn’t define this as SEO friendly. In my opinion any hidden divs may cause you to get blacklisted
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.
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.
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.
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.
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?
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…
Search Engines can blacklisted you after this
I think it’s a blackhat seo for hiding contents
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.
that is awesome
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 ;)
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
In what situations would you use this code and how exactly is this better than “display:none” for accessibility?
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.