Setiap kali saya membuat Situs Web Responsif saya biasanya membuat 2 menu: 1 disembunyikan dan digunakan untuk seluler dan yang lainnya ditampilkan sebagai menu utama, lalu disembunyikan untuk menampilkan menu seluler. Setiap kali datang ke SEO dan laba-laba menavigasi situs web apakah saya mendapatkan dinged karena memiliki menu duplikat? Apakah ada yang bisa saya lakukan untuk menunjukkan pada laba-laba bahwa menu ini untuk seluler dan ini adalah utamanya?
Alasan akhirnya mengapa saya memiliki 2 menu berbeda adalah karena lokasinya, biasanya menu utama ada di semacam bar di bawah logo dll, tetapi menu ponsel saya ingin di atas segalanya, jadi di atas logo dll.
seo
web-crawlers
googlebot
navigation
Howdy_McGee
sumber
sumber
position:fixed
atauposition:absolute
, selain itu sebagian besar kerangka kerja seperti bootstrap dan zurb foundation memiliki tarikan kueri yang dapat memindahkan elemen berdasarkan perangkat mana yang mengakses halaman ...<nav>
konten yang sama , dan memberinya gaya berbeda dengan memberikan breakpoint kueri media tertentu.<nav>
hanya menampilkan lebih banyak item dalam versi seluler sehingga lebih mudah dinavigasi.Jawaban:
Anda tidak perlu khawatir. Anda dapat menggunakannya
display: none;
untuk berganti menu. Mesin pencari jauh lebih baik dalam memahami JS dan CSS.Selama Anda tidak sengaja mencoba memanipulasi hal-hal untuk mendapatkan peringkat yang lebih baik. Menggunakan tampilan: tidak ada; untuk menyembunyikan blok teks besar akan membuat Anda dihukum. Jadi jika Anda hanya menggunakan untuk menyembunyikan menu desktop di ponsel dan ayat visa Anda tidak dalam bahaya. Lihatlah utas lama ini dari StackExchange:
Seberapa buruk menggunakan display: tidak ada di CSS?
Google sebenarnya cukup menyukai desain responsif dan lebih suka ke situs seluler terpisah.
Inilah artikel bagus tentang " SEO of Responsive Design "
Juga, lihat artikel / video ini:
Matt Cutts (Google), mengatakan bahwa Anda tidak perlu khawatir ada sisi buruknya, terkait dengan SEO, ketika menggunakan pendekatan desain responsif untuk situs web seluler.
sumber
Anda dapat menggunakan
display: flex
dan kemudian menetapkanorder: n
nilai alternatif untuk divisi yang memindahkan divisi menu Anda di atas atau di bawah divisi lainnya.Dengan kata lain, Anda tidak perlu dua menu dengan konten yang sama jika Anda selalu menyembunyikan satu atau lainnya.
sumber
Sebagian besar menu seluler "dibuka" melalui klik tombol, pada dasarnya membuka di jendela modal atau semacamnya. Ketika datang ke standar aksesibilitas pertemuan situs web - menu tersebut harus ditempatkan di DOM secara sengaja. Tidak cukup hanya menggunakan satu NAV di header dan menerapkan CSS berbeda untuk mencapai tata letak yang diinginkan (dalam banyak kasus).
Intinya - jika menu Anda pada awalnya tidak terlihat, dan overlay sisa konten - mungkin perlu untuk memiliki beberapa elemen nav ditempatkan di posisi yang berbeda di DOM (menyembunyikan satu dan menunjukkan yang lain tergantung pada ukuran layar dan keinginan ).
sumber