eBizTalk - Berichten, Unterhalten, Weiterbilden

Wer ein SPA-Framework wie Angular zur Entwicklung einer Website nutzt, muss sich früher oder später über das Thema SEO Gedanken machen. Denn anders als bei serverseitigen Frameworks, wie ASP.NET Core, wird das Markup erst durch JavaScript auf dem Client generiert. Ohne zusätzliche Anstrengungen, findet die Suchmaschine also bei der Indizierung keine Inhalte.

Serverseitiges Rendering (SSR) wäre in diesem Fall die naheliegendste Option. Dabei wird das Markup beim Aufruf einer Seite schon auf dem Server bereitgestellt und dann an den Client zurückgeliefert. In meinem Fall sollte die Website allerdings möglichst kostengünstig in einem Azure Storage Account als statische Website gehostet und serverseitige Funktionalität verbrauchsbasiert durch Azure Functions abgebildet werden. Dadurch besteht beim Aufruf der Seite keine Möglichkeit serverseitigen Code auszuführen, weshalb ich eine andere Option in Erwägung ziehen musste – Prerendering beim Build. Dabei wird die SPA während des Builds in einer lokalen Webserver-Instanz ausgeführt, alle Routen aufgerufen und das gerenderte Markup als statische HTML-Seiten gespeichert. Die einzelnen Seiten sind dann entsprechend als physische Dateien mit den notwendigen Inhalten vorhanden.

Für das Prerendering habe ich das npm-Paket angular-prerender verwendet, das wiederum auf dem bekannten Paket angular-universal basiert. Das Ergebnis wird damit in zwei Schritten erreicht:

1. Installation des Pakets (npm install angular-prerender --save-dev)
2. Ausführung der Prerenderings (npx angular-prerender)

Nachdem ich das Ergebnis in den Container im Azure Storage Account kopiert habe, konnten die einzelnen Seiten einwandfrei indiziert und damit über eine Suchmaschine einfach gefunden werden.

Beispiel App:

Ohne Prerendering:

Mit Prerendering: