避免响应页面的重复内容

Question

我目前正在开发一个处理响应式设计的项目,整个布局应该使用HTML和CSS来实现.我知道可以使用java脚本将内容从一个列布局移动到另一个列布局而不重复内容,但是使用HTML和CSS可以实现相同的目的吗？

举例来说,下面会在桌面设计上呈现这样的效果

--page-------------------
|  --------  --------   |
|  |div 1 |  | div 2|   |
|  --------  --------   |
-------------------------

但随后设计师已经转向移动设计的div1下方div2.

--page--------
|  --------  |
|  |div 2 |  |
|  --------  |
|  --------  |
|  |div 1 |  |
|  --------  | 
--------------

显然,块级元素堆叠的自然方式是相反的方式.

--page-------------------
|  --------  --------   |
|  |div 1 |  | div 2|   |  <--- shown on desktop
|  --------  --------   |
|  --------             |
|  |div 1 |             |  <--- hidden on desktop
|  --------             |
-------------------------

--page--------
|  --------  |
|  |div 1 |  | <--- hidden on mobile
|  --------  | 
|  --------  |
|  |div 2 |  | <--- shown on mobile
|  --------  |
|  --------  |
|  |div 1 |  | <--- shown on mobile
|  --------  | 
--------------

使用上述内容,div1重复内容.这对SEO不好吗？显然它不是最佳的,因为内容在DOM等中出现两次,因此速度受到影响(尽管可能可以忽略不计).

还有其他我可以实现的解决方案,这些解决方案不是基于javascript的,可能会缓解这个问题吗？

任何建议将不胜感激.

Answer 1

如果您隐藏和取消隐藏元素,SEO的重复内容是响应式页面的真正问题.代码仍然在DOM中呈现,如果搜索引擎可以看到代码(即使用户看不到输出),它仍将依赖于您.上面的答案都没有为此提供真正的解决方案,而且说实话我现在也不能.

我正在朝着实际上从DOM中删除带有javascript的元素,但这非常混乱,也不理想.

上面的媒体查询答案不会改变您仍然将HTML输出到具有重复内容的DOM的事实.

Answer 2

如果 div 的大小是可预测的（例如 50em），您可以使用position: relative和 负值来抵消它们top。这将使您能够在不更改标记的情况下获得重新排序的流程的外观。

例如：

#div1 {
    float: left
    clear: both;
    height: 50em;
    position: relative;
    top: 50em;
}

#div2 {
    float: left
    clear: both;
    height: 50em;
    position: relative;
    top: -50em;
}

将其放入媒体查询中，它将为您提供所需的结果。