JavaScript SEO arama motorlarının JavaScript ile oluşan içeriği ve linkleri tarayıp dizine ekleyebilmesini sağlayan teknik SEO çalışmasıdır. JavaScript sayfaya etkileşim, dinamik içerik ve uygulama benzeri davranış kazandıran programlama dilidir. SEO açısından sorun JavaScript'in kendisi değil, içeriğin ve linklerin yalnız JavaScript çalıştıktan sonra ortaya çıkmasıdır. Google JavaScript'i işleyebilir ama gecikmeyle işler. Önemli içeriği sunucudan gelen HTML'de vermek en güvenli yoldur.
Google JavaScript ile oluşan sayfaları nasıl işler?
Google JavaScript kullanan bir sayfayı üç aşamada işler: tarama, rendering ve dizine ekleme. Googlebot önce sunucudan gelen ham HTML'i alır. Sayfa JavaScript gerektiriyorsa rendering kuyruğuna girer. Google burada sayfayı güncel Chrome tabanlı bir tarayıcıda çalıştırır ve ortaya çıkan HTML'i dizine ekler.
Bu akışın iki pratik sonucu vardır. Google ham HTML'de olmayan içeriği ve linkleri daha geç görür. Rendering sırasında hata veren ya da zaman aşımına uğrayan bir script de içeriğin hiç görülmemesine yol açabilir. Google'ın JavaScript SEO temelleri dokümantasyonu bu süreci ayrıntılı anlatır.
Diğer arama motorlarının ve yapay zeka tarayıcılarının önemli bir kısmı JavaScript'i hiç çalıştırmaz. Bu botlar için yalnız tarayıcıda oluşan bir sayfa boş bir iskeletten ibarettir.
İstemci, sunucu ve statik rendering arasındaki fark nedir?
Üç rendering yöntemi arasındaki fark HTML'in nerede ve ne zaman üretildiğidir. Arama motoru açısından belirleyici olan içeriğin ilk yanıtta hazır gelip gelmediğidir.
- İstemci tarafı rendering (CSR). Sunucu boş bir iskelet gönderir, içeriği tarayıcı JavaScript ile oluşturur. Arama motoru içeriği ancak rendering sonrasında görür.
- Sunucu tarafı rendering (SSR). Sunucu her istekte hazır HTML üretir. İçerik ile linkler ilk yanıtta bulunur.
- Statik rendering (SSG). HTML derleme sırasında bir kez üretilir, dosya olarak sunulur. Sık değişmeyen sayfalar için uygundur.
SSR ile statik rendering kullanan sitelerde tarayıcı hazır HTML'e etkileşimi sonradan ekler. Etkileşimin eklendiği adıma hydration denir.
Dinamik içerikli sitelerde en sık görülen SEO hataları neler?
En sık hata içeriğin ya da linklerin yalnız bir kullanıcı eylemiyle yüklenmesidir. Googlebot butona tıklamaz, sayfayı kaydırmaz ve form doldurmaz. Teknik denetimlerde sık karşılaşılan altı durum şunlardır:
- Link yerine tıklama olayı: Menü ya da ürün kartları
<a href>yerine onclick ile çalışıyorsa Google o sayfaları link yoluyla keşfedemez. - Diyez içeren URL'ler: /#/urun gibi adreslerde diyezden sonraki kısım Google için ayrı bir sayfa değildir. Bir tarayıcı uygulama programlama arayüzü (API) olan History API ile gerçek URL'ler kullanılmalıdır.
- "Daha fazla yükle" butonu: Kategori sayfasında ürünler yalnız butonla geliyorsa Google ilk grubun ötesini göremeyebilir. Butonun yanında sayfalı ve linkli bir yapı sunulmalıdır.
- Robots.txt ile engellenen JavaScript dosyaları: Google sayfayı işlemek için bu dosyalara erişmek zorundadır.
- JavaScript ile değişen meta etiketler: Title, canonical ya da noindex etiketinin JavaScript ile değiştirilmesi güvenilir değildir. Ham HTML'de noindex varsa Google sayfayı işlemeden bırakabilir.
- Tek sayfa uygulamalarında hatalı durum kodu: Olmayan bir sayfa "bulunamadı" mesajı gösterip 200 kodu döndürürse soft 404 oluşur.
Sekme ve akordeon içindeki içerik gizlenmiş sayılır mı?
Hayır. Sayfanın HTML'inde bulunan, yalnız görsel olarak kapalı duran içerik gizlenmiş sayılmaz ve dizine eklenir. Mobil öncelikli dizine eklemede Google sekmedeki metni de normal içerik gibi değerlendirir. Sorun içeriğin ancak tıklamayla sunucudan çekilmesidir. Tıklamayla çekilen içerik HTML'de hiç yoktur. Kullanıcıdan saklanıp yalnız arama motoruna gösterilen metin ise ayrı bir konudur ve spam politikalarına girer.
Script ağırlığı sayfa hızını ve Core Web Vitals'ı nasıl etkiler?
Ağır JavaScript sayfanın hem geç açılmasına hem de etkileşimlere geç cevap vermesine yol açar. Ana içerik JavaScript ile oluşuyorsa Largest Contentful Paint (LCP) gecikir. Tarayıcının ana iş parçacığını uzun süre meşgul eden scriptler ise Interaction to Next Paint (INP) değerini kötüleştirir. Bu metriklerin eşik değerlerini Core Web Vitals üzerine yazdığımız yazıda anlattık.
Hızı iyileştirmenin başlıca dört yolu şunlardır:
- Scriptleri
deferya daasyncile yükleyin. Eskiden önerilen "script'i sayfanın en altına koy" yöntemi bugün defer ile daha temiz yapılır. - Kullanılmayan kodu kaldırın. Lighthouse'taki kullanılmayan JavaScript raporu nereden başlanacağını gösterir.
- Canlı destek, harita ya da video gibi ağır üçüncü taraf scriptleri kullanıcı etkileşimine kadar erteleyin.
- Etiket yöneticisindeki eski ve kullanılmayan etiketleri temizleyin. Pazarlama scriptleri çoğu sitede JavaScript yükünün büyük kısmını oluşturur.
Google'ın gördüğü içerik nasıl test edilir?
En güvenilir test Google'ın gördüğü HTML ile sizin gördüğünüz sayfayı karşılaştırmaktır. Search Console'daki URL denetleme aracında canlı testi çalıştırıp işlenmiş HTML'e bakın. Ana metin, başlıklar, iç linkler ve yapılandırılmış veri orada yoksa Google da görmüyordur.
Hızlı ön kontrol için tarayıcıda sayfa kaynağını açın ve ana metinden bir cümle arayın. Cümle kaynakta yoksa içerik JavaScript ile oluşuyordur. Screaming Frog gibi tarayıcılarda JavaScript rendering açık ve kapalı iki tarama yapıp farkı karşılaştırmak site genelindeki sorunu gösterir.
Sorun büyükse çözüm rendering yöntemini değiştirmektir. Sunucu tarafı ya da statik rendering en kalıcı yoldur. Botlara ayrı HTML veren geçici yöntemi ve Google'ın neden artık önermediğini dinamik rendering yazımızda ele aldık. JavaScript kararlarının tarama, dizine ekleme ve hızla birlikte nasıl planlanacağı teknik SEO yazımızda yer alıyor. Sitenizin işlenmiş HTML'inde eksik içerik görüyorsanız SEO danışmanlığı kapsamında yazılım ekibinize verilecek iş listesini birlikte çıkarabiliriz.