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 Browser-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

Messen Sie die Performance Ihrer PWA mit Google Lighthouse – dort sehen Sie auch den PWA-Score und konkrete Optimierungshinweise. Für grundlegende Fragen zu SPA und Rendering lesen Sie unseren Artikel über Single Page Applications und SEO. Auch der Vergleich zwischen Headless CMS und SEO kann bei der Technologie-Wahl helfen.