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

Question

我想知道是否有人知道使用引导程序 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。可见的 class 不适用于 Content afaik，它用于设置特殊的浮动、填充区域和断点。

合并列 classes 以实现您的目标，而无需增加您的内容。因为你想拉 left/right 你可能想看看 .pull-left .pull-right.

Answer 2

您不需要为相似的内容单独设置 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 )

Answer 3

以这种方式使用 hidden/visible 类违背了使用 bootstrap 类来分隔媒体大小的目的。虽然很难对潜在的 SEO 问题给出具体的答案，但请务必记住，即使内容设置为 display: none;，它在源代码中仍然可见。这就是被搜索引擎抓取和索引的内容。即使你的内容对用户不可见，但对搜索引擎是可见的，所以你的重复内容仍然是"seen"。作为一般规则，重复内容对 SEO 不利，尽管没有人能够确切地告诉您重复内容对您的排名有多糟糕或在什么时候对您的排名有害。

除了它是一种有风险的 SEO 做法之外，正如其他人所提到的那样，它只是混乱且难以维护。以下标记完成相同的事情：

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

Answer 4

Google 将使用桌面显示的内容进行排名。这也意味着移动排名。其他内容将被忽略。我认为 Bing 没有发布任何有关他们进行方式的相关信息。

不存在重复内容惩罚这样的事情。在您的情况下，您的 SEO 根本不会受到影响。你不用担心。

建议为桌面和移动设备提供相同的主要内容（即网页内容减去所有页面上的菜单、广告、页脚和其他内容）。

我维护了一个 summary 用于移动 SEO 以获取更多信息。

Answer 5

使用网格系统获得想要的响应结果。请记住适当调整视口。我可以推荐你 here!

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

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

css

seo

twitter-bootstrap