Was ist eine PWA? Eine “Progressive Web App” ist, grob gesagt, eine verbesserte Website. Dank einer Reihe von Technologien kann sie anders als normale Websites, Funktionen von “richtigen”, mobilen Apps benutzen. Dadurch verbindet eine PWA die Funktionalitäten von Websites und von Apps in einer sicheren und simplen Umgebung.

Die Vorteile beider Seiten

Wie mobile Apps sind PWAs zuverlässig, können auch ohne eine Internetverbindung auskommen, können installiert werden (“zum Homebildschirm hinzufügen”) und sogar Push-Nachrichten senden.

Wie Websites zeigen sie immer den aktuellen Inhalt an, passen sich optisch an (responsive), sind auf Suchmaschinen auffindbar und können verlinkt werden.

Außerdem liegt die basis nicht nur auf Smartphones, sondern auf mehreren Geräten. Sie können auch auf Tablets oder seit neuestem auch via Chrome OS (Chrome 67+), Linux (Chrome 70+) und Windows (Chrome 70+) auf dem Desktop als “richtige” Programme installiert werden. Bald auch für Macs.

Genau aus diesen Gründen kombinieren PWAs nützliche Funktionalitäten und Vorteile, wodurch sie mobilen Apps überlegen sind in Reichweite, Werbung und Conversion. Man kann sie als Brücke zwischen mobilen Apps und Websites sehen.
Sie sind die Zukunft. Das glauben auch Google und Microsoft, weswegen sie gemeinsam ein eBook namens “Progressive Web Apps – The future of the Mobile Web” veröffentlicht haben. Einige Websites bieten PWAs oder PWA-ähnliche Features schon an. Seiten wie Alibaba, Hobbycraft, Lancome, FT und Starbucks. Noch mehr findet man in der PWA-Directory.

Hier zum Download

Hört sich doch ziemlich gut an oder?

Ja tut es. Es gibt aber einiges zu beachten, wenn man möchte, dass PWAs auf Suchmaschinen angezeigt werden und ranken können.

Als erstes ist es wichtig zu begreifen, dass PWAs auf jeden Fall viele nützliche Funktionen bieten, aber was Suchbarkeit angeht, sie normalen, responsiven Websites unterlegen sind, zumindest im Moment.

Tatsächlich können PWAs sogar eher mehr SEO Schwierigkeiten darstellen, da sie meistens auf JavaScript basieren. Wenn sie z.B. als Single Page Application geschrieben werden, verlassen sie sich auf JS um die verschiedenen Seiten und Infos anzuzeigen, statt wie normale Websites auf mehrere verschiedene HTML Seiten zu setzen. Hierzu ein kleiner Thread von John Mueller:

Eine übliche Vorgehensweise um PWAs zu erstellen ist Client-Side-Rendering (praktisch eine fast leere HTML Seite die mit JavaScript alle Inhalte und Funktionen baut). Diese Art von Seiten können von Google gerendert und indexiert werden, sind aber für SEO viel kniffliger als normale HTML Seiten. Das erlaubt zwar einen Kompromiss zwischen einfacher Entwicklung und schönen UIs, aber bedeutet gleichzeitig schwerere Handhabung von SEO.”

Quelle: SEO Engine Roundtable

Deswegen ist es kritisch, die Balance zwischen beiden Seiten zu finden.

Worauf man bei PWAs achten sollte

Um PWAs zu erstellen sollte man auf folgende grundlegende SEO Prinzipien setzen:

  • Jede einzelne Seite sollte für Bots und Crawler unabhängig verfügbar und durchsuchbar sein, eine eigene URL besitzen, die keine Fragment-Identifier benutzt.
  • Der Inhalt muss indexierbar sein, auch wenn Googles Web Rendering Service JavaScript Rendering unterstützt, bevorzugt Google normales HTML Rendering und stellt JS-Seiten hinten an, bis genügend Ressourcen vorhanden sind (zweifache Indexierung). Deswegen sollte so oft wie möglich Server Side Rendering (SSR) genutzt werden, vor allem bei wichtigen Inhalten.
  • Alle Seiten sollten einen canonical URL tag besitzen.
  • Wenn PWAs und non-canonical AMP kombiniert werden, sollte der der amphtml tag vorhanden sein.
  • Wenn Dynamic Serving genutzt wird, um verschiedene Designs anzuzeigen, sollte man auf Nummer sicher gehen und den gleichen Content für Bots und User anzeigen (Cloaking vermeiden).
  • Die ganze PWA sollte auf HTTPS laufen und HTTP mit 301 auf HTTPS weiterleiten. Daraus folgt natürlich auch, dass man gemischten Content verhindern soll.
  • Alle Seiten sollten schnell laden, was PWAs in verbindung mit AMP sehr gut hinkriegen (PWAMP). Google empfiehlt eine Wartezeit von unter zehn Sekunden für den ersten Besuch der Seite in einem 3G Netz. Je nach Test wartet der Googlebot auch nur bis zu fünf Sekunden um zu rendern und einen Snapshot zu machen, also ist es auch von Vorteil, diese Zeit zu übertreffen.

Validierung & Optimierung von PWAs

Für die Validierung von PWAs kann man Googles PWA Checkliste benutzen, die Google bereitstellt um

  • 1. eine Basis für PWAs zu bieten und
  • 2. ein (ideales) Beispiel zu zeigen

Die Basis für PWAs sind die o.g. Punkte und ein paar zusätzliche wie

  • Die PWA sollte auf allen Browsern funktionieren
  • Responsive für Mobil und Tablets sein
  • Alle URLs sollen offline laden können
  • Metadaten müssen vorhanden sein um “zum Startbildschirm hinzufügen” zu ermöglichen

Die meisten Punkte basieren auf den grundsätzlichen Funktionalitäten von PWAs und können mit dem Lighthouse Tool validiert werden. Einige Punkte müssen hier aber manuell überprüft werden, auch SEO-relevante wie z.B.:

  • Jede Seite eine eigene URL braucht
  • Die Seiten von Google indexierbar sind
  • Ggf. canonical URL genutzt wird
  • Die Seiten History API nutzen
  • Schema.org Metadaten sind da, falls angemessen
  • Social Metadaten sind da, falls angemessen

Deswegen heißt es, wenn man den Lighthouse Test bestanden hat, dass die PWA als eine gesehen werden kann, aber nicht unbedingt optimiert für Suchen ist. Deswegen sollte man diese entweder manuell prüfen oder SEO Tools nutzen (andere als Lighthouse).

Zum Beispiel nutzt Starbucks PWA Client-Side-Rendering (CSR), auf der Inhalte und Links nicht in der HTML Datei stehen. Wenn man JS deaktiviert sieht die Seite so aus:

Ziemlich leer.
Deswegen ist es wichtig, nicht nur die PWA Funktionalitäten zu validieren, sondern auch die Auswirkung auf die Durchsuchbarkeit, das Rendering, die Indexierbarkeit und Ranking zu prüfen.
Wie man sieht, wird die Starbucks PWA korrekt gerendert:

Um das Erstellen einer PWA zu erleichtern, bietet Google PWA-Indexierungsbeispiele mit einer Client-Side gerenderten Seite, einer Server-Side gerenderten Seite und einer Hybrid gerenderten Seite, die man für seine Tests auch nutzen kann (Hier auf GitHub).

Wie man sieht, bestehen beide Seiten den Lighthouse Test, aber beide leiten von HTTP nicht auf HTTPS weiter und die Server-Side gerenderte Seite funktioniert Offline nicht:

Und so sehen Sie aus mit JS aktiviert und JS deaktiviert:

Der Grund warum die Client-Side gerenderte Seite nicht gerendert werden konnte ist, dass die JS und CSS Dateien, mit der die Seite gerendert wird, nicht gefunden werden konnte.

Das liegt daran, dass sie über HTTP verlinkt wurden und, wie oben erwähnt, keine 301 Weiterleitung auf HTTPS besitzen.

Wenn man das ganze nochmal über HTTP aufruft, wird die Seite auch korrekt gerendert. Das ist sehr wichtig, da die Client-Side gerenderte Seite extrem stark Abhängig von den Ressourcen ist.

PWA Optimierung

Eine einfache Methode zum optimieren ist, die Seite einmal mit und ohne JS Rendering durchsuchen zu lassen mit hilfe von SEO Crawler wie Screaming Frog, Deepcrawl oder Sitebulb, die alle JS Rendering unterstützen. Beide Crawls dann analysieren, vor allem nach Unterschieden in wichtigem Inhalt und Navigation suchen.

Wenn man z.B. die JS gerenderte Seite von Starbucks von Sitebulb durchsuchen lässt, warnt der Crawler direkt vor fehlenden Links in der HTML Response, die aber auf der JS gerenderten da sind.

Es ist wichtig, diese Unterschiede zu analysieren und Lücken zu finden zwischen JS gerendert und HTML gerendert.

Man darf nicht vergessen das, wenn es auf beiden Seiten durchsuchbar und indexierbar ist, nicht gleich heißt, dass beide gleich gut ranken. Hier ein Blogeintrag von Christian dazu.

Deswegen soll man so oft wie möglich SSR nutzen und wenn das nicht möglich ist, eine Hybride Lösung versuchen, besonders, wenn es eine große Seite ist, die oft geupdatet wird.

Bereits erstellte Seiten in PWAs umwandeln

Man kann PWAs komplett neu schreiben, normale Web Apps zu PWAs umwandeln oder einfache Websites zu PWAs. Das bietet Google hier auch an.
Wenn man WordPress benutzt, gibt es dafür auch ein kostenloses Plugin namens SuperPWA. Dadurch kriegt die Seite die PWA Features und besteht den Lighthouse Test, was bedeutet, dass “Zum Startbildschirm hinzufügen” ermöglicht, was eine der nützlichsten Features ist.

Man kann auch canonical AMP Seiten mit einer PWA kombinieren um eine PWAMP zu erhalten (siehe hier wie).

Der einzige wirkliche Nachteil einer PWAMP ist die URL beim Hinzufügen auf den Startbildschirm. Hier wird der Link der AMP Seite genommen statt der eigenen, was aber hoffentlich bald gefixt wird.

Auch wenn das Umwandeln einer bereits existierenden Seite zur PWA nicht dieselbe Mobile-App Experience bietet wie eine PWA die von Anfang an so gebaut wurde, ist das gute, dass man so den ersten Schritt in Richtung PWA und deren Funktionalitäten macht und sich langsam herantastet. Gleichzeitig findet man evtl. noch Verbesserungen für die eigene Seite.

Bei der Auswahl eines Online-Marketing Beratungs- und Serviceunternehmens oder eines Performance Marketing Teams achten Sie zumindest auf diese Auszeichnungen:

PartnerBadge-Horizontal
Oplayo ist eine Top 100 SEO Agentur laut ibusiness

Oplayo ist nun auch ein autorisiertes Beratungsunternehmen für „Digitale Markterschließung“ und „Digitalisierte Geschäftsprozesse“