Angular und SEO: wie man beides richtig einrichtet

Die Entwickler von Google haben mehrfach erklärt, dass ihre Suchmaschinen-Bots das Parsen von SPA-Projekten unterstützen. In der Praxis sind die vorhandenen Mechanismen aber eher begrenzt, was Ressourcen und Möglichkeiten angeht. So bekommt man oft nicht die gewünschte Indexierung, auf die man gehofft hat.

Suchmaschinen-Bots warten beim Crawlen von Projekten manchmal gar nicht auf die Antwort bestimmter Skripte, was sich negativ auf die organischen Rankings auswirken kann. Um solche Probleme zu vermeiden, müssen Sie entsprechende Maßnahmen ergreifen – und dabei hilft die richtige Einrichtung des Frameworks Angular Search Engine Optimization.

Genau darüber erzähle ich Ihnen heute.

Was ist Angular

Angular ist ein Open-Source-JS-Framework zur Erstellung clientseitiger Anwendungen. Es wurde 2010 von Ingenieuren bei Google vorgestellt.

Die Hauptaufgabe von Angular ist die Erstellung von SPA-Projekten (Single Page Application) und Anwendungen mit einer einzigen Seite im Browser. Ein wesentliches Merkmal ist die Verwendung von TypeScript als primäre Programmiersprache. Allerdings lassen sich Anwendungen auch in Dart oder JavaScript schreiben. Unabhängig von der gewählten Variante verbessert die Angular-Optimierung für Search Engines die Interaktion zwischen Nutzern, Entwicklern und der jeweiligen Ressource.

Worte der Google-Entwickler:

«Die Zeiten haben sich geändert. Wir empfehlen heute nicht mehr, das Crawlen von JavaScript- oder CSS-Dateien durch den Googlebot zu blockieren. Wir rendern und verstehen Webseiten genauso wie Browser».

Wenn man sich aber die Informationen von Google selbst anschaut, sehe ich seit 2018 nichts wirklich Optimistisches, denn es fehlen Fallstudien und Dokumentation. Es gibt auch keine konkreten Angaben dazu, wie Google verschiedene Frameworks crawlt und indexiert.

Prerender – Funktionsweise und wofür es geeignet ist

Prerender ist eine Lösung, die es Suchmaschinen-Bots ermöglicht, eine bestimmte Ressource so zu sehen, wie die Seite vor Ihnen erscheint, wenn Sie sie in einem beliebigen Browser öffnen.

Es eignet sich in folgenden Fällen:

1. für statische Seiten;
2. bei dauerhaften, nahezu unveränderlichen (oder sich langsam ändernden) Inhalten;
3. zur Erstellung von Seiten, wenn der Datenabruf vom Server lange dauert.

Prerender ist in folgenden Situationen nicht geeignet:

• die Aktualität der Informationen ist wichtig, aber die Daten ändern sich schnell;
• der Umfang der Daten erlaubt keine korrekte Statistikerstellung.

«Außerdem möchte ich zum letzten Punkt ergänzen, dass Prerender auch dann nicht geeignet ist, wenn der Statistik-Aufbauprozess zu lange dauert».

Besonderheiten der Universal-Implementierung

Um das Indexierungsproblem zu lösen, führt Angular Universal für SEO das Rendering auf der Serverseite durch. Das heißt, eine bestimmte Seite wird auf einem «Backend-Server» erstellt, der in Node.Js, .NET oder anderem geschrieben ist. Als Ergebnis erhält der Browser des Nutzers eine Seite mit den üblichen Eigenschaften und den gewohnten Elementen:

1. Zwischenüberschriften;
2. Meta-Tags;
3. Content.

Dieser Ansatz gilt als ideal, da Suchmaschinen-Crawler gut auf die Indexierung statischer Seiten vorbereitet sind. Für SEO in Google mit Angular können Sie eine ganz normale Anwendung entwickeln, und Universal kümmert sich um das Server-Rendering.

Trotz der Implementierung von Universal auf Basis von .Net Core ist es nicht empfehlenswert, es zu verwenden, weil:

1. in jedem Fall wird das Rendering über NodeJS durchgeführt;
2. die Arbeitsgeschwindigkeit ist zu langsam;
3. es gibt wenige Anwendungsbeispiele.

Übrigens: Für das DOM auf dem Server wird domino auf Basis von Mozillas dom.js verwendet. Das hilft, viele Fehler zu vermeiden.

Wie man SEO in Angular umsetzt

Darstellung der Seiten durch den Google-Bot überprüfen

Bei der Verwendung von Angular gibt es in Sachen SEO keine Schwierigkeiten bei der Überprüfung, wie der Bot die Projektseiten darstellt. Dazu müssen Sie zur Google Search Console gehen, das Projekt auswählen und die «URL-Prüfung» für die zur Indexierung vorgesehenen Seiten starten. Die Konsole zeigt Ihnen Informationen darüber an, ob die Suchmaschinen-Mechanismen Zugriff erhalten können oder nicht.

Dieser Ansatz hilft zu verstehen, welchen Bereichen Sie bei der SEO-Arbeit besondere Aufmerksamkeit schenken sollten.

Vorheriges Rendering

Hierbei gibt es nichts Kompliziertes. Kurz erklärt: Das JavaScript-Rendering findet in Ihrem Browser statt, der statische HTML-Code wird gespeichert und an den Bot zurückgegeben. Diese Lösung eignet sich ideal für einfache Anwendungen, die nicht vom Server abhängig sind. Das liefert hervorragende SEO-Ergebnisse und ist gleichzeitig einfach einzurichten.

Das vorherige Rendering zeichnet sich durch eine einfache Einrichtung aus und liefert gleichzeitig gute Ergebnisse. Deshalb gilt es als geeignete Alternative zum serverseitigen Workflow.

Rendering auf der Serverseite

Hier kommt SSR mithilfe von Angular Universal zum Einsatz.

Einfach ausgedrückt: Angular Universal wird auf der Serverseite ausgeführt, generiert statische Seiten und startet sie im Browser. Wenn also eine Anfrage gestellt wird, erscheint der Inhalt im DOM für den Besucher.

DOM ist das Document Object Model, das der Browser im Arbeitsspeicher des Computers auf Basis des vom Server empfangenen HTML-Codes erstellt.

Ich sage es direkt: Diese Technologie erhöht die Serverlast. Gleichzeitig verbessert sich die Leistung bei langsamen Verbindungen oder leistungsschwachen Geräten. In diesem Fall erfolgt das Laden der Startseite schneller als beim direkten Client-Rendering.

Optimierung von Angular selbst

Für die SEO-Optimierung von Angular-Ressourcen befolgen Sie die folgende Anleitung:

• Erstellen Sie vorab eine Liste der Seiten auf Ihrer Ressource und generieren Sie eine sitemap.xml. Besondere Aufmerksamkeit sollten Sie den wichtigsten Projektbereichen widmen, die eine schnelle Indexierung erfordern (für diese müssen Sie eine hohe <priority> festlegen). Und ja, natürlich behauptet Google, dass Prioritäten nicht berücksichtigt werden, aber bei großen Ressourcen werden Seiten mit hoher <priority> zuerst indexiert. Zufall? Ich glaube nicht.
• Installieren Sie Prerender (wirkt sich positiv auf die SEO-Parameter der Seite aus, einschließlich Ladegeschwindigkeit und Indexierung).
• Verwenden Sie die Google Search Console zur Überprüfung der Seitenindexierung.

• Richten Sie das Analytics-Tracking korrekt ein. Zum Beispiel hat Google Analytics oft Schwierigkeiten bei der Erfassung von SPA-Ressourcen. Ich empfehle, Angulartics zu verwenden und einzusetzen.

• Führen Sie außerdem regelmäßige Scans des Projekts mit SEO-Crawlern durch: ScreamingFrog, JetOctopus und ähnliche. Diese zeigen übersehene Fehler auf.

Fazit

Wie Sie sich selbst überzeugen konnten, lassen sich SPA-Projekte in Suchmaschinen promoten, auch wenn die Aufgabe anspruchsvoll ist. Zum Beispiel:

• mithilfe von Angular führen Sie für SEO das Rendering auf der Serverseite durch (und dieser Ansatz hilft, Probleme mit mangelhafter Indexierung zu vermeiden);
• die «Prerendering»-Funktion beschleunigt die Rendering-Zeit, was letztlich die Ladegeschwindigkeit des Ressourceninhalts erhöht.

Ich und das Team von Solarweb sind der Meinung, dass Angular Universal die Möglichkeit bietet, ein benutzerfreundliches Projekt zu erstellen, ohne sich Sorgen darüber machen zu müssen, wie es von der Suchmaschine wahrgenommen wird.