JavaScript-Rendering und die Probleme für SEO im Jahr 2020

30-Sekunden-Zusammenfassung:

• Jeder, der im Jahr 2020 an Unternehmens-SEO arbeitet, wird dieses Szenario der Webarchitektur irgendwann bei einem Kunden erlebt haben. Frames wie React, Vue und Angular erleichtern die Webentwicklung.
• Es gibt unzählige Fallstudien, aber ein Unternehmen, das Croud gefunden hat, wurde auf ein hybrides Shopify / JS-Framework mit internen Links und über JS ausgeliehenen Inhalten migriert. Sie verloren in den nächsten 6 Monaten Verkehr im Wert von schätzungsweise 8.000 US-Dollar pro Tag … rund 1,5 Millionen US-Dollar.
• Erfahrene Leser unter uns werden bald das Gefühl haben, sich in einem vertrauten Gebiet zu befinden.
• Croud-Vizepräsident für strategische Partnerschaften Anthony Lavall erläutert JavaScript-Frameworks, die sich mit den wichtigsten SEO-Elementen befassen.

Während sie in den letzten drei Jahren das SEO-Team von Croud in New York leiteten, haben 60% unserer Kunden irgendeine Form der Migration durchlaufen. Weitere ~ 30% sind zu oder von einem SPA (Single Page Application) gewechselt, häufig unter Verwendung eines AJAX-Frameworks (Asynchronous Javascript and XML) in unterschiedlichem Maße.

Jeder, der im Jahr 2020 an Unternehmens-SEO arbeitet, wird dieses Szenario der Webarchitektur irgendwann bei einem Kunden erlebt haben. Frames wie React, Vue und Angular erleichtern die Webentwicklung. Dies gilt insbesondere dann, wenn Sie dynamische Webanwendungen erstellen, die eine relativ schnelle Interaktivität bei Anforderungen bieten (nachdem die ersten Bibliotheken, die sie füttern, geladen wurden, ist Google Mail ein gutes Beispiel), indem Sie die Leistung des modernen Browsers verwenden, um den Code von der Seite zu rendern Client (JavaScript) Verwenden Sie dann Web-Worker, um Netzwerkanforderungsfunktionen bereitzustellen, für die kein herkömmlicher serverbasierter URL-Aufruf erforderlich ist.

Mit zunehmender Funktionalität und Implementierungsfähigkeit entstehen Kosten: die Frage der SEO-Leistung. Ich bezweifle, dass SEO-Lesungen dieser Frage fremd sind. Möglicherweise sind Sie jedoch bezüglich einer Antwort immer noch im Dunkeln.

Warum ist ein Problem?

Einnahmen in Form von verlorenem organischem Verkehr durch verlorene organische Klassifikationen. So einfach ist das. Webentwickler, die JavaScript-Frameworks (JS) empfohlen haben, sind im Allgemeinen nicht direkt für die langfristige Geschäftsleistung verantwortlich. Einer der Hauptgründe, warum SEO im Jahr 2020 existiert, sollte darin bestehen, die daraus resultierenden strategischen Fehler zu mindern. Organischer Verkehr wird oft als gegeben angesehen und nicht als wichtig (oder kontrollierbar) angesehen, und hier treten massive Probleme auf. Es gibt unzählige Fallstudien, aber ein Unternehmen, das wir gefunden haben, wurde auf ein hybrides Shopify / JS-Framework mit internen Links und über JS ausgeliehenen Inhalten migriert. Sie verloren in den nächsten 6 Monaten Verkehr im Wert von schätzungsweise 8.000 US-Dollar pro Tag … rund 1,5 Millionen US-Dollar.

Was ist das Problem?

Es gibt viele Probleme. SEOs versuchen bereits, eine Vielzahl von Signalen des am stärksten investierten Handelsalgorithmus zu verarbeiten, der jemals erstellt wurde (Google… nur für den Fall). Der Übergang von einer traditionellen Website mit Serverausleihe (denken Sie an Wikipedia) zu einer zeitgemäßen Umgebung ist möglicherweise mit SEO-Herausforderungen verbunden. Einige davon sind:

• Crawlen, Rendern und Indizieren von Suchmaschinen-Bots – Suchmaschinen-Crawler wie Googlebot haben ihren Crawling-Prozess so angepasst, dass er JavaScript-Rendering (Stand 2010) enthält, um den Code auf AJAX-Webseiten vollständig zu verstehen . Wir wissen, dass Google das Verständnis für komplexes JavaScript verbessert. Andere Such-Crawler sind dies möglicherweise nicht. Dies ist jedoch nicht nur eine Frage des Verständnisses. Das Verfolgen des gesamten Webs ist keine leichte Aufgabe, und selbst die Ressourcen von Google sind begrenzt. Sie müssen entscheiden, ob es sich lohnt, eine Site zu crawlen und zu rendern, basierend auf Annahmen, die lange bevor JS gefunden und präsentiert werden kann (Metriken wie eine geschätzte Anzahl von Gesamtseiten, Domain-Verlauf, WhoIs-Daten, Domain-Autorität, usw.) .

Google-Crawling- und Rendering-Prozess – zweite Verarbeitungs- / Indizierungsphase (angekündigt in Google I / O 2018)

• Geschwindigkeit: eines der größten Hindernisse für AJAX-Anwendungen. Google crawlt Webseiten ohne Zwischenspeichern, sodass das umständliche erste Laden von Apps mit nur einer Seite problematisch sein kann. Die Geschwindigkeit kann auf verschiedene Arten definiert werden. In diesem Fall geht es jedoch um die Zeit, die erforderlich ist, um alle Ressourcen auf einer Seite mit viel JavaScript kritisch auszuführen und zu verarbeiten, im Vergleich zu einer HTML-Seite mit weniger Ressourcen.

• Ressourcen und Rendering: Bei herkömmlichem serverseitigem Code wird das DOM (Document Object Model) im Wesentlichen gerendert, sobald das CSSOM (CSS Object Model) oder einfacher gesagt das DOM erstellt wurde Nach dem Durchsuchen des Quellcodes ist keine weitere Manipulation erforderlich. Dies hat einige Einschränkungen, aber man kann mit Sicherheit sagen, dass der clientseitige Code (und die mehreren Bibliotheken / Ressourcen, aus denen der Code abgeleitet werden könnte) das finalisierte DOM komplexer macht, was bedeutet, dass beide mehr CPU-Ressourcen benötigen Durchsuchen Sie Crawler nach Clientgeräten. . Dies ist einer der wichtigsten Gründe, warum ein komplexes JS-Framework nicht bevorzugt wird. Es wird jedoch oft übersehen.

Bei allen oben genannten Punkten vor diesem Satz wurde davon ausgegangen, dass diese AJAX-Seiten ohne Rücksicht auf SEO erstellt wurden. Dies ist etwas unfair gegenüber der modernen Webdesign-Agentur oder dem internen Entwickler. Normalerweise gibt es eine Art Überlegung, um die negativen Auswirkungen auf SEO zu mildern (wir werden uns dies genauer ansehen). Erfahrene Leser unter uns werden nun das Gefühl haben, ein vertrautes Gebiet zu finden. Ein Gebiet, das viele E-Mail-Diskussionen zwischen Kunden-, Entwicklungs-, Design- und SEO-Teams ausgelöst hat, die sich darauf beziehen, ob eine solche Migration in die Rangliste der organischen Tanks geht (leider oft).

Das Problem ist, dass die Lösungen zum Erstellen von AJAX-Anwendungen, die für SEO-Zwecke eher wie serverbasiertes HTML funktionieren, in Streitigkeiten verwickelt sind. hauptsächlich im Zusammenhang mit seiner Wirksamkeit. Wie testen wir die Wirksamkeit von etwas für SEO? Wir müssen SERP-Änderungen implementieren und analysieren. Die Ergebnisse von Migrationen zu JavaScript-Frameworks werden wiederholt mit einem Rückgang des Datenverkehrs in Verbindung gebracht. Werfen Sie einen Blick auf die wöchentlichen Geschichten, die die von John Mueller gehosteten “JS-Sites in der Sucharbeitsgruppe” erreichen, um Beweise zu erhalten.

Werfen wir einen Blick auf einige der häufigsten Abhilfemaßnahmen für SEO in Bezug auf AJAX.

Verschiedene Lösungen für die AJAX SEO-Minderung

1. Universal / Isomorphic JS

Isomorphes JavaScript, AKA Universal JavaScript, beschreibt JS-Anwendungen, die sowohl auf dem Client als auch auf dem Server ausgeführt werden, da der Client oder Server das ausführen kann