css - Bootstraps 的 SEO 影响可见 - lg/md/sm/xs - 类

Question

我想知道是否有人知道使用 Bootstrap visible 类创建响应式网站对 SEO 的影响？我使用这些类使用 Bootstrap 创建了一个新网站。在大多数页面上，主要内容位于左侧，然后页面右侧有许多链接。我的结构是这样的:

<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>

所以我的问题是这是否是个坏主意？我担心 Google/Bing/Yahoo 会将此视为我页面上的重复内容并因此对我进行处罚。这是我应该担心的问题吗？谢谢。

Answer 1

您不需要为相似的内容设置单独的 div。下面的代码等同于您所写的内容，前提是内容与您代码中注释中所写的内容相同，即//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>

对于向右拉和向左拉，您可以通过添加向左拉和向右拉类来实现

     <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>

如果你想让右边的内容不掉落就得特别指示它不要这样掉落

  <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>

我不会建议您复制您的 div 内容，因为您已经知道它对您的 SEO 不利并且维护不友好(每次更改更新所有 div 而不是只更新一个 div)