İçeriğe geç
Web Geliştirme

Progressive Web Apps (PWA) ve SEO: Kapsamlı Optimizasyon Rehberi

30 Ağustos 2026 Kerem Kırbıyık 3 dk okuma
Progressive Web Apps PWA Service Worker mimarisi ve mobil SEO optimizasyon şeması

Kullanıcılara yerel bir mobil uygulamanın (Native App) hızını, çevrimdışı çalışabilme yeteneğini ve anlık bildirim (Push Notification) özelliklerini standart bir web tarayıcısı üzerinden sunan web geliştirme standardına Progressive Web App (PWA - İlerici Web Uygulaması) adı verilir.

PWA teknolojisi mobil cihazlarda oturum sürelerini ve dönüşüm oranlarını katlasa da; Service Worker önbellekleme mimarisinin ve JavaScript render süreçlerinin yanlış kurgulanması, arama motorlarının sitenizin güncel içeriklerine ulaşmasını engelleyebilir.


1. PWA’nın 3 Temel Yapı Taşı ve SEO Kesişimi

[1. Web App Manifest (manifest.json)] ➔ İkonlar, Tema Rengi, Başlangıç URL'si (Start URL)
[2. Service Worker (service-worker.js)] ➔ Çevrimdışı Önbellekleme, Ağ İsteklerini Yakalama
[3. Güvenli HTTPS Protokolü]           ➔ Service Worker'ların Çalışması İçin %100 Zorunlu
PWA BileşeniİşleviSEO Riski / Avantajı
Service WorkerArka planda çalışıp API ve sayfa isteklerini yakalar.Risk: Botlara eski (stale) önbellek sürümü sunulması. Doğru strateji Network-First kurgulamaktır.
manifest.jsonUygulamanın ana ekrana eklenme ayarlarını tutar.Googlebot manifest dosyasını okuyarak mobil uygulama kalitesini doğrular.
App Shell MimarisiArayüz iskeletini anında yükleyip veriyi sonradan çeker.Botun iskelet arkasındaki asıl içeriği görebilmesi için SSR veya statik render gereklidir.

2. Service Worker Önbellekleme Stratejileri

Arama motoru botlarının her zaman en taze içeriği okuyabilmesi için doğru önbellekleme stratejisi seçilmelidir:

// service-worker.js - HTML Sayfaları İçin Network-First (Önce Ağ) Stratejisi
self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .then((networkResponse) => {
          // Ağdan taze yanıt gelirse önbelleğe kaydet ve sun
          return caches.open('html-cache').then((cache) => {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });
        })
        .catch(() => {
          // Kullanıcı çevrimdışıysa önbellekteki sayfayı veya offline.html sayfasını sun
          return caches.match(event.request).then((cachedResponse) => {
            return cachedResponse || caches.match('/offline.html');
          });
        })
    );
  }
});

3. PWA Projelerinde SEO İçin 4 Altın Kural

  1. Her Sayfaya Benzersiz ve Statik URL Verin: PWA içinde gezinirken URL’ler değişmeli (pushState); hiçbir zaman tek bir URL altında tüm sayfalar gizlenmemelidir.
  2. Canonical Etiketlerini Mutlak (Absolute) URL Olarak Tutun: PWA’nın start_url parametresine bağlı UTM etiketleri (/?utm_source=pwa) orijinal canonical adresini bozmamalıdır.
  3. Sunucu Tarafı Render (SSR) Kullanın: Sayfanın ilk HTML çıktısı sunucudan dolu gelmeli; botlar JavaScript çalıştırmadan tüm metin ve linkleri okuyabilmelidir.
  4. Googlebot Service Worker Çalıştırmaz: Googlebot Service Worker’ları bypass eder ve doğrudan sunucuya HTTP GET isteği yapar. Sunucunuzun botlara her zaman 200 OK yanıtı verdiğinden emin olun.

Sıkça Sorulan Sorular

PWA doğrudan bir Google sıralama faktörü müdür?

PWA rozeti tek başına sıralama faktörü değildir; ancak sağladığı ultra yüksek açılış hızı, sıfır zıplama ve mobil kullanılabilirlik Sayfa Deneyimi (Page Experience) sinyallerinde doğrudan avantaj sağlar.

PWA siteleri App Store veya Google Play’e yüklenebilir mi?

Evet. TWA (Trusted Web Activities) teknolojisi ile PWA uygulamanızı doğrudan Google Play Store’da yayınlayabilirsiniz.


Stratejik Sonuç

PWA, mobil web hızınızı en üst noktaya taşıyarak kullanıcılarınızı daimi müşterilere dönüştürür. Yeni nesil mobil web mimarileri için mobil uyumlu web geliştirme çözümlerimizi inceleyin.

İlgili Yazılar

  • Google Analytics 4 (GA4) ile Organik SEO Performansı Ölçümleme
  • Domain ve Hosting Almak: 2026 Domain Hosting Seçim Rehberi
  • Modern SEO: Yapay Zeka Arama, INP ve Varlıklar İçin Güncel Rehber
  • SEO Migration (Site Taşıma) Süreci Nasıl Yönetilir?
  • SEO’da SWOT Analizi Nasıl Yapılır? Stratejik Şablon

Daha kapsamlı destek için: SEO Danışmanlığı hizmetimize göz atın.

Bu yazı faydalı oldu mu?