Avoiding duplicated content for responsive page

问题

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

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

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

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

Any advice would be much appreciated.

回答1:

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.

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

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

回答2:

If the divs are a predictable size (e.g. 50em) you could just offset them with position: relative and negative top values. This will let you give the appearance of a reordered flow without changing markup.

For example:

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

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

Place that inside a media query and it will give you the result you want.

回答3:

The CSS order property can be used to reorder flex children.
Bootstrap4 has introduced some (responsive) flex utilities that you can use to change the order of flex children.

<div class="row">
    <div class="col-sm-6 order-2 order-sm-1">div 1</div>
    <div class="col-sm-6 order-1 order-sm-2">div 2</div>
</div>

Consider the bootstrap-based snippet above. div 1 and div 2 appear in source order for devices that are sm and higher (md, lg, xl) whereas div 2 appears before div 1 on xs devices.

回答4:

Duel content is an issue best avoided, of course. And we should always create elements which can be any height, to allow for CMS content.

I'd suggest the mark-up order should be:

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

... as the designer specifies in the mobile layout. Width tends to be more knowable than height, so on desktop, you could do "the old switcharoo" to change their positions. Clearfix is implied. For example on desktop:

.div1, .div2 {
  float: left;
  position: relative;
  width: 200px;
}
.div2 {
  right: -200px;
}
.div1 {
  left: -200px;
}

... which should give you this layout:

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

(I've not checked this code - in all probability I've got my right and left mixed up)

Does this make sense?

回答5:

I know I'm late, but I hope this helps somebody else.

I would solve it by thinking it mobile-first. #div1 should be the first one shown in mobile resolutions, and #div2 the second one.

Then I would make them both float right, so the "first one" will be shown in the right when desired.

Here is an example (better see it in full page to see responsiveness):

* { box-sizing: border-box; }
div { border: 1px solid gray; }
#div1 { background: lightblue; }
#div2 { background: yellow; }
@media (min-width: 768px) {
  div {
    display: inline-block;
    width: 50%;
    float: right;
  }
}

<div id="div1">
  <p>This div will be shown on top on mobile resolutions, and will be in the right in any other resolution!</p>
  <p>We could say it will be a main content holder in mobile, and secondary in desktop</p>
</div>
<div id="div2">
  <p>This div will be shown on bottom on mobile resolutions, and will be in the left in any other resolution!</p>
  <p>We could say it will be a main content holder in desktop, and secondary in mobile</p>
</div>

回答6:

You can use CSS Flexbox's order property for doing this: Suppose your markup is:

.my-flex-container {
  display: flex;
}

/* change order on devices <= 768px */
@media (max-width: 768px) {
  .my-flex-container {
    flex-direction: column;
  }
  #div1 {
    order: 2;
  }
  #div2 {
    order: 1;
  }
}

<div class="my-flex-container">
  <div id="div1">Content of div1</div>
  <div id="div2">Content of div2</div>
</div>

Hope it will work fine for you

来源：https://stackoverflow.com/questions/16153699/avoiding-duplicated-content-for-responsive-page

标签

html

css

twitter-bootstrap

responsive-design