Bootstrap 的 SEO 影响可见 - lg/md/sm/xs - 类答案

【问题标题】：SEO Impact of Bootstraps visible - lg/md/sm/xs - classesBootstrap 的 SEO 影响可见 - lg/md/sm/xs - 类
【发布时间】：2015-04-25 17:11:35
【问题描述】：

我想知道是否有人知道使用引导程序 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 会将此视为我页面上的重复内容并因此对我进行处罚。这是我应该担心的问题吗？谢谢。

【问题讨论】：

您不需要复制 html 来添加更多类。 bootstrap col 类用于不同的断点。因此它将识别哪些在运行时应用。这样就不用担心可能会损害您的搜索引擎优化和页面加载时间的重复内容。

标签： css twitter-bootstrap seo

【解决方案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）

【讨论】：

抱歉，我刚刚更新了问题，对于小型设备，内容低于每个页面的主要内容，它不会停留在右侧，这就是我使用可见类的原因
@OdeyinkaOlubunmi ，抱歉耽搁了……刚刚得到足够的代表发表评论。你有什么理由使用这么多额外的课程吗？ “col-lg-6 col-md-6 col-sm-6 col-xs-6”完成与“col-xs-6”完全相同的事情。此外，添加“拉左”类是不必要的，因为该列已经向左浮动。在另一列上添加 'pull-right' 是不必要的，因为它向左浮动并且宽度为 50%（假设它具有类 'col-xs-6'）。好像你的标记过于复杂了。
这是一种明确的方式来告诉引导程序为每个屏幕尺寸做什么。即 col-lg-6（大屏幕使用 6 列）、col-md-6（中等屏幕使用 6 列）、col-sm-6（小屏幕使用 6 列）和 col-xs- 6（屏幕超小使用6列）。请记住，每种屏幕尺寸共有 12 列，这将确保每个屏幕尺寸获得一半，即 6 列
完全没有必要这样做。就像我在第一条评论中所说的 col-lg-6 col-md-6 col-sm-6 col-xs-6 和 col-xs-6 一样。 Col-xs-6 说 - 对于超小和更大的屏幕尺寸，使用 6 列 - 并且会这样做，直到您为更大的屏幕尺寸设置不同的断点。所以col-xs-6 col-md-4 说——对于超小和小屏幕，使用 6 列，然后对于中、大和超大屏幕，使用 4 列。除非另有说明，否则它始终从定义的最小屏幕尺寸开始并适用于所有较大的屏幕。

【解决方案2】：

以这种方式使用隐藏/可见类违背了将引导类用于媒体大小中断的目的。虽然很难对潜在的 SEO 问题给出具体答案，但重要的是要记住，即使内容设置为 display: none;，它仍然在源代码中可见。这就是搜索引擎正在抓取和索引的内容。即使您的内容对用户不可见，但它对搜索引擎可见，因此您的重复内容仍然是“可见的”。作为一般规则，重复内容对 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>

【讨论】：

【解决方案3】：

尽量不要为每个设备复制 div。可见类不适用于 Content afaik，它用于设置特殊的浮动、填充区域和断点。

结合 col 类来实现您的目标，而不会增加您的内容。由于您想向左/向右拉动，您可能需要查看 .pull-left .pull-right。

【讨论】：

【解决方案4】：

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

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

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

我为移动搜索引擎优化维护summary 以获取更多信息。

【讨论】：

【解决方案5】：

使用网格系统获取所需的响应式结果。请记住适当调整视口。我可以推荐你here！

【讨论】：