Search Engine Optimization (SEO) ist ein weit umfassendes Feld, über welches nahezu jeder Webentwickler einmal stolpert. Mit Angular können Webentwickler interaktive Webseiten entwickeln, die ohne ständiges Aktualisieren der Seite auskommen. Wer allerdings weiß wie eine Angular App funktioniert und wie Crawler von Suchmaschinen funktionieren, wird schnell feststellen, dass eine solche App zwar benutzerfreundlich, aber nicht gerade suchmaschinenfreundlich ist. Denn eine Angular App wird in der Regel auf Clientseite mit Hilfe von JavaScript gerendert. Die meisten Crawler fordern aber lediglich die Index.html an und bekommen bei einer Angular Single Page Application (SPA) nur eine leere HTML Seite geliefert.
Verständlicherweise kann ein Crawler mit dieser Antwort nur wenig anfangen.
Es gibt jedoch Möglichkeiten Angular Applikationen SEO freundlich zu entwickeln. Im Folgenden möchte ich einen kurzen Überblick über die wichtigsten Methoden geben und auf eine dieser Möglichkeiten am Beispiel unserer AIT Smart Edge Landingpage detaillierter eingehen.
Serverseitiges Rendern (SSR)
Bei dieser Methode wird bei jedem Request zunächst der JavaScript Code serverseitig ausgeführt, um die vollständige HTML Struktur zu erhalten. Dieses ausgefüllte HTML Dokument wird dann dem Client geliefert. Auf diese Weise können die statisch gelieferten Seiten von Crawlern gut erfasst und analysiert werden.
Prerendering
Wer kein SSR verwenden möchte oder bspw. gar kein separates Backend benötigt, kann auf Prerendering zurückgreifen. Beim Prerendering wird zur Buildzeit bereits statisches HTML und CSS erstellt, welches dann über einen eigenen statischen Server oder von einem CDN ausgeliefert wird. Aber keine Sorge, dynamische Interaktionen sind weiterhin über JavaScript möglich. Prerendering hat jedoch den Vorteil dass auf Serverseite bereits eine kompilierte Index.html liegt, welche mit dem initialen Inhalt ausgeliefert wird. Dynamische Inhalte, wie sich ändernde Datenbankeinträge, können dann immer noch vom JavaScript nachgeladen werden.
AIT Smart Edge
Mit unserer neuen AIT Smart Edge wollen wir natürlich auch möglichst viele Nutzer erreichen. Aus diesem Grund haben wir uns entschieden, neben vielen verschiedenen Dingen, wie das Optimieren von Grafiken, optimierte Meta-Tags, etc., auch ein Prerendering unserer Landingpage durchzuführen.
Dazu verwenden wir Scully, welches aktuell noch in der Beta ist. Mit Hilfe von Scully können wir unsere Landingpage, welche als Angular SPA gebaut ist, während des Buildvorgangs prerendern.
Über die Konfigurationsdatei können wir bestimmen welche Routen der SPA gerendert werden sollen. Diese Funktion nutzen wir bei der AIT Smart Edge Landingpage, um die vorhandenen Sprachen als statische Seiten zu bauen. So erhalten wir für jede Route bzw. Sprache eine Index.html auf Basis des JAM-Stacks, ohne extra Rendering auf Clientseite.
Wir liefern somit auf die erste Anfrage ein vollständiges HTML Dokument mit Inhalt. Um die Interaktivität einer SPA zu erhalten wird weiterhin JavaScript eingebunden. Wir haben also das Beste aus beiden Welten vereint.
Die Einrichtung war in drei Schritten erledigt. Mit dem Befehl „ng add @scullyio/init“ wird Scully für das Angular Projekt initialisiert und installiert. Anschließend musste die Konfigurationsdatei angepasst und ein weiterer NPM Befehl zur Ausführung von Scully während des Builds ergänzt werden.
Fazit
Mit Hilfe von Scully haben wir mit wenigen Schritten unsere Angular App der AIT Smart Edge Landingpage in eine SEO freundliche Anwendung verwandelt, welche in Zukunft auch hoch performant von einem CDN ausgeliefert werden kann.
Eine Analyse von Google Lighthouse bestätigt dieses Ergebnis, hier hat sich der SEO Score von 70 auf 90 verbessert.