Das Angular Framework ist ein strukturelles Javascript-basiertes Framework für Webanwendungen. Es wird verwendet, um dynamische Webseiten mit Inhalten zu erstellen, die über Webdienste gerendert werden. Das Angular Framework ist sehr entwicklerfreundlich. Es gibt es schon seit mehreren Jahren und hat eine starke Community von Tools und Dienstprogrammen aufgebaut, darunter Angular CMS-Tools, Backend-Frameworks und mehr.

Das Angular-Ökosystem

Anwendungen, die mit dem Angular-Framework erstellt wurden, werden aufgrund ihrer Funktionsweise als Single Page Applications (SPAs) bezeichnet. Eine Angular-Anwendung rendert nach dem Laden andere Seiten dynamisch, ohne die Webseiten erneut zu laden. Diese Erfahrung wird mit der Leistung des Angular Javascript Frameworks geliefert. Es ändert die Seiten dynamisch, indem es Javascript-Code ausführt oder nur den erforderlichen Inhalt lädt. Dies gibt dem Benutzer eine reibungslose Erfahrung, ohne auf ein erneutes Laden zu warten. Angular-Sites können jedoch negative Auswirkungen auf ihre Suchmaschinenoptimierung (SEO) haben.

In diesem Artikel erläutern wir, wie Angular-Anwendungen eine spezielle SEO-Behandlung benötigen, und wir geben einige spezifische Bereitstellungsanweisungen, um eine gute Angular-SEO zu ermöglichen.

Verständnis von Suchmaschinen-Crawlern und SEO

Bevor wir uns mit der Lösung befassen, sollten wir verstehen, wie die Suchmaschinen-Crawler (oder Bots) tatsächlich funktionieren. Suchmaschinen auf der ganzen Welt durchsuchen Ihre Websites, um die Seiten und das Endziel Ihres Unternehmens zu verstehen. Dazu lesen die Crawler die Metadaten der Seiten wie Titel, Beschreibung, Bild-Tags und Kategorien durch. Diese Metadaten müssen für jede Seite unterschiedlich sein, damit Suchmaschinen die Absicht jeder Seite verstehen können.

Traditionelle SEO - Suchergebnisse

Ein Suchmaschinen-Bot erreicht eine bestimmte Seite, findet die Hyperlinks auf der Seite, liest die Metadaten auf der Seite und beginnt, die Hyperlinks zu durchlaufen. Dieser Vorgang wird auf Ihrer Website wiederholt, bis keine neuen Links mehr gefunden werden können. Während dieses Vorgangs lädt der Bot den statischen Inhalt Ihrer Website herunter und versteht die Seite. Daher wird es wichtig, die Details jeder Seite in den Metadaten und statischen Inhalten zu maximieren.

Unser Angular CMS ermöglicht dynamische Inhalte, die Ihre Vermarkter aktualisieren können.

SEO ist heute zu einer der wichtigsten Investitionen für jedes Online-Geschäft geworden. In der Vergangenheit waren die Webanwendungen, die entwickelt wurden, ziemlich einfach und enthielten meist statische Seiten. Diese Seiten enthielten alle erforderlichen Informationen, die in ihnen vorcodiert waren. Als sich die Entwicklung von Webanwendungen weiterentwickelte, traten wir in eine Ära des dynamischen Content-Renderings ein, in der der Inhalt für die Webseiten irgendwo gespeichert und nach Bedarf abgerufen wird.

Dazu gibt es zwei Möglichkeiten:

  1. Serverseitiges Rendering
  2. Clientseitiges Rendering

Aufgrund des Fehlens ausgefeilter clientseitiger Rendering-Frameworks in der Vergangenheit war das serverseitige Rendering von Seiten der Trend. Es gab zahlreiche Sprachen und Frameworks, um dasselbe zu handhaben. Zum Beispiel rendern PHP, Java Spring, NodeJS mit Lenker und andere Frameworks die Seiten im Voraus und senden nur den einfachen HTML-Inhalt an das Frontend.

Dieser Ansatz stellt sicher, dass die Seite über die richtigen Meta-Tags verfügt und der gesamte Inhalt gerendert wird, bevor er vom Suchmaschinen-Crawler empfangen wird. So waren herkömmliche Webanwendungen praktisch einfach, wenn es um SEO ging. Allerdings hatten sie sicherlich einen Nachteil von längeren Ladezeiten. Mit Low-End-Servern wurde die Verarbeitung von Tausenden von Seitenanfragen schwierig. Dies brachte Frontend-Frameworks wie Angular ins Bild.

SEO für Single Page Applications (SPAs)

Eine Single Page Application ist ein Konzept, bei dem das Basislayout der Anwendung nur einmal und der Rest der Seiten und Komponenten nur nach Bedarf geladen wird. Möglich wird dies durch die Leistungsfähigkeit von Javascript, das dynamisch entscheidet, welcher Inhalt benötigt wird, die Daten abruft und im gewünschten Format rendert.

Unser Angular CMS ermöglicht dynamische Inhalte, die Ihre Vermarkter aktualisieren können.

Vorteile einer einseitigen Anwendung

Aufgrund ihrer dynamischen Natur hat eine einseitige Anwendung viele inhärente Vorteile. Einige davon sind unten aufgeführt:

  • Schnellere Übergangszeit nach dem Laden der Anwendung
  • Reibungslosere Erfahrungen im Vergleich zu einer herkömmlichen Webanwendung
  • Weniger Belastung des Webservers, der die Seiten verarbeitet
  • Schnellere Entwicklung zeit mit ausgeklügelten Frameworks wie Angular

Trotz dieser Vorteile ist SEO eine wesentliche Herausforderung bei Single-Page-Anwendungen.

Angular SEO challenges

Wie verstanden, lädt Angular die Seiten nicht neu, es sei denn, es wird ausdrücklich darum gebeten. Angular unterstützt die dynamische Änderung von Metadaten für die Seiten, hängt jedoch vollständig von JavaScript ab. Wie bereits erwähnt, enthalten Suchmaschinen-Crawler normalerweise kein Javascript. Dies kann dazu führen, dass Angular-Anwendungen beim Rendern der richtigen Inhalte oder Metadaten fehlschlagen.

Angular SEO - Ergebnisse von Suchmaschinen-Crawlern

Im Laufe der Jahre hat sich Angular SEO jedoch weiterentwickelt und die Community hat eine Lösung gefunden, um dies zu umgehen. Die Lösung ermöglicht es uns, statische Seiten aus eckigen Seiten zu erstellen. Diese statischen Seiten enthalten die richtigen Metadaten und vorgerenderten Inhalt. Später in diesem Artikel werden wir uns mit diesem Prozess befassen, um die damit verbundenen Herausforderungen zu verstehen und Taktiken zur Optimierung von Angular SEO zu implementieren.

Angular SEO: Entwicklung suchfreundlicher Seiten

Bevor wir mit dem Erstellen einer funktionierenden Angular SEO-Lösung beginnen, erstellen wir zunächst eine leere Angular JS-Anwendung.

ng new seo-friendly-app

Der Befehl erstellt eine neue Angular JS-Anwendung, in der wir eine einfache Homepage und eine Blogseite erstellen, einige Inhalte auf der Blogseite mithilfe von ButterCMS-APIs rendern und SEO-freundlich gestalten.

Beginnen wir mit der Erstellung von Seiten und Routen für dieselben. Führen Sie die folgenden Befehle im Terminal aus, um Ihre Start- und Blogseiten zu erstellen.

ng g c pages/home --skipTests=trueng g c pages/blog --skipTests=true

Dadurch werden die Komponenten erstellt und in die App importiert.Modul.ts-Datei. Fügen Sie nun die Seiten zum Routing-Modul hinzu, damit wir zu diesen Seiten routen können. Ändern Sie Ihr App-Routing.Modul.ts-Datei.

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './pages/home/home.component';import { BlogComponent } from './pages/blog/blog.component';const routes: Routes = ;@NgModule({ imports: ,exports: })export class AppRoutingModule { }

Der obige Code bildet die jeweiligen Komponenten mit ihren Routen ab und setzt als Standardkomponente. Ändern Sie nun die App.Komponente.HTML-Datei nur eine einzige Zeile Code enthalten.

<router-outlet></router-outlet>

Führen Sie schließlich die Anwendung mit dem folgenden Befehl aus und überprüfen Sie, ob Ihre Anwendung korrekt eingerichtet ist. Sobald der Befehl ausgeführt wurde, können Sie die URL localhost: 4200 aufrufen, um sicherzustellen, dass die Dinge ordnungsgemäß eingerichtet sind. Sie sollten den Text „home works!“.

ng serve

Fügen wir nun einen Header hinzu, mit dem wir durch die Seiten navigieren können. Erstellen Sie eine Header-Komponente mit dem folgenden Befehl.

ng g c header --skipTests=true

Als nächstes ändern Sie den Inhalt des Headers.Komponente.html enthält die Navigationselemente.

<div><a ="">Home</a></div><div><a ="">Blog</a></div>

Schließlich haben Sie eine vollständige Anwendung, in der Sie zwei Seiten und eine einfache, nicht gestaltete Navigation haben, mit der Sie zwischen den Seiten wechseln können. Lassen Sie uns nun diese Anwendung aus SEO-Sicht analysieren. Klicken Sie mit der rechten Maustaste auf den Browser und wählen Sie „Seitenquelle anzeigen“. Sie sollten sehen können, wie die Suchmaschinen-Crawler Ihre Seite ohne Javascript sehen würden. Der Code sieht aus wie das folgende Snippet.

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>SeoFriendlyApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"></head><body> <app-root></app-root><script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body></html>

Navigieren Sie nun zur Blog-Seite, führen Sie dieselbe Aktion aus und beachten Sie den Seiteninhalt. Es ist ähnlich. Dies beinhaltet sowohl den Seitentitel als auch den Textkörper. Dies liegt daran, dass Angular Ihr DOM mithilfe von Javascript ändert.

Dynamische Seiten erstellen

Hiermit ist es uns gelungen, dies auf den statischen Seiten zu implementieren. Lassen Sie uns nun unsere Blogs und Blog-Inhaltsseite mit der ButterCMS-API rendern. Dies ermöglicht es uns, SEO sowohl für statische als auch für dynamische Webinhalte durchzuführen. Bevor Sie damit beginnen, registrieren Sie ein kostenloses Testkonto bei ButterCMS, um dynamische Inhalte einfach erstellen zu können.

Um dies zu tun, installieren wir das ButterCMS-Plugin mit NPM.

npm install --save buttercms

Nach der Installation erstellen wir eine Servicedatei im Pfad services/butterCMS.Service.ts und fügen Sie den folgenden Inhalt in die Datei ein.

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

Ersetzen Sie Ihr Token im obigen Code. Diese Servicedatei stellt sicher, dass das Token global in einer einzigen Datei verwaltet wird. Wir können diese Datei überall dort importieren, wo wir die ButterCMS-Dienste verwenden müssen. Lassen Sie uns nun den folgenden Code schnell im Blog implementieren.Komponente.ts-Datei, um eine Liste der Beiträge zu erhalten.

import { Component, OnInit } from '@angular/core';import { butterService } from '../../services/butter-cms.service';@Component({ selector: 'app-blog', templateUrl: './blog.component.html', styleUrls: })export class BlogComponent implements OnInit { posts:any; constructor() { this.fetchPosts(); } private fetchPosts() { butterService.post.list({ page: 1, page_size: 10 }) .then((res) => { console.log('Content from ButterCMS'); console.log(res); this.posts = res.data.data; }); } ngOnInit() { }}

Gehen Sie nun zum Browser und überprüfen Sie die Konsolenausgabe in der Konsole. Sie sollten in der Lage sein, die Liste Ihrer Beiträge in der Browserkonsole zu sehen. Wie Sie im Code-Snippet unten sehen können, zeigt dies zwei der Beiträge, die ich für dieses Tutorial erstellt habe.

Lassen Sie uns nun diesen Inhalt auf der Blogseite rendern. Aktualisieren Sie dazu Ihren Blog.Komponente.HTML-Datei mit dem folgenden Code:

<div *ngIf="posts!=undefined"><div *ngFor="let post of posts.data"> <hr> <h1>{{post.title}}</h1> <div ="post.body"></div></div></div> 

Dadurch werden die Beiträge von Ihrer ButterCMS-Plattform auf die Webseite gerendert. Lassen Sie uns nun verstehen, wie Sie für jede Seite einen benutzerdefinierten Titel und Meta-Tags festlegen.

Festlegen von Titel- und Meta-Tags für Angular SEO

Angular versteht dieses Problem und hat bereits eine Lösung dafür. Um Metadaten hinzuzufügen und den Seitentitel dynamisch zu ändern, müssen Sie nur diese Module von Angular verwenden. Aktualisieren Sie den Code für Ihr Zuhause.Komponente.ts-Datei mit dem unten. Führen Sie ähnliche Änderungen in Ihrem Blog durch.Komponente.ts auch.

import { Component, OnInit } from '@angular/core';import { Meta,Title } from '@angular/platform-browser';@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: })export class HomeComponent implements OnInit { constructor(private meta: Meta,private title: Title) { this.meta.addTags(); this.setTitle('Home Page'); } public setTitle( newTitle: string) { this.title.setTitle( newTitle ); } ngOnInit() { }}

Sobald diese Änderungen gespeichert sind, beachten Sie den Titel auf der Registerkarte Browser. Es ändert sich dynamisch, wenn Sie durch Seiten navigieren. Wenn Sie den Code in der Browserkonsole überprüfen, sehen Sie außerdem, dass auch die entsprechenden Metadaten angehängt wurden. Wenn Sie jedoch die Seitenquelle überprüfen, ist der Inhalt immer noch derselbe. Das heißt, wenn Javascript erlaubt ist, können wir einen dynamischen Titel und Meta generieren, aber nicht ohne.

Daher brauchen wir eine Möglichkeit, den Inhalt dieser gerenderten Seite an den Benutzer zu senden. Dieser Prozess wird als Pre-Rendering des Inhalts bezeichnet und ist entscheidend für ein gutes Angular SEO. Es gibt verschiedene Methoden zum Vorrendern. Im nächsten Abschnitt werden wir einen von ihnen untersuchen.

Die Notwendigkeit des Pre-Renderings verstehen

Pre-Rendering bedeutet im Wesentlichen, dass der HTML-Inhalt der Seite im Voraus kompiliert wird. Dies würde sicherstellen, dass der Titel und die Metadaten der Seite vorhanden sind, wenn sie die Clientseite erreichen. Mit Pre-Rendering können wir den endgültigen HTML-Inhalt für den Crawler verfügbar machen, anstatt leeren HTML-Code verfügbar zu machen.

Implementierung von Pre-Rendering für Angular-Anwendungen

Mit den Upgrades in Angular gibt es jetzt auch eine standardisierte Lösung für das Pre-Rendering. Der Prozess ist ziemlich einfach. Wir würden das Angular Universal Package nutzen, um das Vorrendern der Seiten zu unterstützen. Um das Angular Universal-Paket hinzuzufügen, führen Sie den folgenden Befehl mit dem Projektnamen aus, den Sie beim Erstellen Ihrer Angular-App verwendet haben.

ng add @nguniversal/express-engine --clientProject seo-friendly-app

Dadurch werden einige Dateien im Projekt erstellt und Ihr Projekt so konfiguriert, dass es das Vorrendern mit einem NodeJS-Server unterstützt. Um dies auszuführen, führen Sie den folgenden Befehl aus.

npm run build:ssr && npm run serve:ssr

Dieser Befehl kompiliert, erstellt Ihre statischen Seiten, legt sie im Ordner dist ab und stellt sie bereit, indem ein NodeJS-Server ausgeführt wird. Damit haben wir unser Angular SEO erheblich verbessert, indem wir sichergestellt haben, dass unsere Anwendung SEO-freundlich erstellt und der gesamte Inhalt dynamisch gerendert wird.

Validierung Ihres SEO-freundlichen Angular SPA

Um die Implementierung zu validieren, können Sie zum Browser gehen und die Seitenquelle für jede Seite anzeigen. Jetzt können Sie sehen, dass der Browser den genauen HTML-Inhalt so rendert, wie Sie es erwarten würden. Damit haben wir unsere Implementierung eines einfachen, nicht gestylten Blogs mit einem SEO-freundlichen Rendering auf Angular Framework etabliert. Mit ButterCMS können Sie viel mehr tun, als die SEO-Tags, Meta-Beschreibungen und sogar den Seiteninhalt selbst dynamisch abzurufen. Schauen Sie sich unsere Angular API-Dokumentation an, um mehr zu erfahren.

Melden Sie sich an, um Artikel und Tutorials zu Angular SEO zu erhalten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.