3 Years
Discussion Span
Last Post by Dani

Although it isn't generally a great practice to use display:none; and absolute positioning is the preferred method for hidding something for screen readers, it does happen where we need to use display:none (see list a part, css tricks, etc.).

Now in terms of SEO - Google wants to see a Title tag matching the content of the Page, an H1 tag that explains what the page is about and 1+ H2 tags which explain what each section of the page is about. Search engines weight these three attributes fairly heavily so its important as a web designer/developer/marketer to make sure that you are using these three elements to their highest potential (which shouldn't include hidding any of them using display:none or display:hidden).

However in instances where you have more then one H1 (which typically you shouldnt have because there should only be 1 H1 per page) like having a front page scroller/slideshow in jQuery you may end up having multiple H1s. Using display:none to hide those additional H1s until the next slide might be a good solution HOWEVER your page probably will not get weighted against the content of those H1s.

Now to take it one step further, if you have used robots.txt to block out your asset folder that contains your css file you may have an additional issue where google and bing won't actually be able to tell if an element is hidden or not. If it reads 4+ H1 tags in a row, but can't tell that some of them are display:none the search engine may begin to believe that you are up to some sketchy grey/black hat SEO tricks and you may find yourself in a bit of trouble or not ranking as well as you think you should be.


I would NEVER use display:none on an H1 tag. I also recommend just one H1 tag per page. No spammy techniques, please! :)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.