9

私は現在、レスポンシブ デザインを扱うプロジェクトに取り組んでおり、全体のレイアウトは 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などで2回表示されるため、明らかに最適ではないため、速度が影響を受けます(無視できる可能性がありますが)。

問題を軽減する可能性のあるJavaScriptベースではない、実装できる他のソリューションはありますか?

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

4

6 に答える 6

6

レスポンシブ ページでは、要素を非表示または再表示している場合、SEO の重複コンテンツは実際の問題です。コードは引き続き DOM でレンダリングされ、検索エンジンがコードを見ることができる場合 (ユーザーが出力を見ることができなくても)、それは依然としてあなたに対してカウントされます。上記の回答はどれもこれに対する実際の解決策を提供していません。正直に言うと、現時点ではどちらもできません。

私は実際にDOMからjavascriptを使用して要素を削除する方向に進んでいますが、それは非常に面倒になり、理想的でもありません。

上記のメディア クエリの回答は、重複したコンテンツを含む DOM への HTML 出力がまだあるという事実を変更しません。

于 2013-10-16T14:53:39.270 に答える
1

もちろん、決闘コンテンツは避けるのが最善の問題です。また、CMS コンテンツを許可するために、常に任意の高さの要素を作成する必要があります。

マークアップの順序は次のようにすることをお勧めします。

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

...デザイナーがモバイルレイアウトで指定したとおり。幅は高さよりも認識しやすい傾向があるため、デスクトップでは、「古い switcharoo」を実行して位置を変更できます。Clearfix が暗示されます。たとえば、デスクトップでは次のようになります。

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

...これにより、次のレイアウトが得られます。

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

(私はこのコードをチェックしていません - おそらく私は右と左を混同しています)

これは理にかなっていますか？

于 2013-10-03T08:59:30.493 に答える