SEO Impact of Bootstraps visible - lg/md/sm/xs - classes

Question

I was wondering if anyone knows about the SEO impact of using bootstraps visible classes for creating a responsive website? I have created a new website with Bootstrap using these classes. On most of the pages the main content is on the left and then there are a number of links on the right side of the page. My structure is like this:

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        //Main content here on left of page
    </div>

    <div class="col-lg-6 col-md-6 visible-lg visible-md">
        //Content on right of page for large and medium devices
    </div>

    <!--SMALL STARTS HERE-->      
    <div class="col-sm-12 visible-sm">
        //Same content but drops below main content of page for small devices 
    </div>

    <!--EXTRA SMALL STARTS HERE-->    
    <div class="col-xs-12 visible-xs">
        //Same content again but drops below main content and is rendered for phones
    </div>
</div>

So my question is if this is a bad idea or not? I am worried that Google/Bing/Yahoo will see this as duplicate content on my pages and penalise me for it. Is this an issue I should be worried about? Thanks.

Answer 1

You don't need to have separate div for similar content. The code below is equivalent to what you have written provided the content are the same as written in the comment in your code i.e. //Same content

   <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          //Main content here on left of page
      </div>

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    //Content on right of page for large and medium devices
</div>
</div>

for the pull right and pull left you can achieve that by adding the pull-left and pull-right classes

     <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left">
          //Main content here on left of page
      </div>

   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right">
    //Content on right of page for large and medium devices
     </div>
    </div>

if you want the content on the right not to drop then you have to specifically instruct it not to drop like this

  <div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-left">
        //Main content here on left of page
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-right">
        //Content on right of page for large and medium devices
    </div>
</div>

I will not advise you to duplicate your div content as you are already aware it is not good for you SEO and is not maintenance friendly(update all div for every change instead of just one div )

Answer 2

Using hidden/visible classes in this way defeats the purpose of using bootstrap classes for media size breaks. While it is hard to give a concrete answer for potential SEO issues, it's important to remember that even if content is set to display: none;, it is still visible in the source code. This is what is getting crawled and indexed by search engines. Even if your content is not visible to a user, it is visible to the search engine, so your duplicate content is still "seen". As a general rule, duplicate content is bad for SEO, although no one will be able to tell you EXACTLY how bad or at what exact point duplicate content becomes harmful to your ranks.

In addition to it being a risky SEO practice, it's just messy and difficult to maintain as others have mentioned. The following markup accomplishes the same thing:

<div class="row">
  <div class="col-md-6"><!--THIS WILL BE 50% WIDTH ON MEDIUM AND UP, 100% WIDTH ON XS AND SMALL--> 
    //Main content here on left of page
  </div>

  <div class="col-md-6"> <!--THIS WILL BE 50% WIDTH ON MEDIUM AND UP, 100% WIDTH ON XS AND SMALL--> 
    //Content on right of page - THIS WILL GET PUSHED BELOW OTHER CONTENT ON SMALL AND XS SCREENS
  </div>
</div>