Hiding text on a page allows use keywords in H1 tags, which still make your pages keyword rich and relevant for search engines to understand. Considering how to show information on desktop screens that are not visible to mobile users and vice versa, and it's unlikely "hiding text" with "display:none", would incur a penalty though you never know. But using "display:none" in certain circumstances could be an issue because of corrupt practices used in the past.
Did you know in 2015 if you stuffed your website with keywords, and then added display none to an element you were a SEO genious. In 2016 you were crazy.
Many years ago websites used to add a lot of text into a website page to make them very keyword-rich and then would hide the information using "display:none" giving the website owner better page ranking. When the search engines found this terrible practice, they change their API's website rankings were lower in a lousy way overnight.
However, the need to hide elements for cosmetic reasons was still needed. Very quickly, an alternative had to be created. So that websites were penalised, Screen Readers worked and the cosmetically it was pleasing to the user.
How to hide information using CSS
The best way to hide information on a page is to use CSS that does not affect the flow of the document for software like Search Engines, and Screen Readers using the following examples inline or preferably in a CSS class resolves both these issues.
.elememt-invisible {
position: absolute;
top: -9999px;
left: -9999px;
}
.element-invisible {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
How do you ensure that you are not going to affect your websites SEO by hiding elements adversely? Even though it's not an exact science, the search engines are very clear; "Content is king". But there are other things that you can use to help your cause. the W3C is the standard body that helps organise information on the Internet in a structured way, see the attached links:
- https://www.w3.org/WAI/perspective-videos/speech/
- https://www.w3.org/
The W3C have always created a standard that gives all people access to the Internet, and they need Markup, JS and CSS to be semantically correct. Several tools provide you with insight into how your page is displaying the information. But for you to be effective when deciding on hiding content, ask yourself, "what is my intention"? Because that is what the Search Engines are trying to work out. If your intention is in a negative context, they will penalise you once you are discovered.