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’a hoş geldiniz!</h1>
   <div id="note">
     <p><a href="#/clothes">Kıyafetlerimiz</a> ve <a href="#/shoes">ayakkabılarımız hakkında daha fazla bilgi edinin</p>
   </div>
   <script>
   window.addEventListener('hashchange', function goToPage(){
     // bu fonksiyon 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’a hoş geldiniz!</h1>
   <div id="note">
     <p><a href="/clothes">Kıyafetlerimiz</a> ve <a href="/shoes">ayakkabılarımız 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); // öndeki 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 yeniden endeksleme için gönderin http://www.example.com/?_escaped_fragment_=blog formatında. HTML sayfaları arama sonuçlarında göründüğünde, bağlantılar kullanıcıları sitenin AJAX sayfalarına yönlendirecektir.