Angular SSR ve SEO: Botlar Sitenizi Nasıl Görür?

Single Page Application (SPA) mimarisi, kullanıcı deneyimi açısından harika olsa da arama motoru botları (SEO) için her zaman bir meydan okuma olmuştur. Modern JavaScript framework'leri içeriği istemci tarafında yüklediği için, botlar bazen boş bir sayfa ile karşılaşabiliyor. Angular'ın Server-Side Rendering (SSR) çözümü bu sorunu nasıl kökten çözüyor? Gelin detaylara bakalım.

1. SSR Nedir ve Neden Gereklidir?

SSR, sayfanın HTML içeriğinin sunucuda oluşturulup tarayıcıya tam render edilmiş halde gönderilmesidir. Bu sayede: - Hızlı İlk Boyama (FCP): Kullanıcı sayfaya girdiğinde beyaz ekran yerine hemen içeriği görür. - Taranabilirlik: Google, Bing ve sosyal medya botları (Open Graph) sayfa içeriğini kolayca okuyabilir.

2. Angular 17+ ve Hydration Süreci

Angular'ın yeni sürümleriyle gelen 'Non-destructive Hydration' özelliği, sunucuda render edilen DOM yapısının istemci tarafında tekrar yıkılıp yapılmasını engeller. Bu, sayfa geçişlerindeki 'titreme' (flicker) efektini ortadan kaldırır ve performansı artırır.

3. Dinamik Meta ve Başlık Yönetimi

Her blog yazısının kendine özel title, description ve keywords etiketlerine sahip olması gerekir. Angular'ın Meta ve Title servislerini kullanarak bunu dinamik hale getirebilirsiniz:

constructor(private title: Title, private meta: Meta) {}

ngOnInit() { this.title.setTitle(post.title); this.meta.updateTag({ name: 'description', content: post.summary }); } ```

4. SSR'da Yaygın Hatalar ve Çözümleri

SSR kullanırken en sık karşılaşılan hata window is not defined hatasıdır. Sunucu tarafında (Node.js) window, document veya localStorage gibi tarayıcıya özel nesneler bulunmaz.

Çözüm: isPlatformBrowser kontrolü kullanmak:

if (isPlatformBrowser(this.platformId)) {
  // Sadece tarayıcıda çalışacak kodlar
  const token = localStorage.getItem('token');
}

5. Google Search Console Üzerindeki Etkisi

SSR geçişi yaptıktan sonra Search Console üzerindeki 'URL Denetimi' aracını kullanarak sayfanızın botlar tarafından nasıl göründüğünü mutlaka test edin. Tam render edilmiş bir HTML görüyorsanız, SEO yolunda en büyük engeli aşmışsınız demektir.

Özet

Eğer bir blog veya e-ticaret sitesi yönetiyorsanız, Angular SSR bir seçenek değil zorunluluktur. Doğru yapılandırılmış bir SSR ile hem kullanıcılarınızı hem de arama motorlarını mutlu edebilirsiniz.

Render Stratejisini Sayfa Türüne Göre Seçin

Angular uygulamasının her rotasını aynı yöntemle sunmak gerekmez. Pazarlama sayfaları ve blog yazıları build sırasında prerender edilirse hızlı, cache'lenebilir HTML elde edilir. Kullanıcıya özel dashboard sayfaları SSR ile her istekte üretilebilir veya tamamen istemci tarafında kalabilir. Arama motoruna açık olmayan yönetim ekranını SSR yapmak altyapı maliyeti eklerken SEO değeri sağlamaz.

Botun JavaScript çalıştırabilmesi, yalnızca boş bir app-root göndermenin iyi olduğu anlamına gelmez. İlk HTML içinde sayfanın başlığı, ana metni, gerçek bağlantıları ve temel yapılandırılmış verisi bulunmalıdır. Kullanıcı ve bot aynı ana içeriği görmelidir; bot için farklı metin üretmek cloaking riskine girer.

Dinamik Meta Veriyi Doğru Üretme

Her yazı için benzersiz title, açıklama, canonical ve sosyal paylaşım etiketleri sunucu çıktısına yazılmalıdır. Canonical URL parametreleri, takip kodlarını ve gereksiz slash varyasyonlarını tek adreste birleştirir. Ancak canonical bir yönlendirme değildir; yinelenen alan adlarının sunucuda 301 ile asıl domaine taşınması gerekir.

Yapılandırılmış veri görünür içerikle uyuşmalıdır. BlogPosting içindeki yazar, yayın tarihi ve başlık sayfada da gösterilmelidir. Olmayan inceleme puanı veya yanlış güncelleme tarihi eklemek zengin sonuç kazanmak yerine güven kaybına yol açar. JSON-LD çıktısını Rich Results Test ile, gerçek HTML'i URL Inspection ile kontrol edin.

Hydration Hatalarının Tipik Nedenleri

Sunucu ve tarayıcı ilk render'da farklı DOM üretirse hydration uyarıları, titreşim veya çift istek oluşabilir. window, document, ekran genişliği ve rastgele değerler sunucuda aynı biçimde mevcut değildir. Tarayıcıya özel işlemleri platform kontrolü sonrasına bırakın. Tarih ve para formatında sunucu locale'i ile tarayıcı locale'inin farklı olması da metin uyuşmazlığı yaratabilir.

API verisini sunucuda alıp tarayıcı açılır açılmaz yeniden istemek yerine transfer cache kullanın. Böylece hem aynı isteği iki kez yapmaz hem de ilk etkileşim süresini iyileştirirsiniz. Kişisel veya yetkiye bağlı yanıtların ortak CDN cache'ine girmemesine özellikle dikkat edin.

Bot Gibi Test Etme Kontrol Listesi

• JavaScript kapalıyken kaynak HTML'de ana başlık ve içerik var mı?
• Menü bağlantıları gerçek href değerleri taşıyor mu?
• 404 rota gerçekten HTTP 404 mü, yoksa 200 dönen boş SPA sayfası mı?
• Canonical yalnızca tercih edilen HTTPS alan adını mı gösteriyor?
• robots.txt CSS, JavaScript veya render için gerekli API'yi engelliyor mu?
• Sitemap yalnızca 200 dönen, indekslenebilir canonical URL'leri mi içeriyor?
• Mobil görünümde içerik reklam veya sabit katman altında kalıyor mu?

Performans ve Cache

SSR sunucusunun yavaş olması arama ve kullanıcı deneyimini birlikte etkiler. Herkese aynı dönen sayfaları CDN'de cache'leyin, fakat iletişim veya oturum bilgisi taşıyan yanıtları ortak cache'e koymayın. HTML için kısa süreli cache ve stale-while-revalidate yaklaşımı trafik sıçramalarında origin yükünü azaltabilir. CSS ve hash'li JavaScript dosyaları uzun süre immutable cache alabilir.

Başarılı Angular SEO çalışması yalnızca meta etiketi eklemek değildir. Doğru HTTP durumu, erişilebilir gezinme, tutarlı canonical, içerik dolu ilk HTML ve ölçülmüş performans birlikte ele alındığında hem bot hem kullanıcı güvenilir bir sayfa görür.