Welcome back to the 7th part of Lesson 2 of the Customize Thesis Like a Pro tutorial series. And in this part of the lesson, we’re going to continue looking at our customizing the Thesis theme with CSS Best Practices and we’ll be looking at rule #5. And rule #5 says almost never use display:none to remove something from a web page;.
I want to show you a couple of examples where you see people suggesting to use display:none;. Sometimes someone wants to create a squeeze page and they don’t want the navigation menu to show or the header to show or the footer to show. And so they’ll say, “Well, you can make it so none of those things show on your page by adding display:none; to those things.” Or perhaps, you have a page where you don’t want a title. For example, it could be the case that on a home page or some other specific page you may not want a title showing up. And so people will say, “Well, take that h1 tag and add display:none; to it.” And then the most grievous example of this is when people want to suppress the sidebar. I’ve seen apparently skilled Thesis people suggest that you can just say sidebar1 display:none;. These will still be written to the HTML but it won’t be shown.
Using display:none; Violates Google’s Rules
The problem with all of those ideas is that they still return this data. They still return the HTML to the page, it just doesn’t render that HTML. So all of the navigation would still be there in the HTML page and if you looked at the source, you’ll still see all of it, it just wouldn’t show up on the page. And the problem with that is Google takes strong exception at pages that hide content and they are likely punish people who use display:none; for those purposes because Google believes that it’s a tactic of spammers. Spammers will add text that they hope will attract Google but that they don’t want to show up on the page itself. And so Google is very wary of display:none; and with the advent of Thesis 1.8, there’s really no reason to use this to remove something from a web page;
As you work your way through these lessons, you’ll find out how to suppress the header and the navigation bar, how to eliminate the site title or the page title on a particular page, how to display a page without showing the sidebars and those sort of things. There are built-in tools within the Thesis theme that allow you to do these things.
People are tempted to use display:none; because they think it results in what they are trying to accomplish but in point of fact, it probably ends up hurting them both in the short run and in the long run by presenting to Google content that Google knows is being hidden from the reader. And so I would suggest that essentially you never take that approach.
Okay and that wraps up Part 7 of Lesson 2 of the Customize Thesis Like a Pro tutorial series.