Search code examples
seogoogle-searchblacklist

Different hidden content for mobile - SEO?

I have created two different layouts (with bootstrap) on the same page. One for mobile, one for desktop. Website has different pages with complex structure. Some of blocks should be visible only in desktop and vice-versa.

Here is an example page: (other pages are different, but has the same problems)

Example

Title A, Title N... are links, they:

  • On desktop: sets content to top block "Text content A" from hidden red area.
  • On mobile: just scrolls down to corresponding content.

There is no problems, everything works. But... I am afraid that website will be blacklisted by Google.

  • There are too much hidden content - images, links (visible-xs and etc.)
  • Content even placed outside the div with overflow:hidden;

Yes, it will be easier to put content on page and just let user scroll on desktop and mobile versions without any hidden content and popovers, but this website needs to be created as designed.

Now i have two different ideas to avoid problems with SEO.

  • Just create different mobile theme on subdomain.
  • Use one responsive layout for both desktop and mobile, but avoid hiding content via css - instead hide unnecessary content with jQuery and load additional content with Ajax. (I prefer this but it looks strange)

So, how you usually solve similar tasks?

Solution

  • There are no any problem.Don't worry!

    It is natural.Google can crawl both mobile and desktop elements and can detect difference of hidden content from mobile view and desktop view.

    Also any hidden contents have not problem for SEO. Just hidden links and contents for Black-Hat purposes (for example cloaking) are bad for SEO.

    So don't worry.Keep your hidden contents and stay in your current way.

    Aslo follow this guides for choosing the best methods of designing responsive website:

    https://developers.google.com/webmasters/mobile-sites/?hl=en https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/index.html?hl=en https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/responsive-design?hl=en

    And check your site here:

    https://www.google.com/webmasters/tools/mobile-friendly/