Angular & SEO – Angular 6 Single-Page-Web-Apps suchmaschinenfreundlich machen

BY admin
|

Im folgenden Tutorial schauen wir uns den einfachsten Ansatz an, den es gibt, um diese Einschränkung für die eigene Angular 6-Anwendung durch serverseitiges Rendering mit Angular Universal loszuwerden.

Um loszulegen, richten wir in den folgenden Schritten zunächst eine neue Angular-Anwendung ein.

Um eine neue Angular-Anwendung einzurichten, verwenden wir Angular CLI. Um Angular CLI auf Ihrem System zu installieren, verwenden Sie den Node.js Package Manager auf folgende Weise auf der Kommandozeile:

$ npm install -g @angular/cli

Nach der erfolgreichen Installation von Angular CLI ist es möglich, mit dem neuen Befehl ng ein neues Angular-Projekt von Grund auf einzurichten:

$ ng new ngseo --routing

Mit der Option new sagen wir, dass ein neues Angular-Projekt erstellt werden soll, ngseo ist der Name des neuen Projekts und mit der Option – routing stellen wir sicher, dass dem Projekt auch eine grundlegende Routing-Konfiguration hinzugefügt wird.

Nachdem das Projekt erfolgreich eingerichtet wurde, können wir in den neu erstellten Projektordner wechseln:

$ cd ngseo

Und den Entwicklungs-Webserver wieder mit Angular CLI wie folgt starten:

$ ng serve -o

Sie sollten nun folgendes Ergebnis im Browser sehen können:

Wie Crawler Single-Page-Web-Apps sehen

Nun, da wir eine laufende Angular-Anwendung haben, wollen wir untersuchen, wie Crawler von Suchmaschinen unsere Website sehen. Wir bekommen einen guten Eindruck, wenn wir das Kommandozeilentool curl verwenden, um auf unsere Website zuzugreifen:

$ curl localhost:4200

Das Ergebnis, das Sie zurückbekommen, sollte ähnlich wie das folgende aussehen:

Hier sehen Sie, dass der Hauptinhalt der Website nicht in diesem HTML-Dokument enthalten ist. Stattdessen finden Sie das Platzhalterelement <app-root> innerhalb des body-Abschnitts. Dies ist sehr Angular fügt den Inhalt der Website ein, wenn der JavaScript-Code der Seite ausgeführt wird. Allerdings ist der Crawler nicht in der Lage, diesen Inhalt zu sehen, weil der JavaScript-Code nicht ausgeführt wird.

Angular Universal For Server-Side Rendering

Was könnte also eine Lösung für dieses Problem sein? Ja, das ist das serverseitige Rendering (SSR). Beim serverseitigen Rendering wird der JavaScript-Code der Angular-Anwendung bereits auf dem Server ausgeführt und die komplette HTML-Struktur und der Inhalt stehen auch Webcrawlern zur Verfügung.

Die Technologie, die das serverseitige Rendering für Angular-Anwendungen ermöglicht, heißt Angular Universal. Angular Universal generiert statische Anwendungsseiten auf dem Server durch einen Prozess, der als serverseitiges Rendering bezeichnet wird.

Eine detaillierte Beschreibung der Verwendung von Angular Universal ist unter https://angular.io/guide/universal verfügbar. Es gibt jedoch einen anderen Ansatz, der das Hinzufügen von Angular Universal sehr einfach macht: die Verwendung des Pakets @ng-toolkit/universal.

Adding Angular Universal With @ng-toolkit/universal To Make Your Angular Application Search-Engine Friendly

Das Paket @ng-toolkit/universal wird unserem Projekt mit dem ng-Befehl wie folgt hinzugefügt:

$ ng add @ng-toolkit/universal

Nach dem Hinzufügen des Pakets öffnet man die package.json und stellt sicher, dass das Paket webpack-cli im Abschnitt dependencies mit mindestens Version 3 aufgeführt ist.1:

"webpack-cli": "^3.1.0"

Wenn das nicht der Fall ist, ändern Sie diesen Eintrag entsprechend und führen Sie den folgenden Befehl aus:

$ npm install

Als nächstes führen Sie statt ng serve -o aus:

$ npm run build:prod

und

$ npm run server

Der Server wird auf localhost:8080 gestartet und wenn man diese URL im Browser aufruft, sollte man wieder die Website der Standard-Angular-Anwendung sehen können.

Lassen Sie uns versuchen, wieder über curl auf die Website zuzugreifen:

$ curl localhost:8080

Die Ausgabe sollte nun so aussehen, wie im folgenden Screenshot zu sehen ist:

Dieses Mal ist der komplette Inhalt der HTML-Seite enthalten. Der Grund dafür ist, dass die HTML-Seite als Teil des Erstellungsprozesses (serverseitig) gerendert wurde und nun ohne die Notwendigkeit, JavaScript-Code clientseitig auszuführen, verfügbar ist. So ist ein Crawler einer Suchmaschine in der Lage, den Inhalt der Seite zu finden und kann dafür sorgen, dass sie korrekt in die Suchergebnisse aufgenommen wird.

Fazit

Standardmäßig verwendet Angular das clientseitige Rendering, was ein Problem darstellt, wenn die eigene Website in den Ergebnissen von Suchmaschinen gelistet werden soll. Die Lösung ist, die Anwendung serverseitig zu rendern und endgültige HTML-Elemente zu generieren, die Suchmaschinen-Crawler leicht interpretieren können.

Serverseitiges Rendering für Angular-Anwendungen kann mit Angular Universal erreicht werden. Das Hinzufügen von Angular Universal zu Ihrer bestehenden Angular-Anwendung ist sehr einfach, indem Sie das Paket @ng-toolkit/universal verwenden.

Dieser Beitrag wurde zuerst auf CodingTheSmartWay.com veröffentlicht.

#1 Angular 6 – The Complete Guide

Master Angular (Angular 2+, incl. Angular 6) und bauen Sie großartige, reaktive Web-Apps mit dem Nachfolger von Angular.js
Zum Kurs …

Haftungsausschluss: Dieser Beitrag enthält Affiliate-Links, das heißt, wenn Sie auf einen der Produktlinks klicken, erhalte ich eine kleine Provision. Dies hilft, diesen Blog zu unterstützen!