Welcome to WebmasterWorld Guest from 54.90.204.233

Forum Moderators: Robert Charlton & goodroi

Message Too Old, No Replies

hiding divs for responsive design so it's OK with Google

     
9:43 am on Oct 16, 2014 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 19, 2007
posts: 404
votes: 0


Can anyone tell me what the current state of play is with hiding divs and google? At one time this was a nono and might be problemtaic if seen as blackhat, today its a common way of responding to the many different screen resolutions. So is there anything to be wary/careful of when doing this in terms of not being seen as a seo trick?
10:55 am on Oct 17, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator goodroi is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:June 21, 2004
posts:3439
votes: 323


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.
11:10 am on Oct 17, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:Jan 23, 2014
posts:131
votes: 0


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.
11:10 am on Oct 17, 2014 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 19, 2007
posts: 404
votes: 0


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.
12:41 pm on Oct 17, 2014 (gmt 0)

Preferred Member

5+ Year Member Top Contributors Of The Month

joined:May 24, 2012
posts:648
votes: 2


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.
1:28 pm on Oct 17, 2014 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 19, 2007
posts: 404
votes: 0


so is it another case of this is ok if you are a huge site but the little again has to watch his back?
2:15 pm on Oct 17, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4171
votes: 262


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.
2:25 pm on Oct 17, 2014 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 19, 2007
posts: 404
votes: 0


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.
3:37 pm on Oct 17, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Sept 16, 2009
posts:1084
votes: 80


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.
3:49 pm on Oct 17, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Apr 29, 2005
posts:2098
votes: 111


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.
5:39 am on Oct 18, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Sept 16, 2009
posts:1084
votes: 80


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.
10:46 am on Oct 18, 2014 (gmt 0)

Preferred Member

5+ Year Member

joined:June 10, 2011
posts: 537
votes: 0


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.
3:22 pm on Oct 18, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 0


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.
3:38 pm on Oct 18, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 6, 2006
posts:1191
votes: 41


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


Why? Their needs are likely to be completely different.
3:48 pm on Oct 18, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 19, 2008
posts:1305
votes: 98


@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.
4:48 pm on Oct 18, 2014 (gmt 0)

Preferred Member

5+ Year Member

joined:June 10, 2011
posts: 537
votes: 0


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. ]]]
5:07 pm on Oct 18, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:July 19, 2013
posts:1097
votes: 0


...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]
3:20 am on Oct 19, 2014 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 3, 2001
posts:578
votes: 1


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.
10:53 am on Oct 19, 2014 (gmt 0)

Preferred Member

10+ Year Member Top Contributors Of The Month

joined:Dec 12, 2004
posts:647
votes: 10


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

[webmasterworld.com...]
[webmasterworld.com...]
8:24 am on Oct 20, 2014 (gmt 0)

Preferred Member from GB 

5+ Year Member Top Contributors Of The Month

joined:Sept 29, 2009
posts:510
votes: 46


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members