Optimiere Angular SEO mit Rendertron
Table of Contents
- Einführung
- Was ist Angular 5?
- Was ist ein Progressive Web-App?
- Warum ist Suchmaschinenoptimierung wichtig?
- Herausforderungen bei der SEO-Optimierung von Angular-Apps
- Die Rolle von Render Tron
- Vorteile der Verwendung von Render Tron mit Angular 5
- Implementierung von Render Tron in einer Angular-App
- Firebase-Funktionen für SEO-Optimierung
- Testen und Validieren der Optimierung
- Bereitstellung und Produktionseinsatz von Render Tron
- Fazit
📜 Angular SEO mit Render Tron: Eine revolutionäre Lösung
Angular ist eines der beliebtesten Frameworks für die Entwicklung von Single-Page-Anwendungen. Es ermöglicht die Erstellung von reaktionsschnellen, interaktiven und ansprechenden Webanwendungen. Allerdings hatten Angular-Apps bisher Schwierigkeiten mit der Suchmaschinenoptimierung, da Suchmaschinen nicht gut mit dynamisch generiertem JavaScript umgehen können.
In diesem Artikel werden wir eine bahnbrechende Lösung vorstellen, die es ermöglicht, eine Angular 5 Progressive Web-App zu 100% suchmaschinenoptimiert zu machen. Wir werden auch zeigen, wie man alle Routen der App für Social Media-Plattformen lesbar macht und sie vollständig kompatibel mit AngularFire oder anderen asynchronen Datenquellen macht. Und das alles ohne die Verwendung von Angular Universal! Die Lösung, die wir präsentieren werden, basiert auf einer brandneuen Bibliothek namens "Render Tron" vom Google Chrome-Team.
Wenn Sie schon immer Schwierigkeiten mit clientseitigen JavaScript-Frameworks und Suchmaschinenoptimierung hatten, wird Sie das, was wir Ihnen heute zeigen, überraschen. Mit Angular 5 und Firebase Cloud Functions ist es unglaublich einfach, diese Lösung in eine bestehende Angular-App zu integrieren.
Bevor wir uns die Implementierungsschritte genauer ansehen, schauen wir uns an, wie das System funktioniert. Wir haben hier eine reguläre Angular Progressive Web App, die auf Firebase Hosting bereitgestellt wird. Dann haben wir unsere Render Tron App, die eine Chrome-Browserinstanz auf dem Server ist. Das bedeutet, dass sie Ihre Site genauso rendern kann wie ein normaler Benutzer und dann die Daten an einen Bot zurückgeben kann, der die Meta-Tags oder andere asynchrone Daten aus der Seite lesen möchte.
Um dies zu ermöglichen, richten wir eine Cloud Function ein, die als Middleware fungiert und feststellt, ob ein Benutzer ein Bot oder tatsächlich ein menschlicher Benutzer ist, der die normale Angular-App erhalten sollte. Wenn jemand einen Link teilt und der Facebook-Bot Ihre Website durchsuchen möchte, um eine Vorschau dieses Links anzuzeigen, wird die Anfrage zuerst an Render Tron weitergeleitet und dann mit einer vollständig gerenderten Seite an den Facebook-Bot zurückgesendet. Das bedeutet, dass Sie Meta-Tags dynamisch erstellen oder Daten asynchron laden können und trotzdem von jedem Bot gelesen werden können.
Wenn ein normaler Benutzer die Website besucht, wird Render Tron übersprungen und die Angular-App direkt bereitgestellt. Wenn dieser Benutzer beschließt, einen Link von Ihrer App in sozialen Medien zu teilen, werden alle Meta-Tags angezeigt, die dieser Seite zugeordnet sind.
Das Chrome-Team hat eine Instanz von Render Tron bereitgestellt, die Sie jetzt für Ihre eigene App verwenden können. Es wird jedoch nicht für die Produktion empfohlen. Ich werde Ihnen zeigen, wie Sie das Projekt klonen und es auf App Engine bereitstellen können, wenn Sie dies in Produktion verwenden möchten. Es handelt sich dabei um ein Docker-Image, so dass Sie es auf jedem Backend bereitstellen können, das Sie möchten. Aber für Tests können Sie einfach die von Google bereitgestellte Instanz verwenden.
Render Tron verfügt über eine sehr einfache API. Sie geben ihm einfach die URL, die Sie lesen möchten, und er rendert und serialisiert diese URL. Es lauscht auf das initielle Laden der Seite sowie auf alle asynchronen Ereignisse und Netzwerkanfragen zum Laden zusätzlicher Daten in die Seite. Sie haben bis zu 10 Sekunden Zeit, um die Seite zu rendern, aber die Antwort wird gesendet, sobald das Rendern abgeschlossen ist.
Jetzt, da wir wissen, wie Render Tron funktioniert, gehen wir weiter und bauen eine Angular-App, die dies tatsächlich nutzen kann. Zuerst generiere ich eine neue App und stelle sicher, dass das Routing-Modul enthalten ist. Dann gehe ich zur index.html-Datei und füge einige Meta-Tags für Twitter und Open Graph hinzu. Meta-Tags sind Tags, die den Bots zeigen, wie die Seite angezeigt werden soll. Wenn jemand diese Seite verlinkt, weiß Twitter genau, welches Bild angezeigt werden soll und welche Beschreibung in der Twitter-Plattform angezeigt werden soll. Die Meta-Tags, die ich Ihnen hier zeige, sind als Standard-Fallback gedacht, falls wir sie nicht dynamisch generieren können. Sie sollten allgemeine Informationen über die Homepage Ihrer App vermitteln.
Jetzt möchten wir, dass diese Meta-Tags für jede einzelne vom Router geladene Komponente geändert werden. Wir können das tun, indem wir einen SEO-Dienst generieren. Der erste Schritt besteht darin, diesen Meta-Service aus Angular zu importieren, der Meta-Tags dynamisch im Kopf des Dokuments setzen kann. Dann injizieren wir das in den Konstruktor und richten ein Konfigurationsobjekt ein. Sie möchten dies wahrscheinlich für Ihre eigene App anpassen, aber es nimmt nur benannte Argumente, die Sie mit Ihrem eigenen Konfigurationsobjekt überschreiben können. Der Zweck dieser Methode ist es, das Wiederholen dieser Meta-Tags für jede einzelne Komponente zu vermeiden. Wir können sie vom Service aus setzen, indem wir meta.updateTag zusammen mit dem Namen und dem Inhalt aufrufen, den wir anzeigen möchten. Die Struktur dieser Tags wird den Meta-Tags ähneln, die wir in index.html setzen, und wir werden sie aktualisieren, wenn eine neue Komponente gerendert wird. Ich gehe hier schnell durch, weil jede updateTag-Methode genau gleich ist.
Lassen Sie uns diesen Service in einer Komponente verwenden. Ich generiere eine neue Komponente mit dem Namen "About Page". Ich habe auch ein paar andere Komponenten erstellt und wir werden alle diese im Router laden. Zuerst importieren wir jede Komponente, dann fügen wir sie dem Routes-Array hinzu. Jede Route hat einen Pfad, der angibt, wohin im Browser navigiert werden soll, und die entsprechende Komponente, die verwendet werden soll, wenn dieser Pfad gerendert wird. Jetzt müssen wir noch ein paar Links einrichten, damit Benutzer tatsächlich zu diesen Routen navigieren können. Wir können das mit dem AppComponent tun und Sie sollten das Router-Outlet am unteren Ende sehen. Dann erstellen wir ein Router-Link-Element für jeden unserer Pfade.
Für jede dieser Komponenten können wir die Meta-Tags dynamisch generieren. Alles, was wir tun müssen, ist, in den TypeScript-Code der Komponente zu gehen und den SEO-Service zu importieren. Dann rufen wir während des ng OnInit die generateTags-Methode mit den Konfigurationsoptionen auf, die wir setzen möchten. Für die Homepage setzen wir den Titel und sagen, dass die Beschreibung "Meine SEO-freundliche Homepage in Angular 5" ist, und geben ihr auch ein Bild. Dann können wir zur About Page wechseln und das Gleiche tun. Dadurch werden die Meta-Tags dynamisch für jede Komponente festgelegt, die vom Router geladen wird. Sie können überprüfen, ob dies funktioniert, indem Sie Ihre App öffnen und dann in den Head des Dokuments gehen. Dort sollten Sie sehen, dass sich die Meta-Tags jedes Mal ändern, wenn Sie zu einer neuen Route navigieren.
Das ist ziemlich cool, aber ich möchte einen Schritt weiter gehen und die Meta-Tags dynamisch mit Daten aus der Firebase-Datenbank generieren. Ich habe eine weitere Komponente generiert, die "Firebase Demo" heißt und genau wie alle anderen ist, aber hier werden wir die Firebase-Datenbank importieren. Für diesen Teil benötigen Sie ein Firebase-Konto sowie AngularFire. Sie können den offiziellen Anweisungen im Haupt-Repository folgen. Ich importiere die Firebase-Datenbank und Sie können auch Firestore hier verwenden, wenn Sie möchten. Dann benötigen wir ein RxJS-Observable sowie den take-Operator. Zuerst richten wir eine Referenz auf das AngularFire-Objekt ein und dann holen wir uns diese Daten als Observable. Dann injizieren wir unseren SEO-Service sowie die AngularFire-Datenbank im Konstruktor, um die Referenz zugreifbar zu machen. Um die Referenz zu beziehen, rufen wir DB.object auf und ich habe diese Daten unter dem "demo"-Knoten gespeichert. Dann erhalten wir die Daten, indem wir valueChanges aufrufen. Lassen Sie uns schnell in Firebase gehen und sehen, wie diese Daten aussehen. Für diese Demo sehen sie genauso aus wie die Daten, die wir zuvor in den Komponenten hart codiert hatten, aber jetzt laden wir sie über die Firebase-Datenbank.
Um die Metatags zu setzen, rufen wir den take-Operator auf dem Observable auf und abonnieren ihn. Mit dem empfangenen Wert werden wir unseren SEO-Service aufrufen, um die Meta-Tags zu setzen. Die Daten, die wir vom Abonnement zurückbekommen, werden die Daten sein, die wir uns gerade in Firebase angeschaut haben, also können wir diese Meta-Tags festlegen: Titel, Beschreibung und Bild.
Das war's von Angular-Seo mit Render Tron! Wenn Ihnen dieses Video geholfen hat, würde ich mich über ein Like und ein Abo freuen. Und wenn Sie fortgeschrittenen exklusiven Content zu diesen Themen erhalten möchten, können Sie auch ein Pro-Abonnent auf angularfirebase.com werden. Sie erhalten ein kostenloses Exemplar meines Buches sowie eine individuelle Projektberatung.
Highlights:
- Einführung zu Angular SEO und Render Tron
- Durchführung der Suchmaschinenoptimierung für eine Angular 5 Progressive Web-App
- Verwendung von Render Tron, um Angular-Apps für Suchmaschinen und soziale Medien lesbar zu machen
- Implementierung von Firebase Cloud Functions für SEO-Optimierung
- Bereitstellung von Render Tron für die Produktionseinsatz
Häufig gestellte Fragen
Q: Ist Render Tron die einzige Lösung für die SEO-Optimierung von Angular-Apps?
A: Nein, Render Tron ist eine der Lösungen, die speziell für Angular entwickelt wurden. Es gibt jedoch auch andere Ansätze wie Angular Universal, um Angular-Apps suchmaschinenoptimiert zu machen.
Q: Ist es schwierig, Render Tron in eine bestehende Angular-App zu integrieren?
A: Nein, die Integration von Render Tron in eine Angular-App ist relativ einfach. Es erfordert jedoch eine gewisse Konfiguration und Verständnis der Arbeitsweise von Render Tron.
Q: Welche Vorteile bietet die Verwendung von Render Tron für die SEO-Optimierung?
A: Render Tron ermöglicht es Suchmaschinen und sozialen Medien, vollständig gerenderte HTML-Seiten von Angular-Apps zu lesen, was zu einer besseren Indexierung und höheren Sichtbarkeit in den Suchergebnissen führt.
Q: Kann ich Render Tron für die Produktion verwenden?
A: Während Render Tron offiziell nicht für die Produktion empfohlen wird, ist es möglich, eine eigene Instanz von Render Tron zu erstellen und sie für die Produktion bereitzustellen. Dies erfordert jedoch eine gewisse Konfiguration und Wartung.
Ressourcen:
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
