AJAX sitelerinin dizinlenmesi

Bir AJAX sitesini dizinlerken, Yandex botu orijinal URL’leri tarar ve üzerlerinde JavaScript kodunu çalıştırır. Arama ayarlarını ve sayfaların arama durumunu kontrol etmek için JavaScript Rendering kullanın.

Daha önce AJAX sayfalarının HTML sürümünü belirtmek için meta name="fragment" content="!" meta etiketini kullandıysanız, bot bunu görmezden gelecek ve orijinal sayfayı dizinleyecektir.

Daha önce sayfanın HTML sürümünü #! parametresiyle Yandex botuna bildirdiyseniz, bu yöntemden vazgeçmenizi öneririz:

1. Site haritası dosyasında, bağlantı yapısını # karakterini içermeyecek şekilde değiştirin.

2. AJAX sayfalarındaki bağlantılar # karakterini kullanıyorsa, adresleri bu karakter olmadan URL’lere değiştirin. Örneğin, Geçmiş API’sini kullanabilirsiniz.

   Geçmiş API’si hakkında ayrıntılar

   AJAX sayfalarındaki bağlantıları HTML bağlantılarından ararken, Yandex botu yalnızca href özniteliğindeki URL’leri dikkate alır. Bağlantı adreslerinde parça kullanmayın (<a href="#/example">Örnek</a>). Bunun yerine, Geçmiş API’sini kullanmanızı öneririz. Bu, tarayıcının geçmişini bir oturum içinde (sekme veya sayfa içinde yüklenen çerçeve içindeki ziyaret edilen sayfalar hakkında) yönetmenizi sağlar.

   Örneğin, bot aşağıdaki durumda bağlantıları algılayamayacaktır:

   <nav>
     <ul>
       <li><a href="#/clothes">Kıyafetler</a></li>
       <li><a href="#/shoes">Ayakkabılar</a></li>
     </ul>
   </nav>
   
   <h1>example.com adresine hoş geldiniz!</h1>
   <div id="note">
     <p><a href="#/clothes">Kıyafetlerimiz</a> ve <a href="#/shoes">ayakkabılarımız</a> hakkında daha fazla bilgi edinin</p>
   </div>
   <script>
   window.addEventListener('hashchange', function goToPage() {
     // bu işlev, mevcut URL parçasına göre farklı içerik yükler
     const pageToLoad = window.location.hash.slice(1); // URL parçası
     document.getElementById('placeholder').innerHTML = load(pageToLoad);
   });
   </script>
   

   Geçmiş API’sine geçmek bağlantıları erişilebilir hale getirecektir:

   <nav>
     <ul>
       <li><a href="/clothes">Kıyafetler</a></li>
       <li><a href="/shoes">Ayakkabılar</a></li>
     </ul>
   </nav>
   
   <h1>example.com adresine hoş geldiniz!</h1>
   <div id="note">
     <p><a href="/clothes">Kıyafetlerimiz</a> ve <a href="/shoes">ayakkabılarımız</a> hakkında daha fazla bilgi edinin</p>
   </div>
   <script>
   function goToPage(event) {
     event.preventDefault(); // tarayıcının hedef URL’ye gitmesini durdur.
     const hrefUrl = event.target.getAttribute('href');
     const pageToLoad = hrefUrl.slice(1); // baştaki eğik çizgiyi kaldır
     document.getElementById('placeholder').innerHTML = load(pageToLoad);
     window.history.pushState({}, window.title, hrefUrl) // URL’yi ve tarayıcı geçmişini güncelle.
   }
   
   // Sayfadaki tüm bağlantılar için istemci tarafı yönlendirmeyi etkinleştir
   document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));
   
   </script>
   

3. Sitenin arama durumu için önemli olan ölçümleri korumak için, eski sayfalardan yenilerine 301 yönlendirmesi ayarlayın. Örneğin, http://www.example.com/?_escaped_fragment_=blog sayfası için yönlendirme http://www.example.com/blog adresine gidecektir. Kullanıcılar için aramayı daha uygun hale getirmek için, http://www.example.com/#!blog adresinden http://www.example.com/blog adresine de bir yönlendirme ayarlayın.

Botun sitenizin sayfalarını daha hızlı öğrenmesine yardımcı olmak için, sayfaların HTML sürümlerini http://www.example.com/?_escaped_fragment_=blog biçiminde yeniden dizinleme için gönderin. HTML sayfaları arama sonuçlarında göründüğünde, bağlantılar kullanıcıları sitenin AJAX sayfalarına yönlendirecektir.