Progressive Web Apps und SEO: Was Sie wissen müssen

Progressive Web Apps (PWAs) sind Websites die sich wie native Apps verhalten – offline funktionieren, installiert werden können und Push-Benachrichtigungen senden können. Für SEO ergeben sich sowohl Chancen als auch Risiken. Dieser Artikel fasst zusammen, was Sie über PWAs und ihre SEO-Auswirkungen wissen müssen.

Was ist eine Progressive Web App?

Eine PWA ist eine normale Website mit zusätzlichen Technologien:

Service Worker: JavaScript das im Hintergrund läuft und Netzwerkanfragen abfängt. Ermöglicht Offline-Funktion und schnelles Laden durch Caching.

Web App Manifest: JSON-Datei die beschreibt wie die App installiert werden soll (Icon, Name, Startscreen, Farbschema).

HTTPS: Pflicht für alle PWA-Features.

Technisch gesehen ist eine PWA immer noch eine normale Website – Googlebot crawlt sie wie jede andere Website. Das ist der entscheidende Unterschied zu nativen Apps die Google nicht direkt crawlen kann.

Im Gegensatz zu nativen Apps werden PWA-Inhalte von Google vollständig indexiert – ohne separate App-Store-Optimierung. Das macht PWAs für SEO-getriebene Projekte besonders attraktiv.

SEO-Vorteile von PWAs

Verbesserte Core Web Vitals: Service-Worker-Caching ermöglicht extrem schnelle Ladezeiten bei Wiederkehrern. Nach dem ersten Besuch werden Ressourcen aus dem Cache geladen – was LCP und FCP dramatisch verbessert.

Bessere Mobile UX: PWA-Features (Vollbild-Modus, keine Browser-Adressleiste) verbessern die mobile Nutzererfahrung. Längere Sitzungsdauer und niedrigere Absprungrate sind indirekte SEO-Signale.

App-ähnliche Interaktivität: Smooth Page-Transitions und reaktive UI führen zu besseren Engagement-Metriken.

SEO-Risiken und Fallstricke

Shell-Architektur und CSR: Viele PWAs nutzen eine App-Shell-Architektur mit Client-Side-Rendering. Das bedeutet: Googlebot sieht beim ersten Crawl möglicherweise eine leere Shell, nicht den Inhalt.

Lösung SSR: SSR (Server-Side Rendering) oder Prerendering für SEO-relevante Seiten. Gatsby, Next.js und Nuxt.js unterstützen PWA-Features + SSR/SSG kombiniert.

Infinite Scroll ohne Pagination: Wenn Inhalte durch Scrollen nachgeladen werden (Infinite Scroll), können tiefere Inhalte für Googlebot unzugänglich sein.

Lösung Pagination: Pagination mit eindeutigen URLs implementieren (?page=2) oder Inhalte in statischem HTML bereitstellen.

Web App Manifest und SEO

Das Web App Manifest hat keinen direkten Einfluss auf Rankings, aber es signalisiert Google eine hochwertige Website:

{
  "name": "Meine Firma",
  "short_name": "Firma",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#FF6004",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Service Worker: Caching-Strategien für SEO

Verschiedene Caching-Strategien für unterschiedliche Ressourcentypen:

Network-First (für HTML-Seiten): Immer zuerst vom Server laden – Aktualität für Googlebot und Nutzer gewährleistet. Cache als Fallback bei Offline.

Cache-First (für statische Assets): CSS, JavaScript, Bilder aus dem Cache laden – maximal schnell für Wiederkehrsbesucher.

Stale-While-Revalidate (für API-Daten): Cachedaten sofort anzeigen, gleichzeitig neuen Fetch starten. Gute Balance zwischen Speed und Aktualität.

PWAs mit korrekter Service-Worker-Implementierung erzielen bei Google PageSpeed Insights für wiederkehrende Besucher LCP-Werte unter 1 Sekunde – während der Erstbesuch identisch zu einer normalen Website ist.

PWA für welche Projekte sinnvoll?

Sinnvoll:

• E-Commerce mit häufigen Wiederkehrbesuchen
• News-Portale und Blogs
• Buchungsportale und Reservierungssysteme
• B2C-Dienste mit App-ähnlicher Nutzung

Weniger sinnvoll:

• Einfache Unternehmenswebsites
• Landing Pages ohne Interaktivität
• Websites mit sehr seltenen Wiederkehrbesuchern

Für grundlegende Fragen zu SPA und Rendering lesen Sie unseren Artikel über Single Page Applications und SEO.