Hiding Content for Screen Sizes - Duplicate Content Issue?

[animalstyle]

I have a set of profile pages on my site that need different visual treatments on large/small screens. I can do this by using hide/show classes through my framework (Foundation). The code is going to have the page content twice in order to accommodate this.

Using the googlebot fetch tool through webmaster tools I have tested these pages. The how googlebot sees the page and how a visitor sees the page both give the same, clean view - no duplicate content. https://www.google.com/webmasters/tools/googlebot-fetch

To me this signals that this is an OK practice. Has anyone had any issues applying this type of treatment to a page and seen negative outcomes in the search results?

 

[juliantrueflynn]

Yea it's fine, the penalties happen when hiding content in a deceptive manner to bots. Using html, css, or js to hide content on certain screen sizes is common practice now for development and Google gets it.

 

[Ryuzaki]

If there's any problem, having the content twice would be it. Why not just use CSS's display:none; combined with media queries to hide and show it based on the screen size, and use media queries to design the entire page responsively. You can have both designs with one set of content just using CSS.

Unless it's just too much to work that into the framwork, or you aren't sure how, the question I'd be asking is how many of these profile pages are there, and are they intended to rank? If the answer is few, in relation to the total amount of pages on the entire site, and you don't care if they rank, then I wouldn't worry at all.

 

[animalstyle]

@Ryuzaki These pages are the majority and yes they need to continue ranking.

In this situation, I am going for a tab display on the lower half of my page on desktop and an accordion display on mobile. I will try to use the same content, but if I have to duplicate some of it then I guess we have a test on our hands.

 

[animalstyle]

I ended up being able to handle this within my framework with no duplicate content so no test incoming.

 

[contract]

I use display:none on mobile, no issues at all with G.