PWA und SEO: Das müssen Onlinehändler beachten

Progressive Web Apps, kurz PWA, bieten Onlinehändlern zahlreiche Vorteile. Auch im Hinblick auf SEO kann die Einführung einer PWA gewinnbringend sein. Dabei gibt es allerdings einige technologische Fallstricke zu beachten. Denn: Suchmaschinen sind momentan noch nicht in der Lage, PWA richtig zu crawlen. 

Suchranking verbessern mit PWA?

Als eine Art Mischform zwischen responsiver Website und nativer App ermöglichen Progressive Web Apps eine einzigartige User Experience auf allen Endgeräten. Aufgrund der steigenden Anzahl mobiler Nutzer im E-Commerce gewinnen PWA deshalb immer mehr an Bedeutung. 

Google rechnet damit, dass sich Mobile Commerce zwischen 2019 und 2023 verdoppeln und letztendlich ¾ des gesamten E-Commerce-Umsatzes ausmachen wird. Mit der Einführung der sogenannten Core Web Vitals und dem Fokus auf Mobile-First Indexing wird das Unternehmen daher ab September 2020 jene Websites höher ranken, die mobilen Nutzern eine besonders gute User Experience bieten.

Dabei ist die Ladegeschwindigkeit der Faktor, der den größten Einfluss auf die mobile User Experience hat. Laut dieser dieser Google-Studie bedeutet das, dass Shopbetreiber bis zu 53 % ihrer Benutzer verlieren können, wenn das Laden der Website mehr als 3 Sekunden dauert. Mit einer PWA werden die Seitenladezeiten beschleunigt, was sich positiv aufs Google-Ranking auswirkt

Auch in anderen Punkten wird die Benutzerfreundlichkeit auf mobilen Endgeräten mithilfe einer PWA enorm verbessert: Durch das Look & Feel einer nativen App können Nutzer schneller und flüssiger mit der Website interagieren. Ein weiterer Vorteil ist die Offline-Verfügbarkeit – Mobile Nutzer können so auch bei keiner oder schwacher Verbindung auf den Onlineshop zugreifen.

JavaScript kann SEO negativ beeinflussen

Progressive Web Apps bieten also zahlreiche Vorteile und werden den E-Commerce der Zukunft maßgeblich mitgestalten. Es gibt allerdings ein Problem mit PWA und SEO: Die Suchmaschinen können PWA momentan noch nicht zuverlässig crawlen. Im Worst Case haben Online-Händler also eine perfekt auf mobile Endgeräte optimierte PWA-Lösung eingeführt – die jedoch nicht in den Suchrankings indiziert wird.

Der Grund dafür: Die meisten Progressive Web Apps werden auf Basis von JavaScript Frameworks wie Vue.JS und React.JS entwickelt. Aus Entwickler-Sicht bietet dies zahlreiche Vorteile, z.B. geringe Kosten durch Open Source, weniger Entwicklungsaufwand dank des sauberen, modularen Aufbaus sowie eine große Community dahinter.

Das Problem: Die Suchmaschinen-Crawler haben nur begrenzte Fähigkeiten, JavaScript in Websites richtig und vollständig auszulesen und zu verarbeiten. Hintergrund ist, dass das Rendern von JS sehr zeit- und kostenintensiv ist. Da JS-basierten Single Page Applications wie PWA kein statischer HTML-Code mehr zugrunde liegt, können Bots die Seiten – ohne sie vorher zu rendern – jedoch nicht crawlen. 

Zwar hat Google bereits auf der Entwicklerkonferenz I/O ‘18 angekündigt, dieses Problem bald zu lösen. Bis heute funktioniert das Crawlen, Rendern und Indizieren von JacaScript-Seiten jedoch nach wie vor nicht zuverlässig. 

Google empfiehlt Zwischenlösung: Dynamisches Rendering

Um mit einer JS-basierten PWA sicher im Suchranking gelistet zu werden, muss sichergestellt werden, dass der Googlecrawler und andere Bots eine gerenderte Version, d.h. eine vollständig generierte Seite erhalten.

Google empfiehlt daher eine Workaround-Lösung: das sogenannte dynamische Rendering. Dabei wird zwischen clientseitig gerenderten und vorgerenderten Inhalten für bestimmte User-Agents gewechselt. Konkret bedeutet das: Für Seitenbesucher wird das HTML für die Anzeige der Seite im Client gerendert (client-site rendering). Der Googlecrawler und andere Suchmaschinen-Bots hingegen erhalten vom Server das fertige HTML (server-side rendering). 

Beim Dynamic Rendering wird also das JavaScript der Website direkt auf dem Server ausgeführt. Der Server liefert dem Suchmaschinenbot anschließend das fertig HTML aus. Auf diese Weise werden den Suchmaschinen-Bots alle Inhalte und Links angezeigt, ohne die Seite rendern zu müssen – im Grunde wie bei einer herkömmlichen, statischen Website. 

Unsere Lösung: hubble commerce

Mit hubble commerce haben wir bei der digital.manufaktur unsere eigene PWA entwickelt. Das Thema SEO haben wir bei der Entwicklung von Grund auf berücksichtigt:

hubble basiert auf Nuxt.js. Das Framework benutzt im sogenannten ‘Universal Mode’ einen Node.js Server, der bei Anfrage einer Seite diese rendert und dann als statisches HTML ausliefert. Somit kann mit JavaScript entwickelt werden und die Suchmaschine bekommt ein statisches HTML, welches ohne Probleme gelesen und interpretiert werden kann.

Bei der Entwicklung ist allerdings darauf zu achten, dass dem Node.js Server serverseitig einige Ressourcen wie z.B. “window” nicht zur Verfügung stehen. Dies wird gerne für comfort features benutzt, bei denen Bildschirmbreite oder Positionen berechnet werden. Es müssen also Weichen eingebaut werden, diese Funktionen nur clientseitig (im Browser des Benutzers) auszuführen. 

Diese Funktionen sind aber ohnehin meistens nicht SEO-relevant. hubble legt großen Wert darauf, alle wichtigen und SEO-relevanten Informationen als statisches HTML auszuliefern, ohne dass darunter die Benutzerfreundlichkeit der Seite leidet.

Fazit

Dass PWA ein riesiges Potential im E-Commerce bieten, steht außer Frage. Im Hinblick auf JavaScript müssen SEO-Experten allerdings einige technologische Notwendigkeiten beachten. Damit Crawler die PWA-Inhalte einfach und zuverlässig verarbeiten können, müssen sie zunächst mithilfe des dynamischen Renderings in einen statischen HTML-Code umgewandelt werden. Erst dann spiegeln sich die Vorteile einer PWA auch im Suchranking wider.

Gängige dynamische Renderer sind u. a. Puppeteer, Rendertron und prerender.io.

Ann-Kathrin Hofmann

Unternehmenskommunikation

Mehr aus unserem Blog

Eignen sich Static-Site-Generatoren für E-Commerce?
29. Oktober 2020

Statische Websites bringen einige Vorteile mit sich – beispielsweise im Hinblick auf Performance und SEO. Doch eignen sie sich auch …

Mehr erfahren
Shop the Look: Der Onlineshop als Inspirationsquelle
28. April 2021

Bildlastige Social-Media-Plattformen wie Pinterest und Instagram erleben seit einigen Jahren einen massiven Hype, der auch für den E-Commerce eine wichtige …

Mehr erfahren
Agentur-News 09.2020: Fokus Nachhaltigkeit
25. September 2020

Passend zum globalen Klimastreik am 25.09. stand bei dmf der September unter dem Zeichen der Nachhaltigkeit. Das Internet gehört mit …

Mehr erfahren
Transaktionsmails: So nutzen Sie das unterschätzte E-Commerce-Tool richtig
7. Januar 2021

Transaktionsmails sind ein wichtiges E-Commerce-Instrument, das jedoch von vielen Unternehmen noch unterschätzt wird. Der große Vorteil: Die automatisierten E-Mails haben …

Mehr erfahren
Wie Sie die Performance Ihres Shopware-6-Shops mit 5 einfachen Tricks erhöhen
23. Dezember 2020

Die Performance ist ein entscheidender Erfolgsfaktor im E-Commerce: Laut einer Google-Studie zeigt bereits eine Beschleunigung der Seitenladezeit um 0,1 Sekunden …

Mehr erfahren
Wie eine gute User Experience Ihren Umsatz steigern kann
12. Januar 2021

Früher ging es im E-Commerce primär um eine gute Usability, also eine funktionale und technisch einwandfrei bedienbare Benutzeroberfläche. Erkenntnisse der …

Mehr erfahren
Bilder und Videos optimieren: Mehr Conversion und weniger CO2!
2. November 2020

Visuelle Darstellungen von Produkten sind elementar für die gesamte E-Commerce-Branche. Sie helfen dem Kunden dabei, eine Kaufentscheidung zu treffen und …

Mehr erfahren
dmf im HAZ-Interview: Lokales Onlineshopping
12. Oktober 2020

“Wie wird sich Hannovers Innenstadt durch den steigenden Einfluss des Onlinehandels verändern?” Diese Frage hat sich die Hannoversche Allgemeine Zeitung …

Mehr erfahren

Hallo, mein Name ist Anika Le.

Wenn Sie Fragen haben, melden Sie sich gerne bei uns.

+49 511 76 38 44 90 hallo@digitalmanufaktur.com

1