The playground

More information here

Angular Universal: Was Sie für SEO wissen müssen

Melden Sie sich für unsere täglichen Rückblicke auf die sich ständig verändernde Suchmaschinenmarketing-Landschaft an.Hinweis: Mit dem Absenden dieses Formulars erklären Sie sich mit den Bedingungen von Third Door Media einverstanden. Wir respektieren Ihre Privatsphäre. John E Lincoln am 1. Februar 2019 um 9:53 Uhr Kategorien: Alle Dinge SEO Spalte, Kanal: SEO Wenn Sie Angular verwenden, […]

Melden Sie sich für unsere täglichen Rückblicke auf die sich ständig verändernde Suchmaschinenmarketing-Landschaft an.Hinweis: Mit dem Absenden dieses Formulars erklären Sie sich mit den Bedingungen von Third Door Media einverstanden. Wir respektieren Ihre Privatsphäre.

John E Lincoln am 1. Februar 2019 um 9:53 Uhr

  • Kategorien: Alle Dinge SEO Spalte, Kanal: SEO
  • Wenn Sie Angular verwenden, um Ihre Website mit Strom zu versorgen, müssen Sie eine zusätzliche Hürde nehmen, wenn es um SEO geht. Glücklicherweise macht es Angular Universal leicht, darüber zu springen.

    Denken Sie daran, dass „einfach“ hier ein relativer Begriff ist. Es ist ziemlich viel technische Zauberei beteiligt.

    Sie werden mit ziemlicher Sicherheit ein Entwicklungsteam einbeziehen müssen.

    Sobald das fertige Produkt geliefert ist, wird Ihre Website optimierte Seiten bereitstellen, die Suchmaschinen leicht finden und indizieren können.

    In diesem Handbuch erkläre ich Angular Universal und warum es für Vermarkter wichtig ist.

    Das SEO-Problem

    Angular ist ein fantastisches Framework für die Bereitstellung modularer, benutzerfreundlicher Web-Apps. Leider ist es ein bisschen feindlich gegenüber SEO.

    Das hat zwei Gründe.

    Erstens verlässt sich Angular stark auf Skripte, um Inhalte zu liefern. Infolgedessen „sehen“ einige Such-Bots den Inhalt, den ein Benutzer sieht, nicht.

    Werfen Sie einen Blick auf die Angular Universal-Dokumentation. Diese Seite wird, wenig überraschend, mit Angular gerendert.

    Wenn Sie nach unten scrollen, sehen Sie ziemlich viel Inhalt. Man könnte meinen, es ist alles indexierbar.

    Nicht unbedingt. Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Seitenquelle anzeigen“ aus dem angezeigten Kontextmenü.

    Es gibt nur 100 Zeilen Quellcode. Nirgendwo dort sehen Sie den Inhalt, den Sie gesehen haben, als Sie die Seite normal angesehen haben.

    Das ist, kurz gesagt, das Problem mit Angular. Menschliche Besucher sehen den Inhalt, aber Such-Bots sehen die Quelle.

    Und die Quelle hat den Inhalt nicht!

    Es gibt ein weiteres SEO-Problem: Geschwindigkeit. Angular-Apps werden oft nicht schnell geladen.

    Einige Websites zeigen für einige Sekunden einen leeren Bildschirm an, bevor die Startseite angezeigt wird. Das kann dazu führen, dass Besucher auf Kaution gehen, wenn sie ungeduldig werden.

    Die Geschwindigkeit der Website ist ein mobiler Rankingfaktor, sodass Ihr Rang beeinträchtigt wird, wenn Ihre Website auf mobilen Plattformen nicht schnell geladen wird.

    Aber Google sagt…

    Google behauptet, dass sein Bot skriptgesteuerte Websites indizieren kann. Es gibt viele Beweise dafür, aber das bedeutet nicht, dass Sie bei der Optimierung einer Angular-Site vermeiden können, die Extrameile zu gehen.

    Für den Anfang ist Google nicht die einzige Suchmaschine in der Stadt. Wenn Sie möchten, dass Ihre Angular-App bei Bing und DuckDuckGo einen Rang einnimmt, müssen Sie Schritte unternehmen, um dies zu erreichen.

    Als nächstes kann es sein, dass Google einige Angular-Sites indizieren kann, aber nicht Ihre. Nicht alle Angular-Apps sind gleich. Ihre könnte die Ausnahme vom Indexierungsalgorithmus von Google sein.

    Meiner Erfahrung nach verlieren Websites, die von HTML zu Angular wechseln, meistens massiven Traffic von Suchmaschinen. Tatsächlich hatte ich im letzten Jahr drei Kunden, bei denen wir die Site nach dem Ausfall von Angular wieder reparieren mussten.

    Es gibt Lösungen

    Glücklicherweise gibt es Möglichkeiten, Ihre Angular-Site SEO-freundlich zu gestalten.

    Eine der beliebtesten Optionen ist das dynamische Rendering. Dann verwenden Sie ein Tool wie Puppeteer, um statische HTML-Dateien zu generieren, die Webcrawler leichter verwenden können.Konfigurieren Sie dann Ihren Webserver so, dass Such-Bots auf die vorgerenderten Seiten geleitet werden, während menschliche Besucher in der normalen Angular-App navigieren.

    Das ist eine anständige Lösung, aber das Geschwindigkeitsproblem wird immer noch nicht behoben. Dafür werden Sie wahrscheinlich mit Angular Universal gehen wollen.

    Was ist Angular Universal?

    Angular Universal führt Ihre Web-App auf dem Server aus, anstatt sie im Browser auszuführen.

    Das ist ein wichtiger Unterschied. Normalerweise sind Angular-Apps clientseitige Anwendungen.

    Das Problem für Such-Bots ist, dass sie nicht immer clientseitigen Code „verarbeiten“, wie es Ihr Browser tut, wenn er Ihnen eine Webseite bereitstellt. Aus diesem Grund haben Sie eine Diskrepanz zwischen der Angular Universal-Dokumentationsseite und ihrem Quellcode festgestellt.

    Angular Universal verarbeitet serverseitiges Rendering (SSR). Es rendert den HTML- und CSS-Inhalt, der dem Benutzer im Voraus angezeigt wird, vorab.

    Das bedeutet, dass ein Benutzer eine statische HTML-Seite anstelle von clientseitigem Code lädt. Infolgedessen wird die Seite schneller geladen.

    Da es sich um statisches HTML handelt, können Such-Bots den Inhalt indizieren.

    Jeder gewinnt.

    Warum es wichtig ist

    Wenn Sie sich für digitales Marketing interessieren, wissen Sie bereits, dass ein Großteil des Kampfes darin besteht, online bekannt zu werden. Aus diesem Grund wenden Sie sich an Influencer, veröffentlichen Updates in sozialen Medien und optimieren Ihre Website, um ein gutes Ranking zu erzielen.

    Einfach ausgedrückt: Ihre Website kann nicht rangieren, wenn sie nicht indiziert werden kann. Wenn Angular Ihre Website mit Strom versorgt, müssen Sie zusätzliche Schritte unternehmen, um sicherzustellen, dass der Inhalt in Suchmaschinen angezeigt wird.

    Deshalb benötigen Sie eine universelle Angular-Lösung.

    Der Nachteil ist natürlich, dass es Geld kosten wird. Sie müssen ein qualifiziertes Entwicklungsteam einstellen, um SSR zu Ihrer Website hinzuzufügen.

    Das ist ein Aufwand, der sich im Laufe der Zeit mehr als amortisieren sollte, wenn Ihre Website bei wichtigen Suchbegriffen, die sich auf Ihre Nische beziehen, gut abschneidet.

    So führen Sie eine Angular-App auf Angular Universal aus

    Wenn Sie jemand sind, der sich gerne die Hände mit Code schmutzig macht oder einfach nur Entwicklungskosten sparen möchte, können Sie eine serverseitige App selbst bereitstellen.

    Bevor Sie das tun, ist es am besten, wenn Sie ein grundlegendes Verständnis von Angular, der Befehlszeilenschnittstelle (CLI), TypeScript und Webservern haben. Andernfalls werden Sie wahrscheinlich kämpfen.

    Die Schritte zum Bereitstellen einer Angular Universal App lauten wie folgt:

    • Installieren Sie die erforderlichen Abhängigkeiten
    • Aktualisieren Sie die Angular-App
    • Verwenden Sie die CLI, um ein universelles Bundle zu erstellen
    • Richten Sie den Server so ein, dass ein universelles Bundle ausgeführt wird
    • Führen Sie die App auf dem Server aus

    In diesen fünf Schritten ist einiges los, daher werde ich sie nacheinander in den folgenden Abschnitten behandeln.

    Installieren Sie die Abhängigkeiten

    Wenn Sie Erfahrung mit Angular haben, kennen Sie sich bereits mit Node aus.js. Das ist die Laufzeit, die den TypeScript-Code in eine JavaScript-App transpiliert.

    Knoten.js wird mit einem Paketmanager geliefert, der einfallslos Node Package Manager oder kurz npm genannt wird. Sie werden das verwenden, um die Abhängigkeiten zu installieren.

    Starten Sie Ihr Befehlszeilenfenster und führen Sie den folgenden Code aus:

    npm install –save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader

    Geben Sie ihm ein paar Momente (oder viele Momente), um alles zu installieren.

    Aktualisieren Sie Ihre Angular-App

    Als nächstes müssen Sie Ihre Angular-App für die universelle Bereitstellung vorbereiten. Das beinhaltet vier Schritte:

    • Universelle Unterstützung hinzufügen. Öffnen Sie Ihr Root-Modul (normalerweise AppModule) und fügen Sie dem BrowserModule-Import eine Anwendungs-ID hinzu. Sie tun dies im Abschnitt „Importe“ direkt unter der @NgModule Deklaration.
    • Erstellen Sie das Server-Root-Modul.Als nächstes müssen Sie ein neues Modul mit dem Namen AppServerModule erstellen. Stellen Sie sicher, dass ServerModule aus der Plattform-Server-Abhängigkeit importiert wird, die Sie im vorherigen Schritt hinzugefügt haben.
    • Erstellt die Hauptdatei. Sie benötigen eine Hauptdatei für Ihr Universal Bundle. Erstellen Sie dies im Stammverzeichnis (im Ordner src) und exportieren Sie die AppServerModule-Klasse aus dieser Datei.
    • Erstellt eine Konfigurationsdatei. Die AppServerModule-Klasse benötigt eine Konfigurationsdatei. Erstellen Sie eine im JSON-Format. Es sollte ungefähr so aussehen:

    Erstellen Sie ein neues Build-Ziel

    Ihr Angular-Quellverzeichnis sollte eine Datei namens angular enthalten.json. Sie müssen diese Datei im Abschnitt „Architekt“ aktualisieren.

    Es wird ungefähr so aussehen:

    „Architekt“: {
    „build“: { … }
    „server“: {
    „builder“: „@angular-devkit/build-angular:server“,
    „Optionen“: {
    „Ausgabepfad“: „dist/ mein-Projekt-server“,
    „main“: „src/main.Server.ts“,
    „tsConfig“: „src/tsconfig.Server.json“
    }
    }
    }

    Beachten Sie das Attribut „builder“ vier Zeilen nach unten. Der Wert nach dem Doppelpunkt („server“) ist der Name des Servers. Sie können das aktualisieren, wenn Sie es etwas anderes nennen möchten.

    Jetzt können Sie Ihre App erstellen. Angenommen, Sie haben den Server mit dem Namen „server“ beibehalten, gehen Sie einfach zu Ihrer Befehlszeile und geben Sie Folgendes ein:

    ng run my-project:server

    Sie sollten eine Ausgabe sehen, die ungefähr so aussieht:

    Datum: 2018-12-12T12:42:09.601Z
    Hash: 1caced0e9434007fd7ac
    Zeit: 4122ms
    Chunk {0} Haupt.js (main) 9.49 kB
    Block {1} Stile.css (styles) 0 bytes

    Server einrichten

    Als nächstes müssen Sie einen Universalserver einrichten, um das Bundle auszuführen. Auf diese Weise serialisieren Sie die App und geben sie an den Browser zurück.

    Um dies zu ermöglichen, erstellen Sie eine neue Datei namens server.ts. In dieser Datei definieren Sie Ihre App Engine.

    Die Details dieses Codes liegen etwas außerhalb des Umfangs dieses Tutorials. Schauen Sie sich das Beispiel in den Angular Universal-Dokumenten an.

    Führen Sie die App auf dem Server aus

    Nach all dem sind Sie endlich an einem Punkt, an dem Sie die App auf dem Server ausführen können.

    Richten Sie dazu ein Webpack ein, das den Server verwaltet.ts-Datei, die Sie im vorherigen Schritt erstellt haben.

    Benennen Sie die Konfigurationsdatei webpack.Server.config.js. Überprüfen Sie erneut die Angular Universal-Dokumente auf die genaue Art des Codes, der in die Datei gehört. Möglicherweise müssen Sie diesen Code an Ihre eigene Namenskonvention anpassen.

    Sobald Sie mit der Datei fertig sind, haben Sie zwei Ordner unter dem Ordner dist: Browser und Server.

    Um den Servercode auszuführen, geben Sie einfach Folgendes in die Befehlszeile ein:

    node dist/server.js

    Herzlichen Glückwunsch! Sie führen jetzt serverseitigen Code aus.

    Einpacken

    Obwohl Angular es Entwicklern ermöglicht, schnell qualitativ hochwertige Anwendungen zu erstellen, spielt es nicht immer gut mit den Suchmaschinen-Bots.

    Glücklicherweise kann Angular Universal Angular-App-Seiten vorab als statisches HTML rendern, sodass sie auffindbar und indexierbar sind. Sie werden auch schneller geladen.

    Es war immer meine Empfehlung, eine HTML-Basis zu haben und Angular zu verwenden, um die anderen Elemente auf der Seite zu liefern. Ich mache diese Empfehlung seit 2010 zu allem, was mit JavaScript zu tun hat. Dieser Prozess der Angular Universal ist das gleiche Prinzip. Ich kann nicht sagen, dass Sie viele Websites Angular und JavaScript Redesigns zerstört haben. Seien Sie vorsichtig mit Ihrem und lassen Sie es vor dem Start immer von einem SEO-Unternehmen überprüfen.

    Melden Sie sich für unsere täglichen Rückblicke auf die sich ständig verändernde Suchmaschinenmarketing-Landschaft an.Hinweis: Mit dem Absenden dieses Formulars erklären Sie sich mit den Bedingungen von Third Door Media einverstanden. Wir respektieren Ihre Privatsphäre.

    Über den Autor

    John E Lincoln

    John Lincoln ist CEO von Ignite Visibility, einer Agentur für digitales Marketing und Inc. 5000 Unternehmen. Lincoln wird durchweg als einer der besten Marketingexperten der Branche bezeichnet. Er wurde mit der Auszeichnung „Search Marketer of the Year“ von Search Engine Land ausgezeichnet und zum # 1 SEO Consultant in den USA ernannt Clutch.co , am meisten bewunderter CEO und 40 unter 40. Lincoln hat zwei Bücher (The Forecaster Method und Digital Influencer) geschrieben und zwei Filme (SEO: The Movie und Social Media Marketing: The Movie) über digitales Marketing gedreht.

    Schreibe einen Kommentar

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