SEO Tác động của bootstraps có thể nhìn thấy - lg/md/sm/xs - lớp

Question

tôi đã tự hỏi nếu có ai biết về tác động của việc sử dụng SEO bootstraps visible lớp để tạo một trang web đáp ứng? Tôi đã tạo một trang web mới với Bootstrap bằng cách sử dụng các lớp này. Trên hầu hết các trang, nội dung chính nằm ở bên trái và sau đó có một số liên kết ở phía bên phải của trang. Cấu trúc của tôi giống như sau:

<div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
     //Main content here on left of page 
    </div> 

    <div class="col-lg-6 col-md-6 visible-lg visible-md"> 
     //Content on right of page for large and medium devices 
    </div> 

    <!--SMALL STARTS HERE-->  
    <div class="col-sm-12 visible-sm"> 
     //Same content but drops below main content of page for small devices 
    </div> 

    <!--EXTRA SMALL STARTS HERE-->  
    <div class="col-xs-12 visible-xs"> 
     //Same content again but drops below main content and is rendered for phones 
    </div> 
</div> 

Vì vậy, câu hỏi của tôi là nếu đây là ý tưởng tồi hay không? Tôi lo lắng rằng Google/Bing/Yahoo sẽ thấy nội dung trùng lặp này trên các trang của tôi và phạt tôi vì nó. Đây có phải là vấn đề mà tôi nên lo lắng không? Cảm ơn.

Answer 1

Bạn không cần phải có div riêng cho nội dung tương tự. Đoạn code dưới đây là tương đương với những gì bạn đã viết cung cấp các nội dung đều giống nhau như được viết trong các bình luận trong mã ví dụ của bạn // Cùng nội dung

<div class="row"> 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
      //Main content here on left of page 
     </div> 

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
    //Content on right of page for large and medium devices 
</div> 
</div> 

cho kéo phải và kéo trái bạn có thể đạt được điều đó bằng cách thêm lớp học kéo bên trái và kéo bên phải

 <div class="row"> 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-left"> 
      //Main content here on left of page 
     </div> 

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pull-right"> 
    //Content on right of page for large and medium devices 
    </div> 
    </div> 

nếu bạn muốn nội dung trên quyền không thả sau đó bạn phải hướng dẫn cụ thể nó không thả như thế này

<div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-left"> 
     //Main content here on left of page 
    </div> 

    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pull-right"> 
     //Content on right of page for large and medium devices 
    </div> 
</div> 

Tôi sẽ không khuyên bạn sao chép nội dung div của bạn như bạn đã biết nó không tốt cho bạn SEO và không bảo trì thân thiện (cập nhật tất cả div cho mọi thay đổi thay vì chỉ một div)

Answer 2

Cố gắng không để dublicate divs cho mỗi thiết bị. Lớp hiển thị không dành cho Nội dung afaik, được sử dụng để đặt các phao nổi, vùng điền và điểm ngắt đặc biệt.

kết hợp các lớp col để đạt được mục tiêu của mình mà không cần nhân lên nội dung của bạn. vì bạn muốn kéo sang trái/phải, bạn có thể muốn xem .pull-left .pull-right.

Answer 3

Sử dụng lớp ẩn/hiển thị theo cách này, đánh bại mục đích sử dụng các lớp bootstrap để phá vỡ kích thước phương tiện truyền thông. Mặc dù khó có thể đưa ra câu trả lời cụ thể cho các vấn đề SEO tiềm ẩn, nhưng điều quan trọng cần nhớ là ngay cả khi nội dung được đặt thành display: none;, nó vẫn hiển thị trong mã nguồn. Đây là những gì đang được thu thập thông tin và lập chỉ mục của công cụ tìm kiếm. Ngay cả khi nội dung của bạn không hiển thị với người dùng, nội dung đó hiển thị với công cụ tìm kiếm, vì vậy nội dung trùng lặp của bạn vẫn "nhìn thấy". Theo nguyên tắc chung, nội dung trùng lặp là xấu đối với SEO, mặc dù không ai có thể cho bạn biết CHÍNH XÁC mức độ ảnh hưởng xấu đến nội dung trùng lặp của bạn.

Bên cạnh đó là một thực hành SEO nguy hiểm, nó chỉ là lộn xộn và khó khăn để duy trì như những người khác đã đề cập. Đánh dấu sau đây hoàn thành cùng một điều:

<div class="row"> 
    <div class="col-md-6"><!--THIS WILL BE 50% WIDTH ON MEDIUM AND UP, 100% WIDTH ON XS AND SMALL--> 
    //Main content here on left of page 
    </div> 

    <div class="col-md-6"> <!--THIS WILL BE 50% WIDTH ON MEDIUM AND UP, 100% WIDTH ON XS AND SMALL--> 
    //Content on right of page - THIS WILL GET PUSHED BELOW OTHER CONTENT ON SMALL AND XS SCREENS 
    </div> 
</div> 

Answer 4

Google sẽ sử dụng nội dung được hiển thị cho máy tính để bàn để xếp hạng. Điều đó có nghĩa là bảng xếp hạng di động. Nội dung khác sẽ bị bỏ qua. Tôi không nghĩ Bing đã phát hành bất kỳ thông tin liên quan nào về cách họ tiến hành.

Không có những điều như một hình phạt nội dung trùng lặp. Trong trường hợp của bạn, SEO của bạn sẽ không bị ảnh hưởng gì cả. Bạn không cần phải lo lắng.

Nó được khuyến khích để cung cấp nội dung chính cùng (menu nội dung ví dụ: trang web trừ, quảng cáo, footers và các công cụ có mặt trên tất cả các trang) cho máy tính để bàn và di động.

Tôi duy trì summary cho SEO di động để biết thêm thông tin.

Answer 5

Sử dụng hệ thống lưới để thu được kết quả mong muốn. Hãy nhớ điều chỉnh chế độ xem của bạn một cách thích hợp. Tôi có thể giới thiệu bạn here!