Hey! Ben sadece girdinizi seveceğim teknik bir SEO sorusuyla uğraşan bir React geliştiriciyim.

Birden çok müşteri bileşeni olan bir sonraki.js SSG (Statik Site Oluşturma) web sitesinde çalışıyorum. Mobil ve masaüstü için tamamen farklı yapılara sahip karmaşık bir duyarlı gezinme var:

  • Masaüstü: açılır kaplamalı yatay menü, farklı düğmeler, dil açılır

  • Mobil: Akordeon tarzı menüleri, farklı düğme düzeni ve farklı dil açılışlı hamburger menüsü

Şu anda kesme noktalarını tespit etmek için JavaScript kancasını kullanıyor. Sunucu mobil cihazlar için sürüm oluşturduğundan, ancak masaüstündeki istemci ekran boyutuna dayalı başka bir tane gösterir çünkü hidrasyon uyumsuzluğu hatalarına neden olur.

Bu yüzden çözümü düşünüyorum: HTML’de her iki navigasyon yapısını oluşturmak ve uygunsuz olanı gizlemek için CSS medya sorgularını kullanmak:

<nav>
  <div class="nav-desktop"><!-- Desktop navigation --></div>
  <div class="nav-mobile"><!-- Mobile navigation --></div>
</nav>

@media (max-width: 1279px) {
  .nav-desktop { display: none; }
}
@media (min-width: 1280px) {
  .nav-mobile { display: none; }
}

SEO Endişeleri:

  1. Yinelenen İçerik: Her iki NAV aynı bağlantılar içerir – bu anahtar kelime doldurma olarak görülecek mi yoksa dahili bağlantı ile ilgili soruna neden olacak mı?
  2. Gizli İçerik: Google’ın Yönergeleri Gizli İçeriğin devalüe edilebileceğini söylüyor – CSS Görüntüleniyor mu: Yok Sayın?
  3. Googlebot, yinelenen navigasyonun ayrıştırılmasından endişe edecek mi?

Deneyiminizden herhangi bir anlayış çok takdir edilecektir! Teşekkürler!