JavaScript SEO: React/SPA Sitelerde Google İçeriğinizi Neden Göremiyor?

React gibi JavaScript framework'leri ile oluşturulan Single-Page Application'lar (SPA), kullanıcı deneyiminde devrim yaratır. Sayfa geçişleri hızlıdır, etkileşimler kesintisizdir ve uygulama adeta bir masaüstü programı gibi çalışır. Ancak bu teknolojik harikanın bir karanlık yüzü vardır: Arama motorları, özellikle de Google, bu sitelerin içeriğini görmekte zorlanabilir. Harika bir SPA projesi, Google'da ikinci sayfaya düşebilir ve asla hak ettiği organik trafiği elde edemeyebilir.

Bu kapsamlı rehberde, React ve benzeri SPA'ların arama motorları tarafından neden zor indekslendiğini, Google'ın JavaScript'i nasıl işlediğini ve sitenizi Google'a tamamen görünür kılmak için uygulamanız gereken adımları anlatacağız.

SPA ve SEO: Neden Zorlu Bir İkili?

Bir SPA ile geleneksel bir web sitesi arasındaki temel fark, içeriğin nerede ve nasıl oluşturulduğudur. Geleneksel bir web sitesinde (örneğin, bir WordPress blogu), bir kullanıcı veya Googlebot bir sayfayı ziyaret ettiğinde, sunucu tüm HTML içeriğini hazır olarak gönderir. Tarayıcı bu içeriği alır ve doğrudan gösterir. Arama motorları bu modeli çok sever çünkü içerik anında ve kolayca okunabilir durumdadır.

Öte yandan, varsayılan bir React SPA'sı farklı çalışır. Bu mimari, İstemci Tarafı Render (Client-Side Rendering - CSR) olarak adlandırılır. Bir bot veya ziyaretçi sayfayı istediğinde, sunucu genellikle neredeyse boş bir HTML dosyası gönderir. Bu dosya, sadece bir

etiketi ve sitenin tüm JavaScript kodunun bulunduğu büyük bir dosyaya (bundle) bağlantı içerir.

Başka bir deyişle, ev misafirlerine boş bir daire gösterip, "Merhaba, mobilyaların hepsi şu kamyonda, birazdan gelecekler!" demek gibidir. Googlebot, boş HTML'i görür, içerik yoktur ve sayfayı indeksleyemez. Daha sonra JavaScript'i indirip çalıştırsa bile, bu süreç zaman alır ve hata riski taşır.

Google JavaScript'i Nasıl İşler?

Google, JavaScript'i Chromium'un güncel bir sürümünü kullanarak üç ana aşamada işler: Tarama (Crawling), Oluşturma (Rendering) ve Dizine Ekleme (Indexing).

• Tarama (Crawling): Googlebot, sitenizdeki URL'leri keşfeder ve robots.txt dosyasını kontrol ederek hangi sayfaları tarayabileceğine karar verir.
• Oluşturma (Rendering): Eğer sayfa JavaScript içeriyorsa, Googlebot, sayfanın tam halini görmek için bu JavaScript kodunu çalıştırmak üzere sayfayı bekletir. Bu, "oluşturma" (rendering) aşamasıdır. Google, tarama ve oluşturmayı ayrı kuyruklarda yönetir. Bu nedenle, bir sayfanın taranması ile gerçekten oluşturulup indekslenmesi arasında saatler hatta günler geçebilir.
• Dizine Ekleme (Indexing): Oluşturulan HTML içeriği, Google'ın devasa indeksine eklenir.

Bu süreçte yaşanan gecikmeler, yeni sayfaların indekslenmesini yavaşlatır. Hatalı veya optimize edilmemiş JavaScript, Googlebot'un sayfayı eksik veya boş olarak görmesine ve sayfanın hiç indekslenmemesine neden olabilir.

SPA'ların En Yaygın SEO Sorunları

• Boş veya Eksik HTML: Sayfa kaynağında içerik yerine sadece bir
  olması, Googlebot'un ilk bakışta içerik bulamamasına yol açar.
• Tarama ve Dizinleme Gecikmeleri: JavaScript'i oluşturmak (render etmek) zaman alır. Bu nedenle, yeni sayfalar veya güncellemeler Google'da geç görünür.
• Meta Veri (Title, Description) Eksikliği: Meta etiketler JavaScript ile ekleniyorsa, Googlebot bu etiketleri görmek için JavaScript'i çalıştırmak zorundadır. Bu, önemli bilgilerin geç veya hiç okunamamasına neden olabilir.
• Yönlendirme (Routing) Sorunları: Özellikle History API kullanılan SPA'larda, Googlebot'un sayfa URL'lerini doğru şekilde tarayamaması.
• Yavaş Sayfa Yüklenme Hızı: Büyük JavaScript bundle'ları, sayfanın ilk yüklenmesini (LCP - Largest Contentful Paint) yavaşlatır ve kullanıcı deneyimini bozar.

SPA'ları Arama Motorlarına Açmak: 5 Kritik Strateji

1. Sunucu Tarafı Render (Server-Side Rendering - SSR) veya Static Site Generation (SSG) Kullanın

JavaScript SEO sorunlarını çözmenin en etkili yolu, içeriği sunucuda oluşturmaktır. Next.js (React için) veya Nuxt.js (Vue.js için) gibi framework'ler, bu imkanı sunar.

• SSR (Server-Side Rendering): Her sayfa isteğinde, sunucu HTML'i dinamik olarak oluşturur ve gönderir. Googlebot doğrudan dolu bir HTML alır, içeriği anında görür.
• SSG (Static Site Generation): Sayfalar, build (derleme) aşamasında statik HTML dosyaları olarak oluşturulur. Bu, en hızlı ve en güvenli SEO yöntemidir. İçeriği sık değişmeyen siteler için idealdir.

2. Ön-Oluşturma (Prerendering) ve Dinamik Oluşturma (Dynamic Rendering) Kullanın

Mevcut bir CSR projesini SSR/SSG'ye çevirmek maliyetliyse, ön-oluşturma (prerendering) veya dinamik oluşturma (dynamic rendering) iyi birer alternatiftir.

• Prerendering: Sitenizi build aşamasında tarar ve her sayfanın statik HTML kopyasını oluşturur. Botlar, bu kopyayı görür. Özellikle içeriği sık değişmeyen siteler için iyi bir çözümdür.
• Dynamic Rendering: Renderer (örneğin, Rendertron, Prerender.io) kullanarak, botları (User-Agent'lerine göre) sayfanın JavaScript ile oluşturulmuş haline yönlendirirsiniz. Kullanıcılar normal SPA'yı görür, botlar ise statik HTML'i alır.

3. Hidrasyon (Hydration) Stratejinizi Optimize Edin

Hidrasyon, sunucuda oluşturulan statik HTML'in, istemcide (tarayıcıda) React tarafından devralınarak etkileşimli hale getirilmesi sürecidir. Hidrasyon uzun sürerse, sayfanın etkileşimli hale gelmesi gecikir ve INP (Interaction to Next Paint) değeriniz kötüleşir.

Progressive Hydration veya Selective Hydration gibi teknikler, hidrasyonu sayfa bölümlerine ayırarak performansı artırır.

4. JavaScript Bundle Boyutunu Küçültün

Büyük JavaScript dosyaları, hem sayfa hızını hem de Googlebot'un işleme süresini olumsuz etkiler.

• Code Splitting: Kodu, yalnızca ihtiyaç duyulduğunda yüklenen parçalara bölün.
• Lazy Loading: Yalnızca görüntü alanındaki (viewport) bileşenleri yükleyin.
• Gereksiz Bağımlılıkları Kaldırın: Kullanmadığınız kütüphaneleri bundle'dan çıkarın.
• Minifikasyon ve Sıkıştırma: Kodları küçültün (minify) ve Gzip/Brotli ile sıkıştırın.

5. Google Search Console ile İzleme Yapın

Google Search Console (GSC), SPA sitenizin Google tarafından nasıl görüldüğünü anlamak için en değerli araçtır.

• "URL Denetleme" Aracı: Bir sayfanın Google tarafından nasıl oluşturulduğunu (rendered) gösterir. "Canlı URL'yi Test Et" ve "Oluşturulan Sayfayı Görüntüle" seçenekleriyle, Googlebot'un sayfanızda ne gördüğünü birebir kontrol edebilirsiniz. Eğer içeriğiniz burada görünmüyorsa, Google da görmüyordur.

SPA SEO Kontrol Listesi

• [ ] Next.js (SSR/SSG) veya benzeri bir framework'e geçiş yapın veya Dynamic Rendering kurun.
• [ ] Google Search Console "URL Denetleme" aracıyla kritik sayfalarınızı test edin.
• [ ] JavaScript bundle boyutunu analiz edin ve optimize edin.
• [ ] Tüm meta etiketlerin (title, description) HTML'de doğru şekilde oluşturulduğundan emin olun.
• [ ] Hidrasyon performansınızı kontrol edin ve gerekirse iyileştirin.
• [ ] Robots.txt dosyasında JavaScript dosyalarının engellenmediğinden emin olun.

Sonuç: SPA'nızı Google'a Açın

React ve diğer SPA framework'leri, kullanıcı deneyiminde harika işler başarır. Ancak, SEO'yu en baştan bir öncelik olarak ele almak gerekir. Next.js gibi SSR destekleyen framework'lerle geliştirme yapmak, JavaScript SEO sorunlarını en baştan çözmek anlamına gelir.

Eğer mevcut bir SPA projeniz varsa, Google Search Console'daki "URL Denetleme" aracını açarak sitenizin hangi sayfalarını Google'ın doğru gördüğünü kontrol edin. Sayfanızı test ettiğinizde, "Oluşturulan Sayfa"da boş veya eksik içerik görüyorsanız, içeriğiniz arama sonuçlarında da görünmüyordur. Bu rehberdeki stratejileri uygulayarak, SPA sitenizi arama motorlarına açabilir ve organik trafik elde etmeye başlayabilirsiniz.

SPA sitenizin JavaScript SEO sorunlarını çözmek ve Google'da tam görünürlük kazanmak mı istiyorsunuz? UlexFlow Inc olarak, dijital büyüme sistemleri alanında uzmanlaşmış bir stüdyoyuz. Teknik SEO denetimleri yapıyor, JavaScript framework'leri için özel optimizasyon stratejileri geliştiriyor ve sitenizin arama motorları tarafından doğru şekilde indekslenmesini sağlıyoruz. Size özel bir büyüme analizi planlamak için ücretsiz strateji görüşmesi talep edin.