{"id":18033,"date":"2020-05-19T11:51:16","date_gmt":"2020-05-19T11:51:16","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/javascript-rendering-und-die-probleme-fur-seo-im-jahr-2020\/"},"modified":"2020-05-19T11:51:16","modified_gmt":"2020-05-19T11:51:16","slug":"javascript-rendering-und-die-probleme-fur-seo-im-jahr-2020","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/javascript-rendering-und-die-probleme-fur-seo-im-jahr-2020\/","title":{"rendered":"JavaScript-Rendering und die Probleme f\u00fcr SEO im Jahr 2020"},"content":{"rendered":"<p>        <center><\/center><\/p>\n<h3>30-Sekunden-Zusammenfassung:<\/h3>\n<ul>\n<li>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.<\/li>\n<li>Es gibt unz\u00e4hlige Fallstudien, aber ein Unternehmen, das Croud gefunden hat, wurde auf ein hybrides Shopify \/ JS-Framework mit internen Links und \u00fcber JS ausgeliehenen Inhalten migriert. Sie verloren in den n\u00e4chsten 6 Monaten Verkehr im Wert von sch\u00e4tzungsweise 8.000 US-Dollar pro Tag &#8230; rund 1,5 Millionen US-Dollar.<\/li>\n<li>Erfahrene Leser unter uns werden bald das Gef\u00fchl haben, sich in einem vertrauten Gebiet zu befinden.<\/li>\n<li>Croud-Vizepr\u00e4sident f\u00fcr strategische Partnerschaften Anthony Lavall erl\u00e4utert JavaScript-Frameworks, die sich mit den wichtigsten SEO-Elementen befassen.<\/li>\n<\/ul>\n<p>W\u00e4hrend 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\u00e4ufig unter Verwendung eines AJAX-Frameworks (Asynchronous Javascript and XML) in unterschiedlichem Ma\u00dfe.<\/p>\n<p>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\u00e4t bei Anforderungen bieten (nachdem die ersten Bibliotheken, die sie f\u00fcttern, 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\u00fcr die kein herk\u00f6mmlicher serverbasierter URL-Aufruf erforderlich ist.<\/p>\n<p>Mit zunehmender Funktionalit\u00e4t und Implementierungsf\u00e4higkeit entstehen Kosten: die Frage der SEO-Leistung. Ich bezweifle, dass SEO-Lesungen dieser Frage fremd sind. M\u00f6glicherweise sind Sie jedoch bez\u00fcglich einer Antwort immer noch im Dunkeln.<\/p>\n<h2>Warum ist ein Problem?<\/h2>\n<p>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\u00fcr die langfristige Gesch\u00e4ftsleistung verantwortlich. Einer der Hauptgr\u00fcnde, 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\u00e4hlige Fallstudien, aber ein Unternehmen, das wir gefunden haben, wurde auf ein hybrides Shopify \/ JS-Framework mit internen Links und \u00fcber JS ausgeliehenen Inhalten migriert. Sie verloren in den n\u00e4chsten 6 Monaten Verkehr im Wert von sch\u00e4tzungsweise 8.000 US-Dollar pro Tag &#8230; rund 1,5 Millionen US-Dollar.<\/p>\n<h2>Was ist das Problem?<\/h2>\n<p>Es gibt viele Probleme. SEOs versuchen bereits, eine Vielzahl von Signalen des am st\u00e4rksten investierten Handelsalgorithmus zu verarbeiten, der jemals erstellt wurde (Google\u2026 nur f\u00fcr den Fall). Der \u00dcbergang von einer traditionellen Website mit Serverausleihe (denken Sie an Wikipedia) zu einer zeitgem\u00e4\u00dfen Umgebung ist m\u00f6glicherweise mit SEO-Herausforderungen verbunden. Einige davon sind:<\/p>\n<ul>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\n<p>Crawlen, Rendern und Indizieren von Suchmaschinen-Bots &#8211; Suchmaschinen-Crawler wie Googlebot haben ihren Crawling-Prozess so angepasst, dass er JavaScript-Rendering (Stand 2010) enth\u00e4lt, um den Code auf AJAX-Webseiten vollst\u00e4ndig zu verstehen . Wir wissen, dass Google das Verst\u00e4ndnis f\u00fcr komplexes JavaScript verbessert. Andere Such-Crawler sind dies m\u00f6glicherweise nicht. Dies ist jedoch nicht nur eine Frage des Verst\u00e4ndnisses. Das Verfolgen des gesamten Webs ist keine leichte Aufgabe, und selbst die Ressourcen von Google sind begrenzt. Sie m\u00fcssen entscheiden, ob es sich lohnt, eine Site zu crawlen und zu rendern, basierend auf Annahmen, die lange bevor JS gefunden und pr\u00e4sentiert werden kann (Metriken wie eine gesch\u00e4tzte Anzahl von Gesamtseiten, Domain-Verlauf, WhoIs-Daten, Domain-Autorit\u00e4t, usw.) .\n<\/p>\n<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"wp-image-140983\" style=\"width: 625px; position: relative; display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px;\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/Representacion-de-JavaScript-y-los-problemas-para-SEO-en-2020.jpg\"><\/p>\n<p>Google-Crawling- und Rendering-Prozess &#8211; zweite Verarbeitungs- \/ Indizierungsphase (angek\u00fcndigt in Google I \/ O 2018)<\/p>\n<ul>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\n<p>Geschwindigkeit: eines der gr\u00f6\u00dften Hindernisse f\u00fcr AJAX-Anwendungen. Google crawlt Webseiten ohne Zwischenspeichern, sodass das umst\u00e4ndliche 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\u00fchren und zu verarbeiten, im Vergleich zu einer HTML-Seite mit weniger Ressourcen.\n<\/p>\n<\/li>\n<li style=\"font-weight: 400; font-style: normal; text-decoration: none; vertical-align: baseline;\">\n<p>Ressourcen und Rendering: Bei herk\u00f6mmlichem 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\u00e4nkungen, aber man kann mit Sicherheit sagen, dass der clientseitige Code (und die mehreren Bibliotheken \/ Ressourcen, aus denen der Code abgeleitet werden k\u00f6nnte) das finalisierte DOM komplexer macht, was bedeutet, dass beide mehr CPU-Ressourcen ben\u00f6tigen Durchsuchen Sie Crawler nach Clientger\u00e4ten. . Dies ist einer der wichtigsten Gr\u00fcnde, warum ein komplexes JS-Framework nicht bevorzugt wird. Es wird jedoch oft \u00fcbersehen.\n<\/p>\n<\/li>\n<\/ul>\n<p>Bei allen oben genannten Punkten vor diesem Satz wurde davon ausgegangen, dass diese AJAX-Seiten ohne R\u00fccksicht auf SEO erstellt wurden. Dies ist etwas unfair gegen\u00fcber der modernen Webdesign-Agentur oder dem internen Entwickler. Normalerweise gibt es eine Art \u00dcberlegung, um die negativen Auswirkungen auf SEO zu mildern (wir werden uns dies genauer ansehen). Erfahrene Leser unter uns werden nun das Gef\u00fchl haben, ein vertrautes Gebiet zu finden. Ein Gebiet, das viele E-Mail-Diskussionen zwischen Kunden-, Entwicklungs-, Design- und SEO-Teams ausgel\u00f6st hat, die sich darauf beziehen, ob eine solche Migration in die Rangliste der organischen Tanks geht (leider oft).<\/p>\n<p>Das Problem ist, dass die L\u00f6sungen zum Erstellen von AJAX-Anwendungen, die f\u00fcr SEO-Zwecke eher wie serverbasiertes HTML funktionieren, in Streitigkeiten verwickelt sind. haupts\u00e4chlich im Zusammenhang mit seiner Wirksamkeit. Wie testen wir die Wirksamkeit von etwas f\u00fcr SEO? Wir m\u00fcssen SERP-\u00c4nderungen implementieren und analysieren. Die Ergebnisse von Migrationen zu JavaScript-Frameworks werden wiederholt mit einem R\u00fcckgang des Datenverkehrs in Verbindung gebracht. Werfen Sie einen Blick auf die w\u00f6chentlichen Geschichten, die die von John Mueller gehosteten &#8220;JS-Sites in der Sucharbeitsgruppe&#8221; erreichen, um Beweise zu erhalten.<\/p>\n<p>Werfen wir einen Blick auf einige der h\u00e4ufigsten Abhilfema\u00dfnahmen f\u00fcr SEO in Bezug auf AJAX.<\/p>\n<h2>Verschiedene L\u00f6sungen f\u00fcr die AJAX SEO-Minderung<\/h2>\n<h3>1. Universal \/ Isomorphic JS<\/h3>\n<p>Isomorphes JavaScript, AKA Universal JavaScript, beschreibt JS-Anwendungen, die sowohl auf dem Client als auch auf dem Server ausgef\u00fchrt werden, da der Client oder Server das ausf\u00fchren kann <\/p>\n   ","protected":false},"excerpt":{"rendered":"<p>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\u00e4hlige Fallstudien, aber ein Unternehmen, das Croud gefunden hat, wurde auf ein hybrides Shopify \/ JS-Framework mit internen Links und \u00fcber JS ausgeliehenen Inhalten [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":18034,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/Representacion-de-JavaScript-y-los-problemas-para-SEO-en-2020.png","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/18033"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=18033"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/18033\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/18034"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=18033"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=18033"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=18033"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}