AJAX sitelerinin dizinlenmesi

Bir AJAX sitesini dizinlerken, Yandex botu orijinal URL’leri tarar ve üzerlerinde JavaScript kodunu çalıştırır. Dizinleme 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öntemi bırakmanızı öneririz:

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

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

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

   Yandex botu, AJAX sayfalarındaki HTML bağlantıları içinde arama yaparken yalnızca href özniteliğindeki URL'leri dikkate alır. Bağlantı adreslerinde parça kullanmayın (<a href="#/example">Örnek</a>). Bunun yerine, History API'yi 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</p> hakkında daha fazla bilgi edinin
   </div>
   <script>
   window.addEventListener('hashchange', function goToPage(){
     // bu işlev, geçerli URL parçacığına göre farklı içerikler yükler
     const pageToLoad = window.location.hash.slice(1); // URL parçacığı
     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</p> hakkında daha fazla bilgi edinin
   </div>
   <script>
   function goToPage(event){
     event.preventDefault(); // tarayıcının hedef URL’ye yönlendirilmesini engeller.
     const hrefUrl = event.target.getAttribute('href');
     const pageToLoad = hrefUrl.slice(1); // başındaki 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ında 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 amacıyla, eski sayfalardan yenilerine 301 yönlendirmesi ayarlayın. Örneğin, http://www.example.com/?_escaped_fragment_=blog page için yönlendirme, http://www.example.com/blog adresine yönlendirilecektir. Aramayı kullanıcılar için daha kolay hale getirmek amacıyla, 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 http://www.example.com/?_escaped_fragment_=blog formatında sayfaların HTML sürümlerini yeniden dizine eklemek 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.