レスポンシブページの重複コンテンツの回避

Question

私は現在、レスポンシブデザインを扱うプロジェクトに取り組んでおり、HTMLとCSSを使用して全体のレイアウトを達成する必要があります。コンテンツを複製することなく、Javaスクリプトを使用してコンテンツを1つの列レイアウトから別の列レイアウトに移動することは可能ですが、HTMLとCSSを使用して同じ達成可能性を確認できますか？例えば

テイクデスクトップのデザイン

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

しかし、その後、設計者はモバイル設計にdiv2の下にdiv1を移動した上で、次のようにレンダリングされ、以下の通りです。

--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などで2回表示されるため、最適ではないため、速度は影響を受けます（ただし無視できる場合もあります）。

問題を緩和する可能性があるjavascriptベースではない実装可能な他のソリューションはありますか？

アドバイスをいただければ幸いです。

Answer 1

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

場所。

Answer 2

決闘内容は、もちろん避けなければならない問題です。そして、CMSのコンテンツを可能にするために、常に高さを設定できる要素を作成する必要があります。

私は、マークアップのためにあるべきことをお勧めしたい：

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

...設計者はモバイルレイアウトで指定しますよう。幅は高さよりもわかりやすい傾向があるので、デスクトップでは、「古いスイッチャー」を使用して位置を変更できます。 Clearfixが暗示されています。デスクトップ上の例：あなたはこのレイアウトを与える必要があります

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

...：

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

（私はこのコードをチェックしていませんでした - すべての確率で、私は私の右を持って、混合残してきましたup）

これは意味がありますか？

Answer 3

SEO用の重複コンテンツは、要素を非表示にしたり再表示していない場合は、反応性の高いページで実際の問題です。コードは引き続きDOMにレンダリングされ、検索エンジンがコードを見ることができれば（ユーザーが出力を見ることができなくても）、それはあなたに数えられます。上記の答えのどれも、これに対する本当の解決策を提供していないし、私はこの時点ではどちらもできないということは非常に正直である。

DOMから実際にjavascriptで要素を削除する方向に向かっていますが、非常に乱雑になり、理想的でもありません。

上記のメディアクエリの回答は、重複したコンテンツを持つHTMLにまだHTMLを出力しているという事実は変わりません。

Answer 4

私は遅刻していることは知っていますが、これが他の人に役立つことを願っています。

私はそれをモバイルファーストと考えて解決します。 #div1はモバイル解像度で最初に表示され、#div2は2番目に表示されます。

私はそれらを両方ともフロートさせるようにします。そうすれば、最初のものが必要なときに右側に表示されます。ここで

は（よりよい応答性を調べるために、全ページにそれを参照してください）の例である：

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

Answer 5

• CSS orderプロパティはflex子供の順序を変更するために使用することができます。
• Bootstrap4ではフレックスの子の順序を変更するために使うことができる（応答性の高い）フレックスユーティリティを導入しました。

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

は、上記ブートストラップベースのスニペットを考えます。デバイス番号sm以上（md、lg、xl）のデバイスでは、div 1とが表示されますが、div 2はxsデバイスのdiv 1より前に表示されます。