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.

Beebeebe

You don't need to duplicate the html to add more classes. The bootstrap col classes are for different break points. So it will identify which ones apply at run time. That way there is no worries about duplicate content that could harm your seo and page load time. – Choppy

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 )

Bet

Sorry I just updated the question there the content drops below the main content of each page for small devices it doesn't stay on the right, that's why I used the visible classes – Beebeebe

@OdeyinkaOlubunmi , sorry for the delay.. just got enough rep to comment. Is there any reason you're using so many extra classes? "col-lg-6 col-md-6 col-sm-6 col-xs-6" accomplishes the same exact thing as "col-xs-6". Also, adding a 'pull-left' class is unnecessary because the column is already floating left. Adding 'pull-right' on the other column is unnecessary because it is floating left and has a width of 50% (assuming it has the class 'col-xs-6'). Seems like you over complicated the markup. – Whipperin

This is an explicit way to tell bootstrap what to do for each screen size. i.e col-lg-6(for screen size large use 6 columns), col-md-6(for screen size medium use 6 columns), col-sm-6(for screen size small use 6 columns) and col-xs-6(for screen extra-small use 6 columns). Remember that we have 12 columns in all for each screen size this will make sure each screen size you get half which is 6 columns – Bet

Doing it that way is totally unnecessary. Like I said in my first comment col-lg-6 col-md-6 col-sm-6 col-xs-6 is the SAME as saying col-xs-6. Col-xs-6 says - for screen size extra small and up, use 6 columns - and will do that until you set a different break point for a larger screen size. So col-xs-6 col-md-4 says - for extra small and small screens, use 6 columns, then for medium, large and extra large screens, use 4 columns. It always starts at the smallest defined screen size and applies to all larger screens, unless told otherwise. – Whipperin

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>

Whipperin

Answer 3

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.

Kiblah

Answer 4

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.

Bolden

Answer 5

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

Dropkick