JavaScript SEO: Googlebot gerçekte ne görüyor?
Google’ın JavaScript sayfalarını nasıl tarayıp render ettiği, en sık neyin bozulduğu, doğru render stratejisi ve Googlebot’un gördüğünü test etmenin yolları.
Google JavaScript’i render edebilir; ancak render, taramadan sonra gelen ayrı bir adımdır ve sunucunuzun gönderdiği HTML ile tarayıcının gösterdiği sayfa arasında pek çok şey ters gidebilir. Aralarında pek çok AI tarayıcısının da bulunduğu diğer birçok tarayıcı ise JavaScript’i hiç çalıştırmaz. İyi sonuç alan siteler içeriklerini, linklerini ve temel sinyallerini ilk HTML’e koyar ve tarayıcıların gerçekte ne aldığını test eder.
Google JavaScript’i nasıl işler?
Googlebot, robots.txt izin veriyorsa bir URL’yi çeker ve HTML yanıtını okur. 200 durum kodu döndüren sayfalar render kuyruğuna girer; burada Chromium’un her zaman güncel tutulan (evergreen) bir sürümü JavaScript’i çalıştırır. Başka durum kodları döndüren sayfalar hiç render edilmeyebilir. Google ancak bundan sonra render edilmiş içeriği dizine ekler ve render sırasında ortaya çıkan linkleri alır.
Google bir JavaScript sayfasını nasıl işler?
- KeşifLinkler ve site haritaları URL’ye götürür
- TaramaURL çekilir ve HTML yanıtı okunur
- Kuyruk200 döndüren sayfalar render için bekler
- RenderGüncel Chromium JavaScript’i çalıştırır
- İndekslemeRender edilmiş içerik, linkler ve sinyaller işlenir
Bunun iki sonucu var. Render taramanın gerisinde kalabilir; yani yalnızca JavaScript çalıştıktan sonra var olan içerik, HTML’deki içerikten daha geç görülebilir. Google ilk HTML’de noindex bulursa render’ı tamamen atlayabilir; dolayısıyla etiketi sonradan kaldıran bir script işe yaramaz.
Sayfa render edildikten sonra Google, JavaScript’in eklediği linkleri, metni ve yapılandırılmış veriyi okuyabilir. Ama “okuyabilir” ile “güvenilir şekilde ve hızla okur” aynı şey değildir ve JavaScript SEO sorunlarının çoğu bu aradaki boşlukta yaşanır.
En sık ne bozuluyor?
- Yalnızca bir etkileşimden sonra görünen içerik. Google tıklamaz, yazmaz ve kaydırmaz. Tıklandığında içerik çeken sekmeler, akordeonlar ve “daha fazla yükle” düğmeleri bu içeriği Google’dan saklar. İçeriği HTML’e koyun ve CSS ile gösterip gizleyin.
hrefiçermeyen linkler ve hash ile yönlendirme. Google,hrefiçeren<a>öğelerini güvenilir şekilde izler. Tıklama işleyicisi olan düğmeler link değildir;/#/fiyatlargibi rotalar da ayrı URL’ler değil, parçalardır (fragment). Gerçek yollarla History API’yi kullanın.- JavaScript ile değiştirilen
noindexya da canonical. Google, bir script’innoindex’i kaldırdığı sürümü hiç render etmeyebilir. Canonical’ı JavaScript belirliyorsa HTML’dekiyle aynı olmalı ve sayfada yalnızca bir tane bulunmalı. - Tek sayfalı uygulamalarda soft 404’ler. Pek çok uygulama var olmayan rotalar için 200 döndürür ve bir “bulunamadı” görünümü gösterir. Sunucunun gerçek bir 404 döndürmesini sağlayın. Bu mümkün değilse 404 döndüren bir URL’ye yönlendirin ya da hata görünümüne
noindexekleyin. - Engellenen JavaScript ya da CSS. robots.txt, sayfanın ihtiyaç duyduğu dosyaları engelliyorsa Google sayfayı bu dosyalar olmadan render eder.
- Kaydırma olayıyla tetiklenen lazy loading. Kaydırmayı bekleyen içerik Google için hiç yüklenmeyebilir. İçeriği görüntü alanına girdiğinde yükleyen yerel lazy loading’i ya da
IntersectionObserver’ı kullanın.
Render stratejisi seçmek
Render stratejiniz ilk HTML’de neyin bulunacağını, dolayısıyla her tarayıcının JavaScript çalıştırmadan neyi görebileceğini belirler.
Herkese açık sayfalar için render stratejileri
| Strateji | Tarayıcılar ne alır? | Değerlendirme |
|---|---|---|
| Statik üretim (SSG) | Önceden oluşturulmuş eksiksiz HTML | En iyi varsayılan |
| Sunucu taraflı render (SSR) | Her istek için oluşturulan eksiksiz HTML | Önerilir |
| Hibrit: sunucu HTML’i ve hydration | Eksiksiz HTML, JavaScript yalnızca gereken yerde | Önerilir |
| İstemci taraflı render (CSR) | JavaScript çalışana kadar neredeyse boş bir kabuk | SEO için kaçının |
| Dinamik render | Botlara önceden render edilmiş HTML, kullanıcılara uygulamanın tamamı | Geçici çözüm |
Statik üretim, hizmet sayfaları ve makaleler gibi seyrek değişen sayfalara uygundur. Sunucu taraflı render ise stok durumu gibi sık değişen ya da isteğe göre farklılaşan sayfalara uyar. Modern framework’lerin çoğu ikisini de destekler ve rota bazında karıştırmanıza izin verir. İstemci taraflı render, giriş gerektiren alanlarda sorun değildir ama bulunmasını istediğiniz her şey için risklidir. Tam bir yeniden yapılanma henüz mümkün değilse, kategori ve hizmet sayfaları gibi arama trafiği getiren şablonları sunucuda render edilen ya da statik HTML’e taşıyarak başlayın. Google dinamik render’ı uzun vadeli bir çözüm değil, geçici bir çözüm (workaround) olarak tanımlıyor: İki ayrı çıktıyı yönetirsiniz ve bunlar zamanla birbirinden uzaklaşabilir.
Hydration’ın da bir maliyeti var. Büyük bir JavaScript paketini göndermek ve çalıştırmak sayfaların yanıt vermesini yavaşlatabilir; bu da INP değerine yansır. Web tasarım ve geliştirme çalışmalarımızda kurduğumuz siteler eksiksiz HTML gönderir ve JavaScript’i her sayfanın ihtiyacıyla sınırlı tutar.
Googlebot’un ne gördüğünü nasıl test edersiniz?
- Search Console’da URL Denetimi. Taranan sayfayı görüntüle (View crawled page), Google’ın son taramada sakladığı HTML’i gösterir. Canlı test sayfayı şimdi çeker ve render eder; ekran görüntüsünü, sayfa kaynaklarını ve JavaScript konsol mesajlarını da sunar. Ana içeriğinizin, linklerinizin, canonical’ın ve meta robots etiketinin orada olduğunu kontrol edin. Boş ya da yarım kalmış bir ekran görüntüsü genellikle bir script’in hata verdiğini ya da bir kaynağın engellendiğini gösterir.
- Ham HTML ile render edilmiş DOM’u karşılaştırın. Kaynak kodunu (ya da bir
curlisteğinin sonucunu) tarayıcınızın geliştirici araçlarındaki DOM ile karşılaştırın. Yalnızca ikincisinde görünen her şey JavaScript’e bağlıdır. - İki kez tarayın. Tarama aracınızı önce JavaScript render’ı kapalı, sonra açık çalıştırın; şablon bazında kelime sayılarını, linkleri, title’ları ve canonical’ları karşılaştırın. Aradaki farklar, JavaScript’e olan bağımlılıklarınızdır.
Zengin Sonuçlar Testi de sayfaları render eder; yapılandırılmış veri JavaScript ile ekleniyorsa bu işinize yarar. Bir JavaScript framework’üne geçiyorsanız bunu bir site taşıma olarak ele alın: Trafik kaybetmeden site yenileme ve taşıma rehberimizdeki her şey bu durumda da geçerlidir.
Google’ın ötesi: Render etmeyen tarayıcılar
Google render eder. Diğer pek çok tarayıcı etmez. Log incelemelerimizde pek çok AI tarayıcısının HTML’i çektiğini ama bir tarayıcının isteyeceği JavaScript dosyalarını hiç istemediğini görüyoruz. İçeriğiniz yalnızca render sonrasında var oluyorsa bu sistemler onu hiç göremeyebilir. Bu da sunucuda render edilen HTML’i SEO kadar yapay zeka arama optimizasyonunun da bir parçası yapar.
Önemli içeriğiniz nerede durmalı?
Yalnızca JavaScript sonrası
- İstemci taraflı API çağrılarıyla yüklenen ana metin
- Tıklama işleyicileriyle kurulan navigasyon
- Script ile belirlenen canonical ya da noindex
- Yüklemeden sonra eklenen fiyat ve stok bilgisi
- Etiket yöneticisiyle eklenen yapılandırılmış veri
İlk HTML’de
- Başlıklar ve ana metin
- href içeren gerçek linkler
- Title, canonical ve meta robots
- Fiyatlar ve temel ürün bilgileri
- Ana varlık için JSON-LD
Bunların hiçbiri JavaScript ile kurulmuş bir sitenin sıralama alamayacağı anlamına gelmiyor. Önemli parçaların herhangi bir script çalışmadan önce yerinde olması gerektiği anlamına geliyor; böylece her tarayıcı aynı eksiksiz sayfayla işe başlar.
React, Vue ya da headless bir yapı mı kullanıyorsunuz? Teknik SEO ekibimiz, Googlebot’un ve diğer tarayıcıların gerçekte ne aldığını şablon şablon denetleyebilir.