Google does not like hidden divs because of the potential for spam and their difficulty in spotting this spam vs innocent use. I personally stay away from them most of the time because using hidden divs does raise the chance of being accidentally caught in current or future spam filters.

Yeah, I've had this Q. myself too. I think it's a tricky one because the potential for abuse is so obvious. But I note that Google itself said there should be no issues with responsive design (Matt Cutts). But of course that was then and this is now, no doubt people will use it to try and game Google so they'll need to do something about that.

so what is the preffered way to add/remove divs based on screen real estate? i see lots of sites doing it the above way, not sure of a way to do it without treading some line.

i cant see its hard for google to read css and however else you display to see at what point the div is shown and hidden. If its only shown for say screens bigger than 4k then i suggest its gaming else its going to be displayed for some people. Also they can determine how important the div is in terms of the page and at what point its shown and hidden. Clearly you wont be hiding the main part of the information or anything vital to the page.

Google hides divs on it's own sites for responsive purposes.

On YouTube, the left-hand menu div 'appbar-guide-menu' changes to visibility:hidden when you make the page narrower.

so is it another case of this is ok if you are a huge site but the little again has to watch his back?

Google recommends using media querys if you are serving different content based on screen size and/or orientation. There is a ton of reading if you aren't familiar with the topic, but in less than an hour you can learn the recommended techniques. To see a visual demo of the "what" visit: [developers.google.com...] and then follow the third step in the list to see "how" at: [developers.google.com...]

You should allow google to crawl your css so they can see that the hidden divs are only for the users' benefit.

sorry but i dont follow the above. Using media queries is exactly what im talking about. At certain screen sizes hiding a div that is not vital and hurting presentation is hidden via css media query for that screen size.

As far as I'm aware, if you're showing content to Google but not to a user (and by that I mean that the user can't discover that content by expanding an area or opening a lightbox etc) then that is the textbook definition of cloaking: the page could potentially rank for text that the user cannot see if they click-through from a SERP. That's bad user experience and misleading.

As far as I'm aware, if you're showing content to Google but not to a user (and by that I mean that the user can't discover that content by expanding an area or opening a lightbox etc) then that is the textbook definition of cloaking: the page could potentially rank for text that the user cannot see if they click-through from a SERP. That's bad user experience and misleading.

But isn't cloaking showing different content to users and to search engines? If the search engine looks at a page with a page width of x and sees exactly the same as the user does at the same screen size then that is not cloaking surely, it's just showing different information based on screen size.

I certainly use hidden divs, and of course search engines and readers, if they care to view the source, can see that certain content may not always appear. Their is no secrecy or malicious intent behind it.

If the search engine sees what the user sees then it's not cloaking.

If the user CANNOT see what the search engine sees then I personally would call that cloaking.

[searchengineland.com...]

If you're using a 'top-down' responsive design (i.e. you take text content away for mobile users that is still in the source code) so mobile users cannot get to certain content that Google can, I'd say that puts you in a grey area. That's a potentially risky place to be IMO.

Why should you hide divs anyway?
It is known that sometimes your current CSS theme makes it hard for you 'not to hide' divs. However, it is your goal to try techniques/ways (even use new theme) and avoid hiding divs because - mobile user has to get the same content as the desktop's one.

Do we still think Google's a simple HTML source code reader? Seriously, I think sometimes we need to move on from 200X and at least into 201X -- This is from over 5 years ago: [patft.uspto.gov...]

Emphasis Added

Implementations consistent with the principles of the invention can determine whether a document includes hidden text, links, and/or other objects. In this way, the ranking of search results may take into account attempts to trick the search engine into ranking results more highly (e.g., by ignoring text that the user would not see when analyzing the content of the document).

Expandable divs are common, not only on mobile sites, but also on desktop versions and contrary to the fear-based statements I've read are generally not an issue to the best of my knowledge, as long as the contents are easily expanded/viewed by a visitor.

mobile user has to get the same content as the desktop's one

Why? Their needs are likely to be completely different.

@santapaws,

There was a google hangout 2 weeks ago with john mueller in germany. This was one question he answered. He said that this is not a problem be ause google is aware of the oow capabilities of small mobile screens and responsive design as long as the hidden divs are NOT full of keywords.

Look for google hangout germany with john mueller in oktober or go right away to his google+ page, it is linked there. Only in german though.

Why? Their needs are likely to be completely different.

If you think/believe that their needs is completely different than desktop's, create a separate mobile site or an app.
[[[That's my understanding of what responsive designed website should provide. ]]]

...mobile user has to get the same content as the desktop's one.

Uh, nope, that's not correct according to Google.

A desktop homepage often serves as a welcome page, messaging center and promotional space all in one, but the mobile homepage should focus on connecting users to the content they’re looking for. In this section, we explore the principles for building a mobile homepage that gets users what they need, fast.

---

An extensive menu might work well for your desktop site, but mobile users won’t have the patience to scroll through a long list of options to try and find what they want. Consider how you can present the fewest menu items possible - for instance, a major department store refined the product categories on its mobile site, presenting study participants with a shorter, more clearly-defined list than on desktop.

https://www.google.com/think/multiscreen/whitepaper-sitedesign.html [google.com]

Use mobile queries.
Show content that is best for the user on whatever size device.
Make a great user experience.
Everything is readable and crawlable. It will not be a problem unless you have shady, spammy content being hidden. Just like others mention, Google and lots of big sites hide/change menus or certain content from mobile devices because it's not relevant or necessary.

This stuff came right from Google's mouth at Pubcon this month and I heard it many times before that.

Google started to ignore hidden content. You can safely hide sections, Google won't index them.

[webmasterworld.com...]
[webmasterworld.com...]

My mobile content is 98% the same as my desktop content. The only things I do are:

1. (as JD_Toims posted) serve a cut-down menu to mobile users
2. show an ad/promo sidebar on bigger screens that I don't bother with below about 800px

as others have said, using a responsive design is not the same as having "a mobile site" and the content should pretty much be the same, just twisted and turned to fit it into the available real estate.