SEO - Trang web đáp ứng và thực đơn trùng lặp

Bất cứ khi nào tôi tạo một trang web Responsive, tôi thường tạo 2 menu: 1 ẩn và được sử dụng cho thiết bị di động và cái còn lại hiển thị dưới dạng menu chính, sau đó ẩn để hiển thị menu di động. Bất cứ khi nào nói đến SEO và các con nhện điều hướng trang web, tôi có bị sứt mẻ vì có các menu trùng lặp không? Có bất cứ điều gì tôi có thể làm để chỉ ra cho con nhện rằng menu này là dành cho thiết bị di động và đây là chính?

Lý do cuối cùng khiến tôi có 2 menu khác nhau là do vị trí, thường là menu chính nằm trong một loại thanh bên dưới logo, v.v., nhưng menu di động tôi muốn ở trên tất cả mọi thứ, vì vậy phía trên logo, v.v.

— Howdy_McGee
nguồn

Tại sao không sử dụng các truy vấn đáp ứng và tạo menu position:fixedhoặc position:absolute, ngoài ra, hầu hết các khung như bootstrap và zurb Foundation đều có các truy vấn có thể di chuyển các phần tử xung quanh dựa trên thiết bị nào đang truy cập trang ...

— Simon Hayter

Nếu bạn tạo 2 menu, đó không phải là Responsive. Một menu đáp ứng sử dụng cùng một <nav>nội dung và tạo kiểu khác nhau cho một điểm dừng truy vấn phương tiện cụ thể.

— hexalys

@hexalys không nhất thiết. Tôi có thể có một menu một phần cho "Điều hướng máy tính để bàn chính" rồi "Menu di động" với điều hướng đầy đủ hơn, cả hai <nav>chỉ hiển thị nhiều mục hơn trong phiên bản di động để dễ điều hướng hơn.

— Howdy_McGee

@Howdy_McGee Chắc chắn. Nhưng đó không thực sự là những gì bạn mô tả trong câu hỏi. Ví dụ, vấn đề chuyển đổi một thanh điều hướng giữa thành menu trên cùng hoặc hamburger cho thiết bị di động, có thể khó khăn, nhưng có thể thực hiện được thông qua thay đổi bố cục CSS. Tôi đã quản lý ok ở đây: goo.gl/v8HdLD. Và tôi đang ở đây ngay bây giờ, bởi vì tôi cũng cực kỳ lo lắng về cách tiếp cận lười biếng có chủ ý của người nghèo đối với hai cái gọi là plugin "menu đáp ứng" cho wordpress, và ý nghĩa của chúng về sự tuân thủ, khả năng truy cập và hiệu suất của công cụ tìm kiếm.

— hexalys

@hexalys Tôi nghĩ có những ưu và nhược điểm; cả hai đều có vị trí tương ứng, nó chỉ phụ thuộc vào tình huống. Vì tôi đã hỏi điều này nên tôi đã nhận được nhiều ưu tiên hơn cho một menu duy nhất nhưng chưa thấy bất cứ điều gì nói rằng có hai menu riêng biệt là một điều xấu hoặc nó bị ảnh hưởng trong SEO.

— Howdy_McGee

Câu trả lời:

Bạn không có gì phải lo lắng. Bạn có thể sử dụng display: none;để chuyển đổi menu. Các công cụ tìm kiếm tốt hơn nhiều trong việc hiểu về JS và CSS.

Miễn là bạn không cố tình thao túng mọi thứ để có được thứ hạng tốt hơn. Sử dụng màn hình: không có; để ẩn các khối văn bản lớn sẽ khiến bạn bị phạt. Vì vậy, nếu bạn chỉ sử dụng để ẩn menu máy tính để bàn của mình trên thiết bị di động và visa, bạn sẽ không gặp nguy hiểm. Hãy xem một chủ đề cũ này từ StackExchange:

Làm thế nào xấu là nó sử dụng hiển thị: không có trong CSS?

Google thực sự khá thích thiết kế đáp ứng và thích nó cho một trang web di động riêng biệt.

Đây là một bài viết hay về " SEO của thiết kế đáp ứng "

Ngoài ra, hãy xem bài viết / video này:

Matt Cutts (Google), nói rằng bạn không phải lo lắng về việc có một mặt trái, liên quan đến SEO, khi sử dụng phương pháp thiết kế đáp ứng cho các trang web di động.

— dasickle
nguồn

Hầu hết các trích dẫn và bài viết của bạn đề cập đến việc có một trang web phản hồi và có một trang web di động, đó không nhất thiết là những gì tôi đang hỏi (xin lỗi vì sự nhầm lẫn) mà liên quan nhiều hơn đến việc hủy / quảng cáo hoặc sử dụng 2 menu, một menu cho điện thoại di động menu chính và một cho menu chính của máy tính để bàn. Có vẻ như có 2 menu và trình thu thập thông tin đọc mã nguồn sẽ giải thích chúng một cách riêng biệt.

— Howdy_McGee

Những người đã ở đó để hỗ trợ tuyên bố thứ hai của tôi về thiết kế đáp ứng nói chung. Tôi bao gồm một liên kết khác trên đầu cho bạn và có khá nhiều trong số họ ra khỏi đó.

— dasickle

@dasickle Đưa ra cách tiếp cận này với nhiều menu, khi tìm kiếm một tên miền cụ thể trên google (ví dụ: tìm kiếm "warmane"), nó sẽ bao gồm trong kết quả tìm kiếm điều hướng của trang web đó, liệu có bị ảnh hưởng bởi phương tiện nào không?

— Dragos Rizescu

Bạn có thể sử dụng display: flexvà sau đó chỉ định một order: ngiá trị thay thế cho các bộ phận di chuyển phân chia menu của bạn ở trên hoặc bên dưới các bộ phận khác.

Nói cách khác, bạn không cần hai menu có cùng nội dung nếu bạn luôn ẩn một hoặc một trong số chúng.

— RedGrittyBrick
nguồn

Hầu hết các menu trên thiết bị di động được "mở" thông qua một lần bấm nút, về cơ bản là mở trong một cửa sổ phương thức thuộc loại này hay loại khác. Khi nói đến một trang web đáp ứng các tiêu chuẩn tiếp cận - những menu đó cần được đặt trong DOM một cách có chủ ý. Chỉ đơn giản là sử dụng một NAV trong tiêu đề và áp dụng CSS khác nhau để đạt được bố cục mong muốn (trong hầu hết các trường hợp).

Dòng dưới cùng - nếu menu của bạn ban đầu không hiển thị và che phủ phần còn lại của nội dung - có thể cần phải có nhiều thành phần điều hướng được đặt ở các vị trí khác nhau trong DOM (ẩn một và hiển thị cái khác tùy thuộc vào kích thước màn hình và mong muốn ).

— Cody
nguồn