Tránh nội dung trùng lặp cho trang phản hồi

Question

Tôi hiện đang làm việc trên một dự án đối phó với thiết kế đáp ứng và toàn bộ bố cục phải đạt được bằng cách sử dụng HTML và CSS. Tôi biết nó có thể di chuyển nội dung từ một cột bố trí khác, mà không sao chép nội dung, bằng cách sử dụng java script nhưng là cùng có thể đạt được bằng cách sử dụng HTML và CSS?

Đưa những ví dụ sau đây mà sẽ làm cho như thế này trên các thiết kế máy tính để bàn

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

Nhưng sau đó các nhà thiết kế đã chuyển div1 xuống dưới div2 về thiết kế điện thoại di động.

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

Rõ ràng cách tự nhiên các yếu tố cấp khối sẽ chồng ngược nhau.

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

Sử dụng ở trên, nội dung của div1 được nhân đôi. Điều này có tệ cho SEO không? Rõ ràng nó không tối ưu vì nội dung xuất hiện hai lần trong DOM vv, vì vậy tốc độ bị ảnh hưởng (mặc dù có thể không đáng kể).

Có bất kỳ giải pháp nào khác mà tôi có thể triển khai không dựa trên javascript có thể làm giảm sự cố không?

Mọi lời khuyên sẽ được đánh giá cao.

Answer 1

Nếu div là một kích thước có thể dự đoán (ví dụ: 50em), bạn chỉ có thể bù đắp chúng bằng position: relative và giá trị top âm. Điều này sẽ cho phép bạn cung cấp cho sự xuất hiện của một dòng chảy sắp xếp lại mà không thay đổi đánh dấu.

Ví dụ:

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

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

Nơi mà bên trong một truy vấn phương tiện truyền thông và nó sẽ cung cấp cho bạn kết quả bạn muốn.

Answer 2

Nội dung duel là một vấn đề tốt nhất tránh được, tất nhiên. Và chúng ta nên luôn tạo các yếu tố có thể là bất kỳ chiều cao nào, để cho phép nội dung CMS.

tôi muốn đề nghị thứ tự mark-up nên là:

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

... như các nhà thiết kế quy định cụ thể trong cách bố trí di động. Chiều rộng có xu hướng dễ hiểu hơn chiều cao, vì vậy trên máy tính để bàn, bạn có thể thực hiện "switcharoo cũ" để thay đổi vị trí của chúng. Clearfix được ngụ ý. Ví dụ trên máy tính để bàn:

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

... mà nên cung cấp cho bạn cách bố trí này:

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

(Tôi đã không kiểm tra mã này - trong tất cả các khả năng tôi đã có phải của tôi và rời khỏi hỗn hợp lên)

Điều này có hợp lý không?

Answer 3

Nội dung trùng lặp cho SEO là một vấn đề thực sự với trang đáp ứng nếu bạn đang ẩn và bỏ ẩn các yếu tố. Mã này vẫn được hiển thị trong DOM và nếu các công cụ tìm kiếm có thể nhìn thấy mã (ngay cả khi người dùng không thể nhìn thấy đầu ra), mã sẽ vẫn tính vào bạn. Không có câu trả lời nào ở trên cung cấp một giải pháp thực sự cho điều này, và thành thật mà nói tôi không thể vào thời điểm này.

Tôi đang di chuyển theo hướng thực sự xóa các phần tử có javascript khỏi DOM, nhưng điều đó cực kỳ lộn xộn và cũng không lý tưởng.

Câu trả lời truy vấn phương tiện trên sẽ không thay đổi thực tế là bạn vẫn có HTML xuất ra DOM với nội dung trùng lặp.

Answer 4

Tôi biết mình đến trễ, nhưng tôi hy vọng điều này sẽ giúp người khác.

Tôi sẽ giải quyết nó bằng cách suy nghĩ thiết bị di động trước tiên. #div1 phải là chữ cái đầu tiên được hiển thị trong độ phân giải di động và #div2 hình thứ hai.

Sau đó, tôi sẽ làm cho cả hai đều nổi bên phải, do đó, "cái đầu tiên" sẽ được hiển thị ở bên phải khi muốn.

Dưới đây là một ví dụ (tốt hơn nhìn thấy nó trong trang đầy đủ để xem phản ứng):

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

• Thuộc tính CSS order thể được sử dụng để sắp xếp lại flex trẻ em.
• Bootstrap4 đã giới thiệu một số tiện ích flex (đáp ứng) mà bạn có thể sử dụng để thay đổi thứ tự của trẻ em flex.

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

Hãy xem xét đoạn mã bootstrap dựa trên. div 1 và div 2 xuất hiện theo thứ tự nguồn cho các thiết bị là sm trở lên (md, lg, xl) trong khi div 2 xuất hiện trước div 1 trên xs thiết bị.