Angular ile SEO Dostu Web Uygulamaları Nasıl Geliştirilir?

SSR ve Pre-rendering (SSG) Arasındaki Fark

Angular’da SEO optimizasyonunun temelinde iki yöntem bulunur: Server-Side Rendering (SSR) ve Pre-rendering (Statik Site Oluşturma – SSG).

SSR (Server-Side Rendering) dinamik sayfalar için idealdir. Her istekte sayfa sunucuda oluşturulur ve kullanıcıya tam HTML olarak gönderilir. Bu sayede arama motorları ve kullanıcılar aynı anda tüm içeriği görebilir. E-ticaret ürün sayfaları veya kullanıcıya özel paneller için uygundur.

Pre-rendering (SSG) ise daha statik sayfalar için kullanılır. Sayfalar build sırasında oluşturulur ve CDN üzerinden doğrudan servis edilir. Bu yöntem, açılış (landing) sayfaları, hakkımızda sayfaları veya blog yazıları gibi sık değişmeyen içerikler için idealdir.

Çoğu projede en iyi performans için her iki yöntemi birleştirmek gerekir: dinamik bölümler için SSR, statik sayfalar için pre-rendering.

Angular’da SSR Kurulumu

SSR, arama motorlarının JavaScript yerine doğrudan HTML’yi okumasını sağlayarak SEO’yu güçlendirir. Kurulumu oldukça basittir:

ng add @nguniversal/express-engine

Ardından package.json dosyasına şu scriptleri ekleyin:

"scripts": {
  "build:ssr": "ng build && ng run my-app:server",
  "serve:ssr": "node dist/my-app/server/main.js"
}

Sonrasında bu yapıyı Node uyumlu bir ortama (Firebase, Vercel, AWS vb.) dağıtabilirsiniz. Angular 17 ve sonrasında gelen hydration özelliği, sayfanın anında etkileşimli hale gelmesini sağlar.

Dinamik Meta Etiketleri

Angular’ın Meta ve Title servisleri sayesinde her sayfa için SEO etiketlerini dinamik olarak güncellemek mümkündür. Her bileşende manuel ekleme yapmak yerine, yönlendirme (routing) olaylarını dinleyerek meta etiketlerini otomatik değiştirebilirsiniz:

import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title, Meta } from '@angular/platform-browser';
import { filter, map, mergeMap } from 'rxjs/operators';

constructor(private router: Router, private route: ActivatedRoute, private title: Title, private meta: Meta) {}

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map(() => this.route),
    map(route => {
      while (route.firstChild) route = route.firstChild;
      return route;
    }),
    mergeMap(route => route.data)
  ).subscribe(data => {
    this.title.setTitle(data['title'] || 'Angular Uygulamam');
    this.meta.updateTag({ name: 'description', content: data['description'] || 'Angular SEO optimizasyonu örneği.' });
  });
}

Bu yöntem sayesinde her rota değişiminde başlık ve açıklama etiketleri otomatik güncellenir.

Canonical Link ve Çok Dilli Destek

Canonical etiketleri, arama motorlarının bir sayfanın asıl versiyonunu belirlemesine yardımcı olur ve kopya içerik sorunlarını önler.

import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

constructor(@Inject(DOCUMENT) private doc: Document) {}

addCanonical(url?: string) {
  const link: HTMLLinkElement = this.doc.createElement('link');
  link.setAttribute('rel', 'canonical');
  link.setAttribute('href', url ?? this.doc.URL);
  this.doc.head.appendChild(link);
}

Uygulamanız birden fazla dili destekliyorsa, her dil için <link rel="alternate" hreflang="..."> etiketlerini eklemeyi unutmayın.

Pre-render ile Hızlı Yüklenen Sayfalar

Statik içerikler için Angular’ın pre-render özelliğini kullanarak sayfaların anında yüklenmesini sağlayabilirsiniz:

ng run my-app:prerender

Bu komut, her rotanın HTML dosyalarını oluşturur ve CDN üzerinden doğrudan servis eder.

Angular SSR’de Dinamik Sitemap Oluşturma

Manuel sitemap hazırlamak yerine Angular Universal (Express) kullanarak dinamik olarak oluşturabilirsiniz. Özellikle sayfalarınız CMS, veritabanı veya API’den geliyorsa bu yöntem idealdir.

server.ts dosyanıza Angular Universal motorundan önce aşağıdaki endpoint’i ekleyin:

server.get('/sitemap.xml', async (req, res) => {
  const baseUrl = `${req.protocol}://${req.get('host')}`;

  const staticRoutes = [
    { path: '/', changefreq: 'daily', priority: 1.0 },
    { path: '/about', changefreq: 'monthly', priority: 0.5 },
    { path: '/contact', changefreq: 'monthly', priority: 0.5 }
  ];

  const posts = [
    { slug: 'angular-seo-rehberi', updatedAt: '2025-09-20' },
    { slug: 'universal-ssr-kilavuzu', updatedAt: '2025-10-01' }
  ];

  const dynamicRoutes = posts.map(p => ({
    path: `/blog/${p.slug}`,
    lastmod: p.updatedAt,
    changefreq: 'weekly',
    priority: 0.7
  }));

  const urls = [...staticRoutes, ...dynamicRoutes];
  const xml = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${urls.map(u => `<url><loc>${baseUrl}${u.path}</loc></url>`).join('\n')}\n</urlset>`;

  res.setHeader('Content-Type', 'application/xml');
  res.setHeader('Cache-Control', 'public, max-age=3600');
  res.send(xml);
});

Bu sayede /sitemap.xml isteği her çağrıldığında güncel verilerden oluşturulan bir XML döndürülür.

robots.txt dosyanıza şu satırı ekleyin:

Sitemap: https://alanadiniz.com/sitemap.xml

Performans ve Core Web Vitals

SEO başarısı için hız çok önemlidir. Angular’da performansı artırmak için:

• Lazy loading kullanın.

• HTTP cache ve gzip/Brotli sıkıştırmayı etkinleştirin.

• Angular CLI budget’larını kullanarak bundle boyutlarını izleyin.

• Lighthouse veya PageSpeed Insights ile düzenli test yapın.

• Görseller için ngOptimizedImage direktifini kullanarak LCP değerini iyileştirin.

Yapılandırılmış Veri (Schema Markup)

Schema kullanımı, sayfanızın arama sonuçlarında daha zengin biçimde görünmesini sağlar:

const schema = {
  '@context': 'https://schema.org',
  '@type': 'WebPage',
  'name': 'Angular SEO Uygulama Rehberi',
  'description': 'Angular geliştiricileri için SEO optimizasyon rehberi.'
};

const script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(schema);
document.head.appendChild(script);

Test Et ve Doğrula

Uygulamanız hazır olduğunda şu testleri yapmayı unutmayın:

• Google Search Console ile dizine eklenmeyi kontrol edin.

• Rich Results Test ile schema verilerini doğrulayın.

• Fetch as Google aracıyla HTML çıktısının doğru olduğunu kontrol edin.

Sonuç

Angular artık SEO dostu hale geldi. Dinamik sayfalar için SSR, statik içerikler için pre-rendering, dinamik meta etiketleri ve optimize edilmiş performans sayesinde uygulamanız yalnızca hızlı değil, aynı zamanda arama sonuçlarında da güçlü bir konuma sahip olur.

Kaynaklar

• Angular Universal: https://angular.dev/guide/universal

• Google Search Central: https://developers.google.com/search/docs

• Scully (Statik Site Üreticisi): https://scully.io

• PageSpeed Insights: https://pagespeed.web.dev

• Sitemap Generator CLI: https://www.npmjs.com/package/sitemap-generator-cli