Optimieren Sie die SEO für Ihre Angular 6 Single-Page Web Apps!

Table of Contents

1. Einführung zu Angular und SEO
2. Nachteile von Angular für SEO
3. Die Lösung: Serverseitiges Rendern mit Angular Universal
4. Schritt-für-Schritt Anleitung zur Einrichtung von Angular Universal
5. Das Problem mit Clientseitigem Rendern
6. Die Vorteile von Serverseitigem Rendern mit Angular Universal
7. Einrichten eines neuen Angular-Projekts
8. Hinzufügen von Angular Universel mit dem ng-toolkit/universal Paket
9. Durchführen des Build-Prozesses
10. Starten eines lokalen Webservers

🌐 Einführung zu Angular und SEO

Angular ist ein Framework zur Entwicklung von Single-Page-Applikationen (SPA). Es rendert standardmäßig die Website clientseitig, was für die Suchmaschinenoptimierung (SEO) ein Nachteil ist. Suchmaschinen-Crawler können den Client-Code nicht ausführen und sehen daher nicht den Inhalt und die Struktur einer Angular-Webanwendung. Dies führt dazu, dass Webseiten auf Angular-Basis nicht korrekt in den Suchmaschinenergebnissen dargestellt werden. Um dieses Problem zu lösen, bietet sich das serverseitige Rendern mit Angular Universal an.

🚫 Nachteile von Angular für SEO

Die Verwendung von Angular für die Entwicklung von Webanwendungen hat für die Suchmaschinenoptimierung einige Nachteile. Da der Client-Code clientseitig ausgeführt wird, können Suchmaschinen-Crawler den Inhalt und die Struktur der Website nicht erfassen. Dies führt dazu, dass Angular-Webseiten in den Suchmaschinenergebnissen nicht korrekt angezeigt werden. Um dieses Problem zu lösen, sollte das serverseitige Rendern mit Angular Universal in Betracht gezogen werden.

💡 Die Lösung: Serverseitiges Rendern mit Angular Universal

Die Lösung für das SEO-Problem von Angular besteht darin, das serverseitige Rendern mit Angular Universal zu verwenden. Angular Universal ermöglicht das Rendern der Webseiteninhalte serverseitig, sodass Suchmaschinen-Crawler den vollständigen HTML-Code erfassen können. Dadurch werden die Webseiten in den Suchmaschinenergebnissen korrekt angezeigt.

🛠️ Schritt-für-Schritt Anleitung zur Einrichtung von Angular Universal

1. Ein neues Angular-Projekt einrichten:

   • Verwenden Sie das Angular CLI, um ein neues Angular-Projekt zu erstellen.
   • Öffnen Sie das Terminal und geben Sie den Befehl ng new mein-projekt ein.
   • Wechseln Sie in das Projektverzeichnis mit dem Befehl cd mein-projekt.

2. Installation von Angular Universal:

   • Führen Sie den Befehl ng add @ng-toolkit/universal aus, um Angular Universal zu installieren.
   • Dieser Befehl fügt das Angular Universal-Paket zu Ihrem Projekt hinzu und konfiguriert es automatisch.

3. Durchführen des Build-Prozesses:

   • Führen Sie den Befehl npm run build:server aus, um den Build-Prozess für Angular Universal zu starten.
   • Dieser Prozess rendert Ihre Angular-Anwendung serverseitig und generiert vollständige HTML-Seiten.

4. Starten eines lokalen Webservers:

   • Führen Sie den Befehl npm run serve:ssr aus, um einen lokalen Webserver zu starten.
   • Öffnen Sie Ihren Browser und navigieren Sie zur URL http://localhost:4000, um Ihre serverseitig gerenderte Angular-Anwendung anzuzeigen.

🌍 Das Problem mit Clientseitigem Rendern

Das Problem mit clientseitigem Rendern besteht darin, dass der Inhalt und die Struktur einer Angular-Webanwendung von Suchmaschinen-Crawlern nicht erfasst werden können. Da der Client-Code clientseitig ausgeführt wird, ist der HTML-Code leer und enthält nur Platzhalter für das Rendern der dynamischen Inhalte. Dadurch können Suchmaschinen die Webseiten nicht ordnungsgemäß indizieren und in den Suchergebnissen anzeigen.

✅ Die Vorteile von Serverseitigem Rendern mit Angular Universal

Die Verwendung von Angular Universal für das serverseitige Rendern bietet folgende Vorteile:

• Suchmaschinen-Crawler können den vollständigen HTML-Code der Webseiten erfassen und die Inhalte korrekt indizieren.
• Die Webseiten werden in den Suchmaschinenergebnissen besser positioniert und sichtbarer.
• Die Ladezeiten der Webseiten werden verbessert, da der HTML-Code bereits vom Server generiert wird.
• Die Benutzererfahrung wird optimiert, da die Inhalte schneller geladen werden und keine Verzögerungen beim Anzeigen der Webseite auftreten.

🔧 Einrichten eines neuen Angular-Projekts

Um Angular Universal in einem neuen Angular-Projekt einzurichten, befolgen Sie bitte die folgenden Schritte:

1. Öffnen Sie das Terminal und navigieren Sie zum gewünschten Speicherort für Ihr neues Projekt.
2. Führen Sie den Befehl ng new mein-projekt aus, um ein neues Angular-Projekt zu erstellen.
3. Wechseln Sie in das Projektverzeichnis mit dem Befehl cd mein-projekt.
4. Öffnen Sie Ihr neues Projekt in Ihrem bevorzugten Code-Editor.

📦 Hinzufügen von Angular Universal mit dem ng-toolkit/universal Paket

Um Angular Universal zu Ihrem Angular-Projekt hinzuzufügen, verwenden wir das ng-toolkit/universal Paket. Befolgen Sie die Schritte unten, um es zu installieren:

1. Öffnen Sie das Terminal und navigieren Sie zum Stammverzeichnis Ihres Angular-Projekts.
2. Führen Sie den Befehl ng add @ng-toolkit/universal aus, um das Paket zu installieren.
3. Warten Sie, bis der Installationsprozess abgeschlossen ist.

📂 Durchführen des Build-Prozesses

Der Build-Prozess mit Angular Universal umfasst das Rendern der Webseiteninhalte serverseitig. Folgen Sie den nachstehenden Schritten:

1. Öffnen Sie das Terminal und navigieren Sie zum Stammverzeichnis Ihres Angular-Projekts.
2. Führen Sie den Befehl npm run build:server aus, um den Build-Prozess zu starten.
3. Warten Sie, bis der Build-Prozess abgeschlossen ist.

🌐 Starten eines lokalen Webservers

Nachdem der Build-Prozess abgeschlossen wurde, können Sie einen lokalen Webserver starten, um Ihre serverseitig gerenderte Angular-Anwendung anzuzeigen. Führen Sie die folgenden Schritte aus:

1. Öffnen Sie das Terminal und navigieren Sie zum Stammverzeichnis Ihres Angular-Projekts.
2. Führen Sie den Befehl npm run serve:ssr aus, um den Webserver zu starten.
3. Öffnen Sie Ihren Browser und navigieren Sie zur URL http://localhost:4000, um Ihre Angular-Anwendung anzuzeigen.

🌟 Highlights

• Angular ist ein Framework zur Entwicklung von Single-Page-Webanwendungen.
• Das clientseitige Rendern von Angular ist nachteilig für die Suchmaschinenoptimierung (SEO).
• Angular Universal ermöglicht das serverseitige Rendern von Angular-Anwendungen.
• Serverseitiges Rendern verbessert die SEO-Fähigkeit von Angular-Webseiten.
• Die Einrichtung von Angular Universal erfordert die Verwendung des ng-toolkit/universal Pakets.

❓ FAQ

Frage: Warum ist das serverseitige Rendern für die SEO von Angular-Webseiten wichtig? Antwort: Das serverseitige Rendern ermöglicht Suchmaschinen-Crawlern den Zugriff auf den vollständigen HTML-Code einer Webseite und verbessert somit die SEO-Fähigkeit von Angular-Webseiten.

Frage: Ist das serverseitige Rendern mit Angular Universal einfach einzurichten? Antwort: Ja, das serverseitige Rendern mit Angular Universal ist relativ einfach einzurichten, vor allem mit dem ng-toolkit/universal Paket, das automatische Konfigurationen für Sie übernimmt.

Frage: Gibt es andere Möglichkeiten, Angular-Webseiten für die SEO zu optimieren? Antwort: Ja, es gibt auch andere Techniken wie das Prerendering oder die Verwendung von SSR-Frameworks wie Next.js oder Nuxt.js.

Frage: Kann ich Angular Universal in vorhandene Angular-Projekte integrieren? Antwort: Ja, Sie können Angular Universal in vorhandene Angular-Projekte integrieren, indem Sie die Anleitung und die Schritte zur Einrichtung befolgen.

🔗 Ressourcen

• Angular Universal: https://angular.io/guide/universal
• ng-toolkit/universal Paket: https://ng-toolkit/universal