Effektive Tipps zur Suchmaschinenoptimierung für Angular 4
Inhaltsverzeichnis
- Einführung in die Suchmaschinenoptimierung für Angular
- Angular Universal: Die Lösung für SEO-Probleme
- Vorbereitung: Ein neues Angular-Projekt erstellen
- Installation von Angular Universal und Angular Animation
- Konfigurationsänderungen in der
app.module.ts-Datei
- Erstellung des
app.server.module.ts-Moduls
- Erstellung eines Express-Servers
- Anpassungen in den TypeScript-Konfigurationsdateien
- Anpassungen in der
package.json-Datei
- Starten des Server und Überprüfung des Rendering-Ergebnisses
🔍 Einführung in die Suchmaschinenoptimierung für Angular
Angular ist ein beliebtes JavaScript-Framework zur Entwicklung von Webanwendungen. Allerdings hat Angular standardmäßig Probleme mit der Suchmaschinenoptimierung (SEO), da die meisten Suchmaschinen Schwierigkeiten haben, JavaScript-gerenderten Inhalt zu indizieren. In diesem Artikel geht es darum, wie man mithilfe von Angular Universal die SEO-Fähigkeiten einer Angular-Anwendung verbessern kann.
🌐 Angular Universal: Die Lösung für SEO-Probleme
Angular Universal ist ein Framework, das von Angular bereitgestellt wird und speziell für die serverseitige Rendering von Angular-Anwendungen entwickelt wurde. Das serverseitige Rendering ermöglicht es Suchmaschinen, den Inhalt einer Angular-Anwendung richtig zu verstehen und zu indizieren. Dadurch wird die Auffindbarkeit der Anwendung in den Suchergebnissen erheblich verbessert.
⚙️ Vorbereitung: Ein neues Angular-Projekt erstellen
Um mit Angular Universal zu arbeiten, müssen wir zuerst ein neues Angular-Projekt erstellen. Dazu können wir die Angular Befehlszeilenschnittstelle (CLI) verwenden. Installieren Sie zunächst die CLI, falls sie noch nicht installiert ist, und gehen Sie dann über die Befehlszeile in den gewünschten Ordner. Verwenden Sie den Befehl ng new gefolgt vom Namen des Projekts, um ein neues Angular-Projekt zu erstellen. Beispiel: ng new mein-projekt.
📦 Installation von Angular Universal und Angular Animation
Um Angular Universal in unserem Projekt zu verwenden, müssen wir die erforderlichen Pakete installieren. Öffnen Sie die Befehlszeile im Projektordner und führen Sie den Befehl npm install @angular/platform-server @angular/animations aus. Dadurch werden die Pakete für Angular Universal und die Animationserweiterungen für Angular installiert.
🔧 Konfigurationsänderungen in der app.module.ts-Datei
Öffnen Sie die app.module.ts-Datei und nehmen Sie die erforderlichen Änderungen vor, um Angular Universal zu aktivieren. Fügen Sie den Import ServerTransferStateModule hinzu und ändern Sie den BrowserModule-Import in BrowserModule.withServerTransition({ appId: 'my-app' }). Dadurch wird der Serverübergang aktiviert und der appId wird festgelegt. Speichern Sie die Datei.
📂 Erstellung des app.server.module.ts-Moduls
Um Angular Universal korrekt zu konfigurieren, müssen wir ein separates Modul erstellen, das das serverseitige Rendering steuert. Erstellen Sie eine neue Datei namens app.server.module.ts in Ihrem Projektordner und fügen Sie den entsprechenden Code hinzu. Stellen Sie sicher, dass Sie die erforderlichen Module importieren und das Modul mit der forRoot()-Methode exportieren. Speichern Sie die Datei.
🚀 Erstellung eines Express-Servers
Um die serverseitige Rendering-Funktionen von Angular Universal nutzen zu können, müssen wir einen Express-Server einrichten. Erstellen Sie eine neue Datei namens server.ts in Ihrem Projektordner und fügen Sie den entsprechenden Code hinzu. Der Code ist etwas komplexer und verwendet verschiedene Middleware und Konfigurationen. Speichern Sie die Datei.
⚙️ Anpassungen in den TypeScript-Konfigurationsdateien
Um sicherzustellen, dass TypeScript die serverseitige Rendering-Konfiguration korrekt verarbeitet, müssen wir bestimmte Änderungen in den TypeScript-Konfigurationsdateien vornehmen. Fangen wir mit der tsconfig.app.json-Datei an. Fügen Sie den neuen Eintrag "include": ["src/**/*.ts", "src/**/*.d.ts", "server.ts"] hinzu, um die server.ts-Datei einzuschließen. Speichern Sie die Datei.
⚙️ Anpassungen in den TypeScript-Konfigurationsdateien (Fortsetzung)
Nun gehen wir zur obersten tsconfig.json-Datei. Fügen Sie innerhalb des "compilerOptions"-Objekts, nach dem Komma, einen neuen Eintrag "angularCompilerOptions" hinzu. Kopieren Sie den gegebenen Code und fügen Sie ihn ein. Er ermöglicht es uns, das Ausgabeverzeichnis für die generierten ngfactory-Dateien anzugeben und das Einstiegsmodul anzugeben. Speichern Sie die Datei.
🏁 Starten des Servers und Überprüfung des Rendering-Ergebnisses
Nachdem alle vorherigen Schritte abgeschlossen sind, können wir den Server starten und überprüfen, ob das serverseitige Rendering funktioniert. Öffnen Sie die Befehlszeile in Ihrem Projektordner und geben Sie den Befehl npm run start ein. Der Server wird gestartet und normalerweise auf localhost:4000 ausgeführt. Öffnen Sie Ihren Browser und navigieren Sie zu localhost:4000. Überprüfen Sie den Quellcode der Seite, um zu sehen, ob der Inhalt gerendert wurde.
🔗 Weitere Ressourcen:
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
