避免响应页面出现重复内容 [英] Avoiding duplicated content for responsive page

问题描述

我目前正在从事一个响应式设计的项目，整个布局应使用HTML和CSS来实现.我知道可以使用Java脚本将内容从一种列布局移动到另一列布局而无需复制内容，但是使用HTML和CSS可以实现相同的目的吗?

I am currently working on a project dealing with responsive design, and the whole layout should be achieved using HTML and CSS. I know its possible to move content from one column layout to another, without duplicating content, using java script but is the same achievable using HTML and CSS?

例如，下面的示例将在桌面设计上呈现

Take for example the following which would render like this on the desktop design

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

但是随后，设计师在移动设计上将 div1 移到了 div2 下方.

But then the designer has moved div1 to below div2 on the mobile design.

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

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

Obviously the natural way the block level elements will stack is the opposite way around.

--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等中出现两次，因此速度受到影响(尽管可以忽略不计).

Using the above, the content of div1 is duplicated. Is this bad for SEO? Clearly it's not optimal as the content appears twice in the DOM etc, so speed is affected (albeit possibly negligible).

我是否可以实施不是基于javascript的其他解决方案来缓解问题?

Are there any other solutions which I could implement which aren't javascript based which might alleviate the issue?

任何建议将不胜感激.

推荐答案

如果您要隐藏和取消隐藏元素，则SEO的重复内容是响应页面的一个实际问题.该代码仍在DOM中呈现，并且如果搜索引擎可以看到该代码(即使用户看不到该输出)，它仍将对您不利.上面的答案都没有为这个问题提供真正的解决方案，说实话，在这一点上我也不能做到.

Duplicate content for SEO is a real problem with responsive pages if you are hiding and unhiding elements. The code is still rendered in the DOM and if the search engines can see the code (even if the user cannot see the output) it will still count against you. None of the answers above provide a real solution for this, and to be quite honest I can't either at this point.

我正朝着从DOM中实际删除带有javascript元素的方向发展，但这变得非常混乱，也不理想.

I am moving towards actually removing elements with javascript from the DOM, but that gets extremely messy and is not ideal either.

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

The media query answer above will not change the fact that you still have HTML outputting into the DOM with duplicate content.

这篇关于避免响应页面出现重复内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！