Özet: Progressive Web App (PWA), web sitelerine uygulama benzeri deneyim kazandıran bir teknoloji setidir. PWA'lar çevrimdışı çalışabilir, push bildirim gönderebilir ve ana ekrana eklenebilir. SEO açısından PWA'lar indekslenebilir ancak doğru yapılandırma kritiktir. SSR ile birleştirildiğinde hem kullanıcı deneyimi hem de arama performansı açısından üstün sonuçlar elde edilir.
PWA (Progressive Web App), web ve mobil uygulama dünyasını birleştiren modern bir yaklaşımdır. Kullanıcılar, bir uygulama mağazasından indirme yapmadan web tarayıcısı üzerinden uygulama kalitesinde bir deneyim yaşar. Ancak PWA'ların SEO ile ilişkisi, doğru anlaşılmadığında ciddi indeksleme sorunlarına yol açabilir.
PWA Nedir ve Temel Bileşenleri
Service Worker
Service worker, tarayıcı ile sunucu arasında çalışan bir JavaScript dosyasıdır. Ağ isteklerini yakalayabilir, önbellek yönetimi yapabilir ve çevrimdışı deneyim sağlayabilir.
// service-worker.js
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});Web App Manifest
Manifest dosyası, uygulamanın adı, ikonu, renk teması ve başlangıç URL'si gibi meta bilgilerini içerir:
{
"name": "VixSEO Dashboard",
"short_name": "VixSEO",
"start_url": "/",
"display": "standalone",
"theme_color": "#1a1a2e",
"background_color": "#ffffff",
"icons": [
{"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"},
{"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"}
]
}HTTPS
PWA'lar yalnızca HTTPS üzerinde çalışır. Bu, zaten SEO için de zorunlu olan bir gerekliliktir.
PWA ve SEO: Temel Zorluklar
Render Stratejisi
PWA'ların en büyük SEO zorluğu, içerik render stratejisidir. Tamamen istemci taraflı render (CSR) kullanan PWA'lar, JavaScript SEO sorunlarıyla karşılaşır.
- CSR (Client-Side Rendering): İçerik JavaScript ile oluşturulur. SEO açısından risklidir.
- SSR (Server-Side Rendering): İçerik sunucu tarafında oluşturulur. SEO açısından idealdir.
- SSG (Static Site Generation): İçerik derleme zamanında oluşturulur. SEO açısından mükemmeldir.
- Hibrit: Kritik sayfalar SSR, uygulama arayüzü CSR. En pratik yaklaşımdır.
App Shell Modeli
PWA'larda yaygın kullanılan app shell modeli, sabit uygulama kabuğunu önbelleğe alıp dinamik içeriği sonradan yükler. Bu model, SEO açısından dikkatli yapılandırılmalıdır çünkü Googlebot boş bir kabuk görebilir.
Çevrimdışı Sayfalar
Service worker, çevrimdışıyken özel bir sayfa gösterebilir. Bu sayfanın indekslenmesini önlemek için uygun önlemler alınmalıdır.
SEO Uyumlu PWA Geliştirme Rehberi
1. SSR veya SSG Kullanın
Next.js, Nuxt.js veya Angular Universal gibi çerçeveler hem PWA özelliklerini hem de SSR'ı birlikte sunar.
2. Temiz URL Yapısı
Hash tabanlı rotalar (#/sayfa) yerine history API tabanlı temiz URL'ler (/sayfa) kullanın. Hash URL'leri Googlebot tarafından farklı sayfalar olarak algılanmaz.
3. Meta Etiketlerini Sunucu Tarafında Oluşturun
Title, description ve canonical etiketleri JavaScript'e bağımlı olmamalıdır.
4. Manifest Dosyasını Doğru Yapılandırın
start_url sayfanızın indekslenebilir olduğundan emin olun. Manifest dosyasının doğru bağlandığını kontrol edin.
5. Service Worker Önbellekleme Stratejisi
- Cache First: Önce önbelleğe bak, yoksa ağdan getir. Statik kaynaklar için uygundur.
- Network First: Önce ağdan getir, başarısız olursa önbelleği kullan. Dinamik içerik için uygundur.
- Stale While Revalidate: Önbellekten hemen sun, arka planda güncelle. Denge sağlar.
6. Sitemap ve Robots.txt
PWA'lar da geleneksel web siteleri gibi sitemap ve robots.txt dosyalarına ihtiyaç duyar. Dinamik rotaları sitemap'e dahil etmeyi unutmayın.
PWA'nın SEO Avantajları
- Hız: Service worker önbelleklemesi sayesinde tekrar ziyaretlerde anında yükleme.
- Kullanıcı bağlılığı: Ana ekrana ekleme ve push bildirimler, tekrar ziyaret oranını artırır.
- Mobil deneyim: Uygulama kalitesinde mobil deneyim, kullanıcı metriklerini iyileştirir.
- HTTPS zorunluluğu: PWA'ların doğal HTTPS gereksinimi, SEO için de faydalıdır.
Sıkça Sorulan Sorular
PWA sıralama avantajı sağlar mı?
PWA olmak doğrudan sıralama faktörü değildir. Ancak PWA'nın sağladığı hız ve kullanıcı deneyimi iyileştirmeleri dolaylı olarak sıralamayı etkileyebilir.
Googlebot service worker'ı çalıştırır mı?
Hayır, Googlebot service worker'ları çalıştırmaz. Bu nedenle içerik sunucu tarafında erişilebilir olmalıdır.
PWA ve AMP birlikte kullanılabilir mi?
Evet, AMP sayfası ilk yükleme için, PWA ise sonraki gezinme için kullanılabilir. Ancak bu kombinasyon 2026'da nadiren gereklidir.
Sonuç
PWA, kullanıcı deneyimi ve performans açısından güçlü bir teknoloji setidir. SSR ile birleştirildiğinde SEO sorunları büyük ölçüde ortadan kalkar. VixSEO ile PWA sitenizin indeksleme durumunu ve performansını düzenli olarak izleyerek en iyi sonuçları elde edebilirsiniz.