Contents
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn’t seen on the page.
In a nutshell, visibility: hidden and display:none will hide text from screen readers just like it does from others. All other methods will be ‘visible’ to a screen reader. Yeah, unfortunately screen readers are as inconsistent as sighted browsers when it comes to CSS.
Is it possible to hide content from search engines?
Thus, even after this post has been spidered by Google, Yahoo!, and Live, the word below will have 0 results: Hiding content inside images isn’t generally advisable, as it can be impractical for alternative devices (mobile in particular) and inaccessible to others (such as screen readers).
Is it bad to hide something in CSS?
Don’t just hide it with display:none. Google does crawl CSS display:none content. Hiding something from Google is only bad if you’re intentionally trying to manipulate search rankings. Hidden options and text from visitors is now a common practice given how interactive websites have become, so you shouldn’t worry.
How to make your content more visible to the search engines?
The author’s views are entirely his or her own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz. Here at Moz, we’re usually talking about how to make your content more visible to the search engines. Today, we’re taking a different direction.
Visibility: hidden hides the tag, but it still takes up space and affects the page. In contrast, display: none removes the tag and its effects for all intents and purposes, but the tag remains visible in the source code. Both approaches are different than simply removing the item (s) in questions from the HTML markup.