Headerbild

eBizTalk - Berichten, Unterhalten, Weiterbilden

Ob Branchendiskurs, Fachartikel oder ein Blick hinter die Unternehmenskulissen: eBizTalk ist die Plattform, die uns auffordert, unsere Leser über Events und Projekte auf dem Laufenden zu halten. Und uns gegenseitig natürlich auch.

Angular-Prerendering

Veröffentlicht am 02.12.2020 von Alexander Müller , Angular , Frontend , SEO

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:

imgpsh_mobile_save


Ohne Prerendering:

6b913315-a73e-40ca-8242-79e4b756a6a5


Mit Prerendering:

ca28eee1-99b3-46fd-aea9-4b78540cd8cd

google_about_ebiz fb_about_ebiztwitter_about_ebizxing_about_ebiz