Build Your Own Business Website header image

When to Use display:none

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we discuss when to use display:none and why we don’t recommend using this to solve a problem. When you put hidden content that only Google can see, it will think of it as a spam and you can get penalized. There are however, some legitimate reasons why you would use display:none occasionally and in those cases it is perfectly acceptable. We also discuss a bit how to avoid over optimization on your site.

Video Transcript

Member: Alright, I think I remember somewhere in your vast video library or one of the Wednesday classes, you’re saying something about trying… that we should avoid using display none if you want to hide a particular element. Am I remembering that correctly or…

Rick: No, you absolutely are remembering that correctly. In the Thesis community, display none is bandied about as a down and dirty way of solving a problem. And so people will say, “Well, I need to get rid of the sidebar on this page.” And somebody else will say… rather than say, “Well, why don’t you use the no sidebars template?” they’ll say, “You could use display none on sidebars.” Well, that is a horrible, horrible suggestion and I’ve seen that over and over and over again.

Member: I bet.

Rick: And display none potentially runs a foul of Google’s insistence that everything it sees on a page, the viewer should be able to see on the page. And if you think of this in the reverse, the tactic of putting hidden content on the page for Google to see has been a spam technique for a long time.

Member: Yeah, real black hat.

Rick: And they use to use display none and Google will say you know, “We’re going to penalize you for that.” And then they start using colored text that was the same color as the background or they would have text that had a font height of 0 or had a you know, a left margin of 1000 pixels or… I mean, they do things like that. Well, Google’s pretty smart now and is pretty good at catching that. However, there are some legitimate reasons why you would use display none and one reason could be with these headings. For a graphical reason, you don’t want the heading to display but the heading is still an important part of the search result. And so you might use display none on your heading so that the heading still have a heading but it displays. If you did that on the entire site, you’d probably get in trouble. But if you do that occasionally, I think it’s six and one half a dozen of the other, whether or not you’re worse off because you’re not displaying it or you’re worse off because you don’t actually have it. And…

Member: Well that’s… I’m sorry.

Rick: Now Javascript uses display none. Any kind of accordion slider thing, javascript thing that you’d put on, hides stuff from people until they click on it. And it’s another acceptable reason for using display none. You’re not attempting to hide information from the viewer. You’re simply making it easier for them to access the stuff. Well, Google’s smart enough to figure that stuff out. But I think there are a few very small exceptions when display none is a perfectly acceptable tool.

Member: Well, you’ve illustrated exactly what I’m trying to solve. I wanted to get rid of the H1 tag because my client didn’t like the font and I made a graphical version of a… now, I made a jpeg, a png file of the font that she wanted. And so I displayed none the H1 tag and dropped in the graphic. And I didn’t want to get us in trouble but that was what I was trying to accomplish.

Rick: Yeah, that’s a perfectly acceptable solution.

Member: Because I’d still like the information, I’d like Google to see what’s the in the H1 for SEO purposes.

Rick: Right. Well, and you think of it as SEO purposes but Google thinks of it as helping people understand what the content of the page is about.

Member: Okay, sure.

Rick: Right? That’s what they’re concerned about. And as long as the H1 tag is reflective of the content of the page then you are being  true to the spirit of what Google is attempting to accomplish. But you’re using an image instead of text for the heading because that’s what somebody wants to see. That’s fine. That’s then the case when display none’s acceptable.

Member: Okay well… and all of those, I mean, the name of the graphic, the alt text on the graphic and the H1 tag are all the same. I mean, if that helps Google to say, “Okay, the guy’s not trying to get in the system. He obviously wants all this to be the same.” I am doing that if that makes sense for Google.

Rick: Yeah, as long as it doesn’t look spammy.

Member: Well, that’s the other thing is you don’t want to go too far with that and I hope I’m not going too far.

Rick: Well, on some level, spam is in the eye of the beholder.

Member: Right.

Rick: And there was a recent discussion in the WordPress theme review team over a theme URL which was And the first thought was… well, WordPress is very focused on preventing spam links from making their way into the WordPress repository because spammers routinely try to get their thing in there with links so that they can get these spam links off to whatever site they happen to want.

Member: Sure.

Rick: And Appliance UK you know, sounds like a spam URL. But you know, the person who did this is completely naïve about any of this kind of information, right? And she was talking about appliance as… she’s got it kind of as a little joke but what she’s talking about is applying some principles of personal development to help you accomplish your online business goals. And so she is thinking of appliance in entirely a different way.

Member: Wow, okay.

Rick: And the problem… I mean, she’s going to have this problem as long as she uses this URL that everybody who knows anything about search engines and spam is going to look at that thing and is going to say spam without giving it  really, a second hard look. So you have to be careful
about that if you have that text. Well, tell me what the text is…

Member: Let me see, Story Shards.

Rick: What are Story Shards?

Member: It’s the name of a workshop.

Rick: And so that’s the title of the page, it’s Story Shards?

Member: Right, because it’s about that workshop.

Rick: You know, you might want to change the title of that to you know, The Story Shard’s Workshop or something like that.

Member: Okay, that makes sense.

Rick: You don’t have to change the graphic but you might want to change the title. And then it sounds like this is something that is unique to a specific person? This is her own thing or do lots of people do Story Shards Workshops?

Member: Well, she’s teaching with 2 other women. There are 3 women that teach this particular workshop.

Rick: So I’d make it a little bit more descriptive.

Member: Okay, that’s a good idea.

Rick: And then… and I would link Story Shards and Workshop together, a couple of times in the content. But I wouldn’t say Story Shards Workshop every time you would otherwise say workshop.

Member: That’s good advice. I’ve forgotten about that.

Rick: Because if you did that, if you did Story Shards Workshop in the alt tag, in the H1 tag, In the alt tag, in the name of the image, a couple of times in the first paragraph and throughout the whole thing, that is going to look like spam. It just does.

Member: Now that’s… you’re announcing it very loudly to Google, trying… whether you’re consciously doing that or not, Google’s going to interpret that as spam.

Rick: Or as over optimization. That’s what they consider that to be, over optimization.

Member: That’s right. And I know that and I’ve forgotten to change up and give me some variety so thanks for pointing that out. That’s good.

Rick: Okay.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment