Arayüz React

Google ReactJS içeriğini görebilir mi? | React SEO

Google sonuçlarında yer almak her site gibi react.js ile inşa edilmiş siteler için de önemlidir. ReactJS‘ in tüm html katmanını javascript ile kullanıcının tarayıcısında çizdiğinden geçen yazıda ufak da olsa bahsetmiştik.

Peki html tarayıcıda oluşturuluyorsa, google böcekleri içeriği nasıl okuyacak?  Birkaç sene öncesine kadar google sadece arayüzdeki kod ile ilgilenir, dinamik sayfalardaki değişikliklerle ilgilenmezdi. Fakat artan tek sayfa arayüzler, interaktif uygulamalar ve yeni arayüz çatıları ile google gözünü yüklenmeden sonra oluşturulan içeriğe dikmiş durumda.

Aslında google bir dönem sayfadaki Ajax isteklerini okumaya niyetlenmişti. Fakat sonra bundan vazgeçtiler. Fakat bunun yerine DOM’un render edildikten sonraki halini okuyabiliyor google böcekleri artık. Bunu da python’daki Mechanize gibi bir araç ile, yani bir browser emulate ederek, belki de tam olarak Mechanize ile crawl edip sayfanın son haline bakarak yapıyorlar.

webmaster-tools

Peki bunu nasıl anlayabiliriz derseniz, Google Webmaster Tools’daki “Fetch as Google” yani Google gibi getir düğmesinin hemen yanına gelen Fetch and Render düğmesi ile görebilirsiniz.

fetch-and-render

Veya bir diğer yol da, Google Sayfa Hızı Test Aracı‘nda sayfayı test etmek. Buradaki ekran görüntülerinden de anlayabileceğiniz üzere React ile çizilmiş olan arayüzü artık anlayabiliyor Google.

Diğer önemli bir nokta ise, eğer Ajax ile yüklediğiniz bir içerik varsa ve bu iş zaman alıyorsa, google yeteri kadar beklemeyip o yüklenecek olan içeriği göremeyebilir. O yüzden DOM henüz çizilmeden istek yapmaya veya bu işlem süresini kısa tutmaya gayret etmelisiniz.

Ayrıca sitenizdeki tüm sayfa türlerini bu araçlarda test edip çalıştıklarından emin olmanız önemlidir.

Küçük ama önemli bir detaydı. Bir çok insan için React kullanma konusunda tercih unsuru olduğunu düşünüyordum. Sanırım artık soru işareti kalmamıştır. Bir sonraki yazıda görüşmek üzere.



Yazar hakkında

Mehmet KÖSE

Yorumlar

2 Yorumlar

  • React in lisans kullanimi biraz sikinti
    facebook ile rekabet edersen yada react kullanan firmalarla ihtilafin varsa facebook mudahil olabilir Angular da bu yok misal MIT lisansına sahıp,
    Sizin bu konu hakkinizda bılgınız var mi

    • Selam. Siz söyleyince kontrol ettim 3 maddeli BSD lisansı varmış.
      Esasen ben son aylarda ReactJS yerine PreactJS kullanmaya başladım. Kendisi react’ın birebir aynı api’ına sahip ve tamamen es6 ve es7ye göre yazıldığı için çok küçük boyutlarda.

      githubda yeni 10bin beğeniyi geçti, egghead.io tutorial yaptı hakkında, yavaş yavaş yayılıyor. ayrıca MIT lisansına sahip. https://github.com/developit/preact

      geliştiricisi Jason çok aktif bir developer, sürekli yeni örnekler ve preact ile kullanılabilecek kütüphaneler geliştiriyor. takip etmenizi öneririm. ayrıca son olarak, preact-compat adındaki modül ile react kütüphaneleri büyük oranda kullanılabiliyor.

Bir yorum yaz