Wird auf das TypeScript-basiertes Front-End-Webapplikationsframework “Angular” gesetzt, sollte die Suchmaschinenoptimierung einen äußerst hohen Stellenwert haben (wie eigentlich immer ;-)).
Inhaltsverzeichnis
Erst durch rendern entsteht der Inhalt 😲
Wenn in Deiner HTTP-Response (RAW-HTML) wenigstens der Inhalt des <title> Elements steht, kann mit der Domain-Sichtbarkeit nach vollzogenem Relaunch (auf Angular) gar nicht allzu viel schiefgehen. 📉 #holdmyrotwein </ironie>
What JavaScript frameworks do?
Injecting a layer of complexity.
Bild: URL https://www.jacques.de/weine/rotwein von Januar 2024
Kein Text-Inhalt im RAW-HTML
Ein »schönes Beispiel«, wenn Angular nahezu out-of-the-box genutzt wird und der gesamte Inhalt Deines <body> lediglich <app-root> und mindestens ein JavaScript-file ist.
Man muss hier nicht zwingend mit #SSR aufwarten, jedoch sollten Google-Bots „Fähigkeiten“ .JS-Inhalte zu rendern – und dies vordergründig zeitnah sowie fehlerfrei – nicht überschätzt werden 😉
If you take one thing from technical SEO… Learn how to debug 🤘
Warum ist das eine SEO-Stolperfalle?
“Übel” kann das Ganze leider ausgehen, denn oftmals fungiert der obige Umstand als fundamentale »SEO-Handbremse«, denn das Fundament bietet einfach zu viele Stolperfallen.
Grundsätzlich kann Google-Bot .JS rendern, aber dies geschieht zumeist verzögert. Zusätzlich sind Timeouts während des Rendern oder das Gewichten, welche Skript-Ressourcen für Painting & Styling notwendig sein könnten, eine Stolperfalle – wenn man das gerenderte Ergebnis ungeprüft stehen lässt. (Was nicht gerade selten der Fall ist).
Bild: Screenshot revolut.com aus der Google-Suche
SEO mit Angular ist machbar
Wenn das JavaScript-Framework hinsichtlich elementarer SEO-Faktoren “optimiert und konfiguriert” wird, dann klappt’s auch langfristig mit dem guten Google Ranking 🤝
Weiterlesen: technisches SEO 🛠️ aus der angewandten Praxis
API und Frontend-Anwendung getrennt? Achte auf preflight Requests
Wenn das API von einem anderen Ursprung als die Frontend-Anwendung bereitgestellt wird, senden die Browser automatisch eine zusätzliche OPTIONS-Anfrage, bevor eine Anfrage an die API gestellt wird. Dies wird als Preflight-Anfrage bezeichnet, die aufgrund von CORS (Cross-Origin Resource Sharing) erforderlich ist. Diese Preflight-Anfragen können die gemessene und auch wahrgenommene >Geschwindigkeit< der Seite (WebApp) negativ beeinflussen.
