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;
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.
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.
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?
@igor
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!
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.
I do not recommend using this strategy! A better way to hide text from the screen is using JavaScript.
does it add more weight on the page ? or just the same as visibility:hidden?
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.
Bradley
i think the better way for SEO Friendly hidden element is apply above CSS Hidden with javascript or jquery.
I agree. My experience is: JS and jquery is okay, but css is not the right way.
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).
Thanks Adam. Scott Kellum method is a fantastic techniques and works really fine. More importantly, there is no rick of getting blacklisted.
Google recommends* to use responsive css for smartphone-optimized websites that means visibility: hidden; and display:none; are ok for them
*https://developers.google.com/webmasters/smartphone-sites/details
I think maybe isn’t better
hideme {
position: absolute;
overflow: hidden;
top: -100%;
left: -100%;
}
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]
thanx
that is awesome
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.
OK thanks, but what if Google consider me spammer and i get penalties
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
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 http://mhi-uk.co.uk/budget-kitchens/.
any advice regards graham
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 :)
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?
Possibilities for Google penalties… Beware & act.. :)