JavaScript SEO: SPA ve React Siteleri İçin Rehber

İstanbul merkezli bir moda markası, sitesini baştan sona React ile yeniden kodlatıyor. Tasarım harika, sayfa geçişleri anında oluyor, kullanıcılar memnun. Ama birkaç hafta sonra organik trafik beklenmedik biçimde düşüyor; Search Console'da yüzlerce sayfa "Taranmadı" ya da "Keşfedildi, şu anda indekslenmedi" olarak görünüyor. Bu tablo, JavaScript ağırlıklı sitelerde son derece sık karşılaşılan bir senaryodur ve kökeninde genellikle JavaScript SEO ilkelerinin gözden kaçırılması yatar.

Bu yazıda Google'ın JavaScript içeriğini nasıl işlediğini, CSR/SSR/SSG/prerendering yaklaşımları arasındaki farkı, SPA ve React tabanlı sitelerde en sık karşılaşılan indeksleme sorunlarını ve sitenizde bir JavaScript SEO problemi olup olmadığını nasıl test edeceğinizi anlatıyoruz.

Kısa tanım: JavaScript SEO, içeriği büyük ölçüde JavaScript ile oluşturan (React, Vue, Angular gibi çerçevelerle geliştirilmiş) sitelerin arama motorları tarafından doğru biçimde taranıp indekslenmesini sağlayan teknik uygulamaların bütünüdür. Amaç, kullanıcıların tarayıcıda gördüğü içeriğin Googlebot tarafından da aynı biçimde görülebilmesini garanti altına almaktır.

JavaScript SEO Nedir?

Geleneksel bir HTML sayfasında, sunucu tarayıcıya zaten tamamlanmış içeriği gönderir: başlık, metin, linkler — hepsi ilk yanıtta hazırdır. JavaScript ağırlıklı bir sitede, özellikle tek sayfa uygulama (SPA) mimarisiyle kurulmuş sitelerde durum farklıdır: sunucu genellikle neredeyse boş bir HTML iskeleti gönderir, gerçek içerik ise tarayıcıda JavaScript çalıştıktan sonra oluşturulur.

Bu fark kullanıcı için görünmezdir — sayfa tarayıcıda normal biçimde açılır. Ama arama motoru botları için ek bir adım anlamına gelir: botun içeriği görebilmesi için önce sayfayı render etmesi (JavaScript'i çalıştırıp DOM'u oluşturması) gerekir. JavaScript SEO çalışmalarının büyük kısmı, bu render adımının güvenilir ve hızlı biçimde tamamlanmasını sağlamaya odaklanır.

Google JavaScript İçeriğini Nasıl İşler?

Google'ın bir sayfayı nasıl bulup işlediğini genel hatlarıyla biliyorsunuz: tarama, indeksleme, sıralama. JavaScript ağırlıklı sitelerde bu sürece bir ara adım eklenir.

Tarama, Render Kuyruğu ve Gecikme

Googlebot önce sayfanın ham HTML'ini alır. İçerik JavaScript ile sonradan oluşturuluyorsa bu ilk HTML çoğu zaman neredeyse boştur. Google bu durumda sayfayı bir render kuyruğuna ekler; sayfa ayrı bir aşamada, güncel bir tarayıcı motoruyla render edilir ve gerçek içerik bu aşamada ortaya çıkar.

Bu iki aşamalı yapı, klasik HTML sayfalara kıyasla iki önemli fark yaratır: render adımı ek zaman alabilir (süre, sitenin genel önceliğine ve sunucu kaynaklarına bağlı olarak saniyelerden çok daha uzun aralıklara kadar değişebilir) ve render sürecinde bir hata oluşursa (script hatası, zaman aşımı, engellenen kaynak) içerik hiç görünmeyebilir. Statik HTML sayfalarda bu ek adım ve buna bağlı risk yoktur.

Neden Bu Kadar Önemli?

Bir sayfa render kuyruğunda beklerken, o sayfanın gerçek içeriği Google'ın indeksinde henüz yansımıyor demektir. Yayınladığınız yeni bir ürün sayfası ya da kampanya, render gecikmesi yüzünden günler boyunca "görünmez" kalabilir. Google indeksleme sürecini hızlandırma yöntemlerini ayrı bir yazımızda ele aldık; JavaScript ağırlıklı sitelerde bu yöntemlerin önemi daha da artar.

CSR, SSR, SSG ve Prerendering Farkları

JavaScript SEO'nun kalbinde, içeriğin nerede ve ne zaman oluşturulduğu sorusu yatar. Dört temel yaklaşım vardır.

Client-Side Rendering (CSR)

İçerik tamamen tarayıcıda, JavaScript çalıştıktan sonra oluşturulur. En hızlı geliştirme deneyimini sunar ama SEO açısından en kırılgan yaklaşımdır — botun içeriği görmesi tamamen render adımının başarısına bağlıdır.

Server-Side Rendering (SSR)

Sunucu, her istek geldiğinde sayfanın HTML'ini önceden oluşturup tarayıcıya (ve bota) hazır biçimde gönderir; JavaScript daha sonra sayfayı "canlandırır" (hydration). Bot ilk yanıtta zaten dolu bir HTML görür — bu, SEO açısından CSR'a göre çok daha güvenilirdir.

Static Site Generation (SSG)

Sayfalar derleme (build) aşamasında önceden HTML olarak üretilir ve sunucuda hazır bekler. İçerik sık değişmeyen sitelerde (kurumsal siteler, blog, dokümantasyon) hem en hızlı hem de SEO açısından en güvenilir seçeneklerden biridir.

Prerendering / Dinamik Render

Mevcut bir CSR uygulamasını baştan yazmadan, yalnızca bot isteklerinde önceden render edilmiş bir HTML sürümü sunma yaklaşımıdır. Genellikle geçici bir çözüm olarak, büyük bir yeniden yazım henüz mümkün olmadığında tercih edilir.

Hangi Yaklaşımı Seçmelisiniz?

Doğru yaklaşım sitenizin türüne göre değişir. İçerik sık güncellenen ve organik trafiğin büyük kısmını taşıyan bir e-ticaret veya haber sitesi için SSR genellikle en dengeli seçimdir. İçerik nadiren değişen bir kurumsal site veya dokümantasyon için SSG hem hız hem güvenilirlik açısından daha avantajlıdır. Mevcut bir CSR uygulamanız varsa ve kısa vadede baştan yazma imkânınız yoksa, prerendering geçici ama etkili bir köprü görevi görebilir; uzun vadede yine de SSR/SSG'ye geçişi planlamanızı öneririz.

JavaScript SEO'da Sık Karşılaşılan Sorunlar

• İçerik hiç görünmüyor. Render başarısız olduğunda Google, boş bir HTML kabuğunu indeksler; sayfa var ama içeriksiz görünür.
• Linkler botlar için güvenilir biçimde takip edilemiyor. İç linklerin gerçek bir <a href="..."> etiketi yerine yalnızca bir tıklama olayına (ör. bir buton veya div üzerinden) bağlı olması, Googlebot'un bu bağlantıları takip etmesini zorlaştırabilir.
• Title ve meta açıklama JavaScript ile sonradan enjekte ediliyor. İlk HTML'de bu etiketler boş ya da jenerikse, render gecikmesi durumunda yanlış ya da eksik başlıkla indekslenme riski oluşur.
• Sonsuz kaydırma (infinite scroll) içeriği bölüyor. Kullanıcı aşağı kaydırdıkça yüklenen içerik bot için genellikle görünmezdir; ilk yükte gelmeyen ürün veya makaleler indekse hiç girmeyebilir.
• Render performansı yavaşladığında kullanıcı deneyimi de bozulur. Ağır JavaScript yükü yalnızca botları değil gerçek kullanıcıları da etkiler ve genellikle Core Web Vitals skorlarını, özellikle etkileşim hızını, kötüleştirir.

Not: Google'ın JavaScript render etme kapasitesi yıllar içinde belirgin biçimde gelişti; "Google JavaScript'i hiç okuyamaz" günleri geride kaldı. Ama "okuyabiliyor" ile "her zaman güvenilir ve hızlı biçimde okuyor" aynı şey değildir — bu fark, JavaScript SEO çalışmalarının hâlâ neden gerekli olduğunu açıklar.

Sitenizde JavaScript SEO Sorunu Olup Olmadığını Nasıl Anlarsınız?

1. 1Search Console URL Denetleme aracını kullanın. "Taranan sayfa" görünümünde Google'ın render ettiği HTML'i görebilir, içeriğin gerçekten orada olup olmadığını kontrol edebilirsiniz.
2. 2JavaScript'i devre dışı bırakıp sayfayı görüntüleyin. Tarayıcınızda JavaScript'i geçici olarak kapatıp sayfayı yeniden yükleyin; kritik içerik ve navigasyon hâlâ görünüyorsa temel bir güvenlik ağınız var demektir.
3. 3Sayfa kaynağını (view-source) render edilen DOM ile karşılaştırın. Kaynak kodda görünmeyip yalnızca tarayıcı geliştirici araçlarındaki "Elements" panelinde görünen içerik, JavaScript ile sonradan enjekte edilmiş demektir.
4. 4`site:` araması ile başlığın doğru göründüğünü kontrol edin. İndekslenen başlık ve açıklama sitenizde gördüğünüzden farklıysa, render sürecinde bir sorun olduğuna işaret edebilir.

Çözüm Yolları: Adım Adım JavaScript SEO

1. 1Kritik iç linkleri gerçek `<a href="...">` etiketleriyle verin. Navigasyon ve önemli iç linkler, JavaScript olayına değil, standart HTML bağlantısına dayanmalı.
2. 2SEO açısından kritik sayfalarda SSR veya SSG değerlendirin. Özellikle ürün, kategori ve blog sayfaları gibi organik trafiğin büyük kısmını taşıyan sayfa tiplerinde bu yatırım genellikle karşılığını fazlasıyla verir.
3. 3Title ve meta açıklamayı sunucu tarafında render edin. Bu etiketlerin ilk HTML yanıtında zaten dolu gelmesini sağlayın; render gecikmesine bağımlı kalmasınlar.
4. 4Sonsuz kaydırmaya ek olarak sayfalanmış, bağlantı verilebilir URL'ler sunun. Böylece her ürün/makale grubu kendi indekslenebilir adresine sahip olur.
5. 5`robots.txt`'in CSS ve JavaScript dosyalarını engellemediğinden emin olun. Bot bu dosyalara erişemezse sayfayı doğru render edemez — bu, sık gözden kaçan ama kritik bir kontrol noktasıdır.
6. 6Yapılandırılmış veriyi (schema) mümkünse ilk HTML'de sunun. JavaScript ile geç enjekte edilen schema, render gecikmesine bağlı olarak bazen tespit edilemeyebilir.

Sunucu tarafında render edilmiş, botun ilk yanıtta doğrudan gördüğü bir <head> ve navigasyon bloğu şöyle görünmelidir:

<head>
  <title>Kadın Spor Ayakkabı Modelleri | Ornek Mağaza</title>
  <meta name="description" content="Kadın spor ayakkabı modelleri, uygun fiyat ve hızlı kargo.">
</head>
<body>
  <nav>
    <a href="/kategori/kadin-ayakkabi">Kadın Ayakkabı</a>
    <a href="/kategori/erkek-ayakkabi">Erkek Ayakkabı</a>
  </nav>
  ...
</body>

Bu adımların çoğu, sitenizin genel tarama ve indeksleme sağlığını iyileştiren daha geniş bir çalışmanın parçasıdır.

Sık Yapılan Hatalar

• Tüm siteyi CSR ile kurup SEO'yu sona bırakmak — sonradan SSR'a geçmek, baştan doğru kurmaktan çok daha maliyetlidir.
• Navigasyon menüsünü tamamen JavaScript'e bağımlı hâle getirmek.
• robots.txt içinde /js/ veya /assets/ gibi dizinleri yanlışlıkla engellemek.
• Render süresini hiç test etmeden "Google zaten JavaScript okuyor" varsayımıyla yayına almak.
• Yalnızca masaüstünde test yapıp mobil render'ı hiç kontrol etmemek — Google, sıralama değerlendirmesinde ağırlıklı olarak mobil sürümü esas alır.

Sıkça Sorulan Sorular

React veya Vue ile kurulmuş bir site SEO açısından kötü müdür?

Hayır, çerçevenin kendisi bir sorun değildir. Sorun, içeriğin nasıl render edildiğidir. Next.js, Nuxt gibi SSR/SSG destekli yapılarla kurulmuş bir React veya Vue sitesi, düzgün yapılandırıldığında klasik bir HTML site kadar güvenilir biçimde indekslenebilir.

SSR kullanmak şart mı?

Şart değil, ama SEO açısından kritik sayfalar (ürün, kategori, blog) için güçlü biçimde önerilir. Girişin arkasındaki panel gibi arama motorlarının hiç görmesi gerekmeyen bölümlerde CSR kullanmanın pratikte bir sakıncası yoktur. Kararı sayfa bazında verin: aynı sitede bazı bölümler SSR, bazıları CSR olabilir.

Google gerçekten JavaScript çalıştırabiliyor mu?

Evet, Google günümüzde güncel bir tarayıcı motoruyla sayfaları render edebiliyor. Ama bu süreç ek zaman ve kaynak gerektirir; garantili ya da anında değildir. Bu yüzden kritik içerik için render'a tamamen bağımlı kalmak riskli bir stratejidir.

Next.js veya Nuxt kullanmak SEO sorunlarını otomatik çözer mi?

Bu çerçeveler doğru araçları sunar ama otomatik garanti vermez. Hangi sayfaların SSR, hangilerinin statik (SSG) ya da istemci tarafında render edileceğine doğru karar vermek, hâlâ geliştirme ekibinin sorumluluğundadır.

Sonuç

JavaScript, modern web deneyimlerinin vazgeçilmez bir parçası; ama SEO açısından ekstra bir dikkat gerektirir. Kritik içeriğinizin ve linklerinizin render sürecine bağımlı kalmadan Google tarafından güvenilir biçimde görülebildiğinden emin olmak, JavaScript ağırlıklı bir sitede organik trafiğin önündeki en büyük riski ortadan kaldırır.

Sitenizin Google tarafından nasıl render edildiğini ve hangi sayfaların indekslemede sorun yaşadığını görmek isterseniz SeoPulse'un ücretsiz analizini deneyebilirsiniz; teknik taramamız JavaScript kaynaklı indeksleme sorunlarını da kapsar.