Wie lassen sich Progressive Web Apps (PWA) besser mit SEO in Einklang bringen?

Wahrscheinlich haben Sie Bedenken, wie sich die Verwendung von PWA auf die Suchmaschinenoptimierung Ihrer Website auswirken könnte. Diese Sorge ist berechtigt. Doch ich hoffe, dass ich in diesem Artikel Ihre Bedenken bzgl. SEO in Progressive Web Apps zerstreuen kann.

Falls Sie den Blogbeitrag von Krzysiek und Antonio noch nicht gelesen haben, empfehle ich Ihnen die Lektüre wärmstens. Dort erfahren Sie, was eine Progressive Web App ist und ob es sich lohnt, sie in Ihrem Projekt einzusetzen.

Sind Progressive Web Apps schlecht für SEO?

Dies ist eine der ersten Fragen, die einem in den Sinn kommt, wenn man über den Einsatz von PWA nachdenkt. Diese Sorge stammt aus einer Zeit, in der Suchmaschinen noch kein JavaScript verarbeiten konnten. Zum Glück ist diese Zeit längst vorbei, und alle großen Suchmaschinen können mittlerweile JavaScript-Inhalte ohne Probleme darstellen, auch wenn das nicht ideal ist.

Denn viel Verwirrung stiftet die Art und Weise, wie die Suchmaschinen die PWA-Websites indizieren. Um dies besser zu verstehen, sollten wir uns ansehen, wie Google eine Website indiziert. Wenn der Googlebot eine Webseite crawlt, tut er dies in zwei Phasen. Zunächst wird der Inhalt aus der HTML-Quelle entnommen, ohne dass das JavaScript gerendert wird. Erst in der zweiten Phase wird das JavaScript gerendert. Wenn die Website nicht auf JavaScript angewiesen ist, um den Inhalt darzustellen, wird sie in der ersten Phase indiziert. Wenn die Website jedoch JavaScript benötigt, um ihren Inhalt zu rendern, kann es ein paar Tage oder Wochen dauern, bis sie in die zweite Phase gelangt, in der sie dann indiziert wird.

Für einige Websites kann die Indizierungszeit ein Problem sein. Doch zum Glück gibt es dafür Lösungen. Auf die Einzelheiten hier werde ich im Abschnitt „Content-Rendering" eingehen.

Werden PWA SEO verbessern?

Die einfache Antwort lautet: Nein, zumindest nicht unmittelbar. Die Erstellung von PWA verschafft Ihnen keinen Vorteil gegenüber herkömmlichen HTML-Websites. Für PWA und herkömmliche Websites gelten die gleichen Regeln. Wenn Sie sich jedoch an die Best Practices für PWA halten, können Sie eine Website mit einem sehr guten Benutzererlebnis erstellen, was wiederum der Suchmaschinenoptimierung zugutekommt. Eine gute Progressive Web App wendet standardmäßig einige der besten SEO-Praktiken an.

Diese Dinge machen PWA großartig

Google verfügt über eine Checkliste für Progressive Web Apps. Sie definiert die Funktionen, die jede PWA haben sollte.

Unter anderem sollten PWA über folgende Funktionen verfügen:

• Schnell laden und schnell bleiben
• In jedem Browser funktionieren
• Responsive sein
• HTTPS verwenden

Diese Grundsätze sind allerdings nicht auf PWA beschränkt. Jede Website sollte diese Checkliste befolgen, um sicherzustellen, dass sie im Bereich Suchmaschinenoptimierung an der Spitze bleibt. Wenn Sie eine PWA entwickeln, sollten Sie die oben genannten Attribute also unbedingt für Ihr Projekt beachten. Sobald Sie diese implementiert haben, können Sie sich mehr auf die Bereitstellung guter Inhalte, die korrekte Verwendung von HTML-Tags, Keywords und andere Schlüsselfaktoren konzentrieren, die Ihren Google-Rang beeinflussen.

Die Entwicklung von PWA bedeutet, dass Sie eine sehr gute Benutzererfahrung schaffen. Dadurch bleiben die Nutzer länger auf Ihrer Website und kommen häufiger zurück, was auch ein wichtiger Faktor für die Suchmaschinenoptimierung ist.

Content-Rendering

Der Inhalt ist eines der wichtigsten Elemente, wenn es um Suchmaschinenoptimierung geht. Ergebnisse, die relevant für das sind, wonach die Nutzer suchen, werden von Google höher eingestuft. Wenn es um Inhalte und den Aufbau einer Progressive Web App geht, ist es also entscheidend festzulegen, wie die Inhalte für Benutzer (und Bots) dargestellt werden sollen.

In diesem Abschnitt werden wir verschiedene Rendering-Ansätze untersuchen und schauen, wie sie sich auf die Indexierung auswirken (siehe Abschnitt „Sind PWA schlecht für SEO?").

Server-Side Rendering (SSR)

Beginnen wir mit dem serverseitigen Rendering, da es die häufigste Art des Renderings im Internet ist. In der Vergangenheit hatten Bots Probleme mit dem Crawlen von Websites, die mit JavaScript erstellt wurden. Deshalb war SSR die einzige Möglichkeit, indexiert zu werden. Obwohl dies nun nicht mehr der Fall ist, ist dies immer noch die bevorzugte Art der Bereitstellung von Inhalten.

Wie der Name schon sagt, wird bei SSR der Inhalt der Website auf den Servern selbst gerendert. Daher erhalten Sie bei jeder Anfrage eine vollständig gerenderte Seite – mit Text, Bildern usw. Das bedeutet, dass Nutzer und Suchmaschinen dieselbe Version der Website sehen. In der ersten Phase der Indizierung wird die Seite durch einen Bot indiziert.

Im Allgemeinen trägt SSR zu einem schnellen Laden bei, da ein Client nicht auf das Rendern des Inhalts durch JavaScript warten muss. Das Hosting größerer Seiten, die auf JavaScript angewiesen sind, kann jedoch ziemlich teuer sein. Für das Rendering in modernen JavaScript-Frameworks ist SSR auch nicht die Standardmethode. Zwar bieten die meisten Lösungen für serverseitiges Rendering an, aber einige Bibliotheken sind möglicherweise nicht damit kompatibel.

Client-Side Rendering (CSR)

CSR ist der Standard im Rendering für moderne JavaScript-Frameworks. Beim CSR wird der Inhalt direkt im Browser gerendert. Eine Website mit CSR hängt stark von der Fähigkeit des Client ab, JavaScript zu verarbeiten. Das Hosten von clientseitig gerenderten Anwendungen ist günstiger als SSR. Zudem ist die Navigation zwischen den Seiten oft schneller, weil die Nutzer nicht auf die Antwort des Servers warten müssen.

Das mag großartig erscheinen, aber hat auch ein paar Nachteile. Ein Nachteil ist, dass clientseitig gerenderte Seiten auf mobilen Geräten oder älteren Rechnern mit geringerer Rechenleistung langsamer sein können. Außerdem hat CSR auch Probleme im Bereich SEO. Echte Nutzer und Bots sehen nicht dieselbe Website. Deshalb dauert es länger, bis eine Website indiziert wird, da die Suchbots in der ersten Phase der Indizierung nur den statischen HTML-Code durchsuchen. Bei CSR-Seiten sehen sie in der ersten Phase dann jedoch nur eine leere Seite. In der zweiten Phase erst verarbeiten die Bots JavaScript, sodass dann der Inhalt korrekt angezeigt wird. Dies wird mehr Zeit in Anspruch nehmen – sogar Tage kann dies dauern. Für Websites mit Tausenden von Seiten kann dies ein echtes Problem darstellen.

Selbst wenn die Indizierungszeit im Fall Ihres Projekts keine Rolle spielen mag, sind die Seiten, die vollständig auf der Client-Seite gerendert werden, nicht perfekt für PWA. Eine Progressive Web App sollte in jedem Browser funktionieren, auch wenn JavaScript nicht aktiviert ist. Die Kernfunktionen sollten nur in HTML ausgeführt und mit JavaScript erweitert werden, damit Bots keine leeren Seiten sehen. Dies führt uns zur dritten Art der Darstellung...

Hybrid Rendering

Hybrides Rendering ist eine Lösung, die SSR und CSR miteinander kombiniert. Bei diesem Ansatz sehen sowohl Nutzer als auch Bots zunächst dieselbe Ansicht. Wenn sie also die Seite besuchen, sehen sie das statische HTML. Die Seite kann außerdem von den Bots problemlos indiziert werden und ist zudem sehr schnell. Bei normalen Nutzern übernimmt JavaScript nach dem ersten Rendering, sodass die Website für den Rest des Besuchs auf der Client-Seite gerendert wird.

Das hybride Rendering ist schnell beim Laden und fühlt sich auch für die Nutzer schnell an, wenn sie auf der Website surfen. Hybrides Rendering kombiniert also die Vorteile beider Methoden – SSR und CSR. Diese Lösung wird auch von Google empfohlen.

Sie hat allerdings auch ihre Nachteile. Ein Nachteil ist die Hydration. Ohne zu sehr ins Detail zu gehen – Hydration ist ein Prozess, der statisches HTML in eine dynamische Webseite verwandelt. Haben Sie schon einmal eine Seite besucht, die geladen scheint, aber nicht anklickbar ist? Das lag wahrscheinlich an der Hydration. Das bedeutet nicht, dass das hybride Rendering insgesamt schlecht ist, aber es erfordert ein wenig Arbeit und fortgeschrittene Hydratisierungstechniken, um es richtig umzusetzen.

Fazit

PWA und SEO ist ein komplexes Thema. Bei richtiger Implementierung ist PWA eine tolle Technologie, die viele Funktionen zur Verbesserung der Suchmaschinenoptimierung bietet. Je nachdem, für welche Rendering-Methode Sie sich entscheiden, wirkt sich diese auf die Indizierungsgeschwindigkeit aus. Die Rendering-Methode allein wird Ihnen jedoch keine Spitzenposition in Google verschaffen. Sie müssen immer noch ansprechende und interessante Inhalte erstellen, um Ihre Nutzer auf Ihrer Seite zu halten.

Ich hoffe, dieser Artikel hat Ihnen geholfen zu verstehen, wie sich die Erstellung einer Progressive Web App auf die Suchmaschinenoptimierung Ihrer Website auswirkt. Wenn Sie Fragen haben oder planen, eine PWA zu erstellen, hinterlassen Sie uns gern eine Nachricht.

• PWA