Progressive Web Apps (PWA) und Suchmaschinenoptimierung (SEO)

Progressive Web App (PWA) ist eine über das Internet bereitgestellte Anwendungssoftware. Es basiert auf Standard-Webtechnologien wie HTML, CSS, JavaScript usw. PWAs werden häufig verwendet, um die Konversionsrate und den Traffic der Website zu steigern. Ab 2021 werden PWAs (vollständig oder teilweise) von Google Chrome, Apple Safari, Firefox für Android und Microsoft Edge unterstützt.

Da es sich um eine relativ neue Entwicklung handelt, führt die PWA-Optimierung in den meisten Fällen immer noch zu positiven Ergebnissen und weist erstaunliche Statistiken auf. PWA Stats berichtet ständig über die Vorteile, die Dienste erzielen, die PWA implementiert haben.

Im Allgemeinen war laut dem TOP 30 PWAs-Bericht „die durchschnittliche Conversion-Rate für progressive Web-Apps 36 % höher als die für native mobile Apps“.

PWAs sind tolle Helfer im Online-Marketing. Deshalb sind sie in der SEO-Szene beliebt. Allerdings hat die PWA-SEO-Kombination genau wie React und SEO ihre Schwierigkeiten. In diesem Artikel beleuchten wir, wie PWAs mit SEO funktionieren.

Beispiele und Hauptvorteile von PWA

Jeder Webdienst kann eine PWA sein. Dafür gibt es drei Hauptvoraussetzungen:

1. Läuft unter HTTPS.
2. Enthält ein Web-App-Manifest.
3. Implementiert einen Servicemitarbeiter.

Der Hauptzweck von PWA besteht darin, jedem Benutzer überlegene Funktionalität bereitzustellen. Hier ist die Liste der wichtigsten Vorteile, die PWAs bieten:

1. PWA bringt buchstäblich jedem Unternehmen neue Möglichkeiten und Wachstum. Es kombiniert die besten App- und Web-Qualitäten, ist reaktionsschnell und funktioniert auf jedem Gerät und erfordert nicht unbedingt ein schnelles Netzwerk.
2. Die Transportschichtsicherheit macht es sicher.
3. Der Service Worker (ein spezielles Skript, das Ihr Browser im Hintergrund ausführt) ermöglicht die Arbeit von PWAs im Offline-Modus.

Schauen wir uns einige der besten Beispiele für die Einführung von PWA an:

Für Sie empfohlen: Die beliebtesten Frameworks zum Erstellen von Progressive Web Apps (PWAs).

1. Starbucks

Die PWA des Starbucks-Bestellsystems ist einfach und benutzerfreundlich. Es sieht genauso aus wie die native App, kann jedoch offline ausgeführt werden, wenn ein Benutzer das Menü durchsucht und Artikel in den Warenkorb legt. Der größte Vorteil einer solchen Lösung ist die Tatsache, dass PWA fast doppelt so klein ist wie die Standard-App von Starbucks. Dadurch konnte das Unternehmen die Zahl der Webnutzer deutlich steigern.

2. Pinterest

Nachdem festgestellt wurde, dass aufgrund der schlechten Leistung nur 1 % der mobilen Pinterest-Nutzer eine App herunterladen und sich anmelden, wurde die mobile App auf Basis der PWA-Technologie neu erstellt. Dadurch sind Indikatoren wie Zeitaufwand, Werbeeinnahmen und Kerninteraktionen um bis zu 40 % bis 60 % gestiegen.

3. Uber

Die Uber-Web-App wurde als PWA umgebaut, mit dem Ziel, einen schnellen Service in langsamen Netzwerken und auf alten Smartphones bereitzustellen, die nicht mit der nativen Uber-App kompatibel sind. Dadurch wird eine superleichte Kern-App in 2G-Netzwerken in etwa 3 Sekunden geladen.

Die Bedeutung von SEO

Bei SEO geht es darum, Ihre Website für Suchmaschinen (SEs) zu optimieren. Sein Hauptzweck besteht darin, das Ranking der Website in den Suchergebnissen zu verbessern und Besucher anzusprechen. Es basiert auf SE-Algorithmen und verwendet Schlüsselwörter, um Suchmaschinen dabei zu helfen, relevante Inhalte anzuzeigen und eine Zielgruppe auf die Websites zu locken. Auf diese Weise kann SEO den besten organischen Traffic auf Ihre Website bringen. Im Gegensatz zu direktem und bezahltem Traffic ist es in der Lage, die meisten Ihrer Besucher in Kunden zu verwandeln.

SEO für Progressive Web Apps: Was ist das Problem?

Trotz aller Vorteile, die PWA bietet, zögern viele Websitebesitzer immer noch, die Technologie zu implementieren. Dafür gibt es zwei Hauptgründe:

1. Die Angst, das bestehende System zu ändern, das bereits gut funktioniert.
2. Schlechtes Verständnis dafür, wie PWA mit SEO funktioniert.

Wie John Mueller (Analyst bei Google) feststellte, „haben PWAs derzeit keinen Vorteil in der Google-Suche.“

Viele PWAs werden mit JS-Frameworks erstellt, die nicht für ihre SEO-Freundlichkeit bekannt sind.

Im Gegensatz zu herkömmlichen HTML-basierten Websites stellen JavaScript-abhängige PWAs also eine Herausforderung für die Suchmaschinenoptimierung dar. Deshalb bieten sie hinsichtlich der Auffindbarkeit keine Vorteile. Entgegen der landläufigen Meinung bedeutet dies jedoch nicht, dass progressive Web-Apps nicht von Suchmaschinen indiziert werden können. Dafür muss man einfach unterschiedliche Techniken anwenden.

Serverseitiges Rendering und clientseitiges Rendering

Die meisten Websites verwenden Server-Side Rendering (SSR). Dies ist der einfachste Ansatz, bei dem die Seite serverseitig und nicht im Browser gerendert wird. Allerdings wird jedes Mal, wenn ein Benutzer die Seite anfordert, der gesamte HTML-Code geladen, was problematisch sein kann, wenn die Internetverbindung nicht stabil oder schnell genug ist.

JavaScript-basierte PWAs verwenden clientseitiges Rendering (CSR), bei dem der Inhalt im Browser des Clients gerendert wird. Es wird nicht jedes Mal eine vollständige HTML-Seite gesendet, wenn ein Benutzer die Seite anfordert. Die JavaScript-Datei zeigt nur den notwendigen Teil der Informationen der Seite im Browser des Clients an. Deshalb lädt die Seite auch bei schlechter Internetverbindung schneller.

Doch warum weigern sich viele Websitebesitzer immer noch, CSR zu nutzen? Das Problem ist der Google-Bot. Es kann den Inhalt der Website im Code lesen, der im HTML-Dokument vollständig sichtbar ist. CSR verlässt sich in diesem Fall vollständig auf die Fähigkeit einer Suchmaschine, JavaScript zu verarbeiten. Aus diesem Grund gibt es die Meinung, dass CSR-Apps nicht indiziert werden können. Tatsächlich ist Google jedoch von allen Suchmaschinen die beste bei der Verarbeitung von JavaScript.

Dennoch ist das Problem mit JavaScript und SEO damit noch nicht gelöst: Google räumt ein, dass die Verarbeitung von JS nicht perfekt sei. Das Crawlen einer JavaScript-basierten Seite nimmt nämlich mehr Zeit in Anspruch als das Crawlen einer HTML-Seite. Tatsächlich bedeutet dies, dass Sie länger warten müssen, bis JavaScript-Inhalte auf den Ergebnisseiten der Suchmaschine angezeigt werden.

All dies erschwert es Websitebesitzern, sowohl das Benutzererlebnis ihrer Besucher zu verbessern als auch ihre Inhalte für Suchmaschinen zu optimieren.

Wie implementieren Sie PWA, ohne Ihre Suchmaschinenoptimierung zu verlieren?

Vielleicht gefällt Ihnen: Magento PWA Studio: Das Progressive Web App Tool für Magento!

1. Wenden Sie dynamisches Rendering an

Das dynamische Rendering zeigt verschiedene Versionen von Inhalten für verschiedene Quellen an. Der Besucher erhält eine CSR-Version und der Crawler erhält eine serverseitig gerenderte Version. Dadurch kann die Indexierung von JavaScript-basierten Seiten durch den Google-Bot verbessert werden. Auf diese Weise bieten Sie Ihren Kunden die bequemste Benutzererfahrung, ohne die SEO der Website zu gefährden.

2. Kombinieren Sie SSR und CSR

Stellen Sie mithilfe des serverseitigen Renderings sicher, dass der Crawler die wichtigsten Teile des Inhalts sieht (die unbedingt an Suchmaschinen weitergeleitet werden müssen). Diese Informationen werden vom Crawler erfasst, sobald er die Seite entdeckt. Die restlichen Informationen werden in der zweiten Phase des Prozesses automatisch über clientseitiges Rendering verarbeitet.

3. Erstellen Sie Ihre PWA mit einem SEO-freundlichen JavaScript-Framework

Unsere tolle Empfehlung ist GatsbyJS. Es ist ziemlich einfach, mit diesem Framework eine PWA-Website zu erstellen (und die vorhandene Gatsby-Website in eine PWA umzuwandeln). Es rendert Ihre Website in einem Build-Schritt vor und sorgt so für eine brillante, verzögerungsfreie Leistung, selbst wenn die Internetverbindung langsam ist. Dadurch erhalten Ihre Besucher ein App-ähnliches Surferlebnis.

4. Greifen Sie auf gebrauchsfertige PWA-Lösungen zurück

Heutzutage sind PWAs erschwinglicher denn je. Wenn Sie also nicht viel Zeit und Ressourcen für die PWA-Entwicklung verschwenden möchten, können Sie einige gebrauchsfertige PWA-Lösungen verwenden, die nach SEO-Grundsätzen erstellt und gründlich getestet wurden, sodass Sie sich der Qualität sicher sein können des Codes.

5. PWA-Studio

PWA Studio wurde 2019 als Webtechnologiestandard veröffentlicht, der ein App-ähnliches Erlebnis bieten soll. Tatsächlich handelt es sich nicht gerade um eine gebrauchsfertige Lösung: Es handelt sich vielmehr um eine Sammlung von Tools und Funktionen für die PWA-Entwicklung. Diese Lösung ist ziemlich komplex und beeindruckend, erfordert jedoch zusätzliche Anpassungen.

6. ScandiPWA

ScandiPWA ist eine Open-Source-Lösung, basierend auf React und Redux. Es wurde mit dem Ziel entwickelt, Websites mit Geschwindigkeit und der Möglichkeit, offline zu arbeiten, zu verbessern. Außerdem wird es ständig aktualisiert, sodass Sie immer neue Funktionen erhalten.

7. Vue Storefront

Dies ist eine der ersten PWA-Lösungen, die auf dem Markt erhältlich sind. Eigentlich handelt es sich bei Vue Storefront um eine universelle Komplettlösung, die jedoch zusätzliche Wartungsressourcen erfordert.

Wie vermeidet man SEO-bezogene Fehler bei der PWA-Implementierung?

Um eine gut gestaltete PWA zu entwickeln, die Ihnen hilft, bei SEO zu gewinnen, indem sie eine verbesserte Benutzererfahrung bietet, sollten Sie:

1. Führen Sie ein SEO-Audit durch. Dies wird dazu beitragen, alle SEO-bezogenen Probleme zu erkennen und zu beheben.
2. Konsultieren Sie SEO-Spezialisten. Wenn Sie Ihre PWA beispielsweise mit React erstellen, sollten Ihre SEO-Spezialisten genau wissen, wie sie React und SEO kombinieren. Auf diese Weise vermeiden Sie die meisten möglichen Probleme, die nach der Implementierung auftreten können.
3. Halten Sie sich bei der Entwicklung von PWA an grundlegende SEO-Prinzipien. In dem von Google veröffentlichten Artikel zum Thema Progressive Web Apps SEO gibt das Unternehmen Tipps zum Aufbau indexierbarer PWAs. Einige von ihnen sind als solche:
   • Jede Seite sollte über eine bestimmte URL erreichbar sein. Dadurch wird jede Seite unabhängig gecrawlt.
   • Die Website sollte ein responsives Design haben und für mobile Geräte optimiert sein.
   • Verwenden Sie eine progressive Verbesserung. Dank dieser Strategie funktionieren PWAs auch auf alten Browsern gut.
   • Überprüfen Sie regelmäßig mithilfe der Google Search Console, wie Google Ihre Seite rendert. So wissen Sie immer, wann es Zeit ist, ein Upgrade durchzuführen oder etwas zu ändern.
   • Behalten Sie die Ladezeit der Seite im Auge. Google misst die Ladegeschwindigkeit jeder Seite. Wenn sich die Ladegeschwindigkeit Ihrer Seite verlangsamt, senkt Google den Rang.

Vielleicht gefällt Ihnen auch: React Native vs. Flutter vs. PWA: Battle of Trending Mobile App Frameworks.

Das Fazit

Die PWA-Optimierung bietet viele Möglichkeiten für das Online-Marketing und bringt den allermeisten Unternehmen Wachstum. Tatsächlich ist die beste SEO-Praxis, die PWA normalerweise anwendet, die benutzerfreundliche Oberfläche: Sie reagiert, ist strukturiert und wird schnell gerendert. Allerdings bieten PWAs immer noch keinen direkten SEO-Vorteil, und die SEO-bezogenen Probleme halten viele Händler davon ab, PWA auf ihren Websites zu implementieren. Deshalb ist es wichtig, vorsichtig zu sein und verschiedene Techniken wie dynamisches Rendering, die Kombination von SSR und CSR oder fertige PWA-Lösungen zu verwenden. Auch SEO-Spezialisten sollten Sie von Anfang an in den Prozess einbeziehen.

Wie Sie sehen, können Sie sowohl SEO als auch PWA nutzen, indem Sie sie erfolgreich kombinieren. Es ist auch zu beachten, dass es sich bei der PWA um eine junge, innovative Art von Software handelt, sodass mit Verbesserungen zu rechnen ist.

 Dieser Artikel wurde von Ivan Jones geschrieben. Ivan ist SEO-Spezialist bei Clockwise.Software mit mehr als 5 Jahren Erfahrung in der Branche. Er kennt die Nuancen, die ihm jahrelang geholfen haben, Websites an der Spitze der Google-Suchergebnisse zu halten. Da er ein begeisterter Lerner ist, ist er daran interessiert, neue Ansätze zu testen, die sich positiv auf die SEO-Ergebnisse auswirken können.