seo Question posted in
Some basic information to get you started with this can be found here.

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

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.

Tags:

5

Answers


  1. 0

    Try not to dublicate the divs for each device.
    The visible class is not for Content afaik, its used to set special floats, filling areas and breakpoints.

    combine the col classes to achieve your goal without multiply your content.
    since you want to pull left/right you may want to look at .pull-left .pull-right.

    Login or Signup to reply.
  2. 0

    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 )

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    Google will use the content displayed for desktop for rankings. That means mobile rankings too. Other content will be ignored. I don’t think Bing has released any relevant information about the way they proceed.

    There is no such thing as a duplicate content penalty. In your case your SEO won’t suffer at all. You don’t need to worry.

    It is recommended to serve the same primary content (i.e. web page content minus menus, adverts, footers and stuff present on all pages) for desktop and mobile.

    I maintain a summary for mobile SEO for more information.

    Login or Signup to reply.
  5. 0

    Use the grid system to acquire the desired responsive results. Remember to adjust your viewport appropriately. I may refer you here!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search