80

I've heard many times that it's bad to use display: none for SEO reasons, as it could be an attempt to push in irrelevant popular keywords. A few questions:

  1. Is that still received wisdom?
  2. Does it make a difference if you're only hiding a single word, or perhaps a single character?
  3. If you should avoid any use of it, what are the preferred techniques for hiding (in situations where you need it to become visible again on certain conditions)?

Some references I've found so far:

Matt Cutts from 2005 in a comment

If you're straight-out using CSS to hide text, don't be surprised if that is called spam. I'm not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said "imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company's name and it's Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is 'Expo Markers cheap online discount buy online Expo Markers sale ...' then I would be more cautious, because that can look bad."

And in another comment on the same article

We can flag text that appears to be hidden using CSS at Google. To date we have not algorithmically removed sites for doing that. We try hard to avoid throwing babies out with bathwater.

Eric Enge said in 2008

The legitimate use of this technique is so prevalent that I would rarely expect search engines to penalize a site for using the display: none attribute. It’s just very difficult to implement an algorithm that could truly ferret out whether the particular use of display: none is meant to deceive the search engines or not.

Improve this question
3
  • What if I use a loading white screen (with no text inside it) that I later hide with javascript? Will google consider I'm hiding the page under that white screen? Thank you
    – bloomingsmilez
    Commented Sep 11, 2015 at 16:43
  • I use display: none to reduce page content for mobile screens because the amount of copy that seems reasonable on a larger screen is way too much on a phone. Am I causing myself a problem?
    – user64037
    Commented May 13, 2016 at 21:54
  • display:none The Html engine ignore element and children.display:none elements are not in the render tree.display:none remove the element from the document's normal flow and set the values for position/height/width to 0 on the element and its children.
    – AjayGohil
    Commented Nov 5, 2020 at 5:13

8 Answers 8

Reset to default
60

In these days of jQuery (and other JavaScript frameworks) heavy websites then I can't see how it can be a problem, since it's used extensively when you use things like jQuery sliders, transitions, galleries, tickers etc. These are now commonplace and search-engines are clever enough not to blindly penalise their use.

A user RainboRick states this in the Google Webmaster Central forum:

Merely using display:none will not automatically trigger a penalty. The key is whether or not there is a mechanism - either automatic or one that is invoked by the user - to make the content visible. Google is becoming very adept at processing JavaScript to find and interpret such mechanisms. If you use valid HTML, CSS, and JavaScript you have nothing to worry about.

Improve this answer
4
  • Interesting, thanks. That implies I should avoid being lazy and using display: none to remove items in CSS that could be removed in code; but for effects and suchlike I'm fine. I wonder then how they might detect situations where there's a picture logo, and the logo's text is also included for accessibility but hidden. From the description, this would be counted as bad?
    – Andy
    Commented Jul 21, 2010 at 14:39
  • @Andy: It might. But you shouldn't use CSS to hide the logo's text; put it in the alt attribute of the img tag. That's what the attribute is there for, and as far as I know, using it tends to boost your SEO rating.
    – David Z
    Commented Jul 22, 2010 at 2:06
  • Actually, it sounds like it could be a case where you use the longdesc attribute of the image tag to provide a link to another page that contains the full description. This will only be seen by screen-readers (and perhaps search engines). See webaim.org/techniques/images/longdesc#longdesc
    – Dan Diplo
    Commented Jul 22, 2010 at 8:31
  • I'm not actually looking for the best way to present a description of a graphic... I was referring to Matt Cutts' quote I'm not saying that... have-a-logo-but-also-have-text is spam. It doesn't sound to me like he's talking about using the alt or longdesc attributes, and it provided a slight contrast to The key is whether or not there is a mechanism... to make content visible.
    – Andy
    Commented Jul 23, 2010 at 8:36
8

If you are not abusing it, it will not be a problem. At this time Google does not crawl CSS stylesheets looking for instances of display: none

Google is not going to declare war on a widely used style rule, they are just giving a warning to those thinking they could add 1000 keywords to a site that are all set to display: none or even worse, margin-left: 9999px

Improve this answer
1
  • 2
    At the time this answer was written Google did not crawl CSS. These days Google is downloading all CSS for every page and rendering the page. Google will now notice any uses of CSS that hide text. The rest of the answer is still correct.
    – Stephen Ostermiller ♦
    Commented Nov 2, 2020 at 9:47
6

Use "display: none" only when it is the right tool to use.

As the quotes suggest, the problem search engines have with display none is spam. Attempting to spam search engines, regardless of what tools you use for that, is a bad idea. If you use CSS for anything other than spam, then there is no problem.

The right tool for the right job.

Improve this answer
2
  • 4
    Thanks. The question then becomes when is display: none the right tool. You say that if CSS is used for anything but spam, it won't be an issue: are you confident that if I use display: none as a lazy way to remove elements, that it won't be a problem?
    – Andy
    Commented Jul 21, 2010 at 14:44
  • @Andy display: none is the correct tool when you don't want to display some content. To remove elements, it might be best to not include it at all(or, if using JavaScript, removing the elements from the DOM). If you remove the content from the page using display: none, so users don't see it but search engines still index it, then that'd be spam. If you have some sort of "Show/Hide" button, or something like that, then it's OK.
    – luiscubal
    Commented Jul 23, 2010 at 22:44
3

I think you should try to come up with other alternatives but here are some reference articles

Includes links to Maile and Vanessa on A Webmaster radio chat on this topic http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

Maile is a Google Engineer http://maileohye.com/html-text-indent-not-messing-up-your-rankings/

It is something Google are going to come up with a solution for, but negative offset and display none are not safe if you take a long term outlook.

Improve this answer
0
2

I agree with Dan Diplo and to add to what he said, also Google itself uses display: none in its HOME PAGE, so it can't really be a problem using it, as long as you don't use it for spamming (i.e. inserting hundreds fo keywords in a display:none DIV panel).

Open Google HOME PAGE and look in HTML source code. Search for display:none you are gonna see it many times. :)

Improve this answer
6
  • Thanks Marco. That still leaves questions of whether you can use display: none on elements that are never visible.
    – Andy
    Commented Sep 14, 2010 at 18:57
  • @Andy: never visible elements are supposed to be just SPAM, I don't see why you should use never visible elements, why bothering placing them in HTML page then? So I would expect using them is not a good idea. Google might be able to detect them now or in future and penalize your site.
    – Marco Demaio
    Commented Sep 16, 2010 at 8:32
  • The only example I can think of is when you're using a CMS and for time reasons you might want to use CSS to hide one or two small bits of markup, rather than custom theming the markup away entirely. (And I'm only asking the Q to understand the current situation better - my CMS of choice is Drupal, where altering the markup is quick and easy.)
    – Andy
    Commented Sep 19, 2010 at 14:03
  • @Andy - Is it even logically possible for a search engine to read thousands of lines of javascript and identify cases where it's logically impossible for an element to be shown? It would take some immense reverse-engineering to study the code of any site with one line that says $('.'+somevar).show(); and figure out every possible value somevar could have and compare that to every possible state of the DOM - and that's an exceptionally trivial case... Also, plenty of cases where a div won't be shown due to data, input, API/AJAX call results, user behaviour, etc, but logically could...
    – user56reinstatemonica8
    Commented Oct 22, 2012 at 10:11
  • 1
    "Google itself uses display: none in its HOME PAGE, so it can't really be a problem using it" Don't know if it's actually a problem or not, but this looks like a dangerous line of reasoning, as Google is not trying to... rank on itself.
    – lucian
    Commented Apr 5, 2016 at 17:55
1

The key point to take away from this is the quote at the end of @Dandiplo's answer.

A user states this in the Google Webmaster Central forum:

"Merely using display:none will not automatically trigger a penalty. The key is whether or not there is a mechanism - either automatic or one that is invoked by the user - to make the content visible.Google is becoming very adept at processing JavaScript to find and interpret such mechanisms.If you use valid HTML, CSS, and JavaScript you have nothing to worry about. Good luck!"

What I keep seeing in many q&a sites are questions relating to website content that they don't want and asking how to remove it and then being given the answer to use display:none in the CSS. This would be bad for SEO as the CSS is obviously not being used for responsiveness to smaller screens etc.

If you don't ever want it displayed, get it out of the website content.

The question Google's algorithm would be asking is why is the content there but being hidden?

If, for example, the content is only for tablets/mobiles, you want it hidden to desktop screens. That's fine because the algorithm will see that it will appear on tablets/mobiles with display:block or similar removing the display:none.

The algorithm will be suspicious of content which is always in display:none as the question will arise as to why it is there in the first place. If it is not needed, remove it completely. If the content is there because of, say, a WordPress plugin and you don't want it there, either remove the plugin, adjust the plugin settings or write a custom piece of PHP to take it out of the page so it isn't in the HTML output at all. Don't just hide it with display:none.

Improve this answer
0

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. In the past, people used these sort of methods to game the SEO, hiding keywords and links etc. The result it that when Google crawls a site that has things hidden from the viewer, it views that site as less trustworthy.

Improve this answer
-1

I just had a conference with seo in google and this is not true. Display none penalizes, for sure. Some time before this was dealed with visibility instead or using negative text sizes or negative indenting.

Is a fact that text needs to be visible and not obstructed in any visible way. At least no boiler plate or duplicated or lazy content.

By the way google can do whatever they want on their site they probbaly put themselves first even if it was a potato.

In particular the approach proposed and probably to be used is to show it and no matter what design consequences it may have.

I will propose things as z-indexing (layering) to check if by any chance this kind of styles are not considered. But i don't think so algorithm is strong enough to consider this. Or things like calculate box position over screen size to consider negative positioning as a visual block.

Related text for seo ergo client interest should be visible.

Improve this answer
3
  • 1
    This answer s flat out wrong. Whatever conference you went to is terrible. I can't imagine what other garbage they fed you. They probably told you meta tags were important, too.
    – John Conde ♦
    Commented Aug 4, 2016 at 11:02
  • 1
    It is true that if you create a long list of keywords, put it on your page, and hide it with display:none, Google will penalize your site. It is also true that text meant to be indexed needs to be visible. As other answers point out, there are legitimate uses for display:none.
    – Stephen Ostermiller ♦
    Commented Aug 4, 2016 at 11:16
  • The technical means used to hide text don't matter to Google at all. The speculation that z-index or negative positioning could be used to hoodwink Google are flat out false. Googlebot renders pages now and can detect any means used to prevent text from showing up in pixels on the page. As other answers point out, showing text some times based on user interaction or just on certain devices is fine.
    – Stephen Ostermiller ♦
    Commented Aug 4, 2016 at 11:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.