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.