Wie crawlt der Google-Crawler JavaScript?

Wir wissen, dass inländische Browser und Suchtools Crawler verwenden, um Webseiteninformationen zu crawlen. Wie crawlt der Google-Crawler also Javascript? Lassen Sie uns heute eine ausführliche Studie und Diskussion mit Ihnen führen.

Wir haben getestet, wie der Crawler von Google JavaScript crawlt, und hier ist, was wir gelernt haben.

Denken Sie, dass Google nicht mit JavaScript umgehen kann? Denken Sie noch einmal darüber nach. Audette Audette teilte die Ergebnisse einer Reihe von Tests mit, in denen er und seine Kollegen testeten, welche Arten von JavaScript-Funktionen von Google gecrawlt und eingebunden werden würden.

Lange Rede, kurzer Sinn

1 Wir haben eine Reihe von Tests durchgeführt und bestätigt, dass Google JavaScript auf verschiedene Arten ausführen und einbinden kann. Wir haben außerdem bestätigt, dass Google die gesamte Seite rendern und das DOM lesen kann, sodass dynamisch generierte Inhalte einbezogen werden können.

2. SEO-Signale im DOM (Seitentitel, Meta-Beschreibung, Canonical-Tag, Meta-Robots-Tag usw.) werden berücksichtigt. Auch dynamisch in das DOM eingefügte Inhalte können gecrawlt und eingebunden werden. Darüber hinaus kann das DOM in manchen Fällen sogar Vorrang vor HTML-Quellcodeanweisungen haben. Obwohl dies mehr Arbeit erfordert, ist es eines von mehreren, die wir getestet haben.

Einführung: Google führt JavaScript aus und liest DOM

Bereits 2008 hat Google JavaScript erfolgreich gecrawlt, allerdings war dies wahrscheinlich auf eine bestimmte Art und Weise beschränkt.

Was heute klar ist, ist, dass Google nicht nur in der Lage war, die von ihnen gecrawlten und eingebundenen JavaScript-Typen strategisch zu gestalten, sondern auch erhebliche Fortschritte (insbesondere in den letzten 12 bis 18 Monaten) bei der Darstellung des gesamten Webs gemacht hat. ).

Bei Merkle wollte unser SEO-Technikteam besser verstehen, welche Arten von JavaScript-Ereignissen Google-Crawler crawlen und einschließen können. Nach der Recherche fanden wir verblüffende Ergebnisse und bestätigten, dass Google nicht nur verschiedene JavaScript-Ereignisse ausführen, sondern auch dynamisch generierte Inhalte einbinden kann. Wie? Google kann das DOM lesen.

Was ist DOM?

Viele SEO-Leute verstehen nicht, was Document Object Model (DOM) ist.

Was passiert, wenn der Browser die Seite anfordert und wie wird das DOM beteiligt?

Bei Verwendung in einem Webbrowser ist das DOM im Wesentlichen eine Anwendungsprogrammschnittstelle oder API zum Markieren und Strukturieren von Daten (wie HTML und XML). Über diese Schnittstelle können Webbrowser diese zu Dokumenten zusammenfassen.

DOM definiert auch, wie Strukturen abgerufen und betrieben werden. Obwohl das DOM eine sprachneutrale API ist (nicht an eine bestimmte Programmiersprache oder Bibliothek gebunden), wird es häufig in Webanwendungen für JavaScript und dynamische Inhalte verwendet.

DOM stellt die Schnittstelle oder „Brücke“ dar, die eine Webseite mit einer Programmiersprache verbindet. Das Ergebnis der HTML-Analyse und der Ausführung von JavaScript ist das DOM. Der Inhalt einer Webseite ist nicht (nicht nur) der Quellcode, sondern das DOM. Das macht es sehr wichtig.

Wie JavaScript über die DOM-Schnittstelle funktioniert.

Wir waren begeistert, als wir herausfanden, dass Google das DOM lesen und Signale sowie dynamisch eingefügte Inhalte wie Titel-Tags, Seitentext, Head-Tags und Meta-Anmerkungen (z. B. rel = canonical) analysieren kann. Alle Einzelheiten können dort nachgelesen werden.

Diese Reihe von Tests und Ergebnissen

Da wir wissen möchten, welche Art von JavaScript-Funktionen gecrawlt und eingebunden werden, haben wir eine Reihe von Tests allein für Google Crawler erstellt. Stellen Sie sicher, dass URL-Aktivitäten unabhängig voneinander verstanden werden können, indem Sie Kontrollen erstellen. Lassen Sie uns im Folgenden einige interessante Testergebnisse im Detail aufschlüsseln. Sie sind in 5 Kategorien unterteilt:

JavaScript Redirect

JavaScript Link

Dynamisches Einfügen von Inhalten

Dynamisches Einfügen von Metadaten und Seitenelementen

Ein wichtiges Beispiel mit rel = „nofollow“

Beispiel: Eine Seite, mit der die Fähigkeit des Google-Crawlers getestet wird, JavaScript zu verstehen.

1. JavaScript-Umleitung

Wir haben zunächst gängige JavaScript-Umleitungen getestet. Was werden die Ergebnisse sein, wenn URLs auf unterschiedliche Weise ausgedrückt werden? Wir haben das window.location-Objekt für zwei Tests ausgewählt: Test A ruft window.location mit einer absoluten Pfad-URL auf, während Test B einen relativen Pfad verwendet.

Ergebnis: Die Weiterleitung wurde von Google schnell verfolgt. Aus Indexierungssicht werden sie als 301 interpretiert – die finale URL ersetzt die Weiterleitungs-URL in der Google-Indexierung.

In nachfolgenden Tests haben wir genau denselben Inhalt auf einer maßgeblichen Webseite verwendet, um eine JavaScript-Weiterleitung zu einer neuen Seite derselben Website durchzuführen. Und die Original-URL wird auf der ersten Seite der Top-Suchanfragen von Google platziert.

Ergebnis: Tatsächlich wurde die Weiterleitung von Google verfolgt, aber die Originalseite wurde nicht indexiert. Die neue URL wird eingefügt und sofort an derselben Position auf derselben Abfrageseite gerankt. Das war für uns überraschend und scheint darauf hinzudeuten, dass sich JavaScript-Weiterleitungen aus Ranking-Sicht (manchmal) ähnlich wie permanente 301-Weiterleitungen verhalten.

Wenn Ihr Kunde das nächste Mal eine JavaScript-Umleitung für seine Website durchführen möchte, müssen Sie möglicherweise nicht antworten oder antworten: „Bitte nicht“. Denn es scheint eine Beziehung zwischen dem Transferranking und dem Signal zu geben. Diese Schlussfolgerung wird durch Zitate aus den Google-Richtlinien gestützt:

Die Verwendung von JavaScript zur Weiterleitung von Benutzern kann eine rechtliche Praxis sein. Wenn Sie beispielsweise angemeldete Benutzer auf eine interne Seite umleiten, können Sie dies mithilfe von JavaScript tun. Stellen Sie bei der Überprüfung von JavaScript oder anderen Umleitungsmethoden sicher, dass Ihre Website unseren Richtlinien entspricht und deren Absicht berücksichtigt. Denken Sie daran, dass 301-Weiterleitungen zu Ihrer Website am besten sind. Wenn Sie jedoch keinen Zugriff auf den Server Ihrer Website haben, können Sie hierfür JavaScript-Weiterleitungen verwenden.

2. JavaScript-Links

Wir haben verschiedene Arten von JS-Links mit mehreren Codierungsmethoden getestet.

Testen wir den Link zum Dropdown-Menü. Bisher waren Suchmaschinen nicht in der Lage, diese Art von Link zu verfolgen. Wir möchten feststellen, ob der Onchange-Ereignishandler verfolgt wird. Wichtig ist, dass dadurch nur bestimmte Typen erzwungen werden und wir uns der Auswirkungen anderer Änderungen bewusst sein müssen, anstatt die oben beschriebene JavaScript-Umleitung zu erzwingen.

Beispiel: Dropdown-Menü zur Sprachauswahl auf der Google Work-Seite.

Ergebnis: Link vollständig gecrawlt und verfolgt.

Wir haben auch gängige JavaScript-Links getestet. Nachfolgend sind die gängigsten Arten von JavaScript-Links aufgeführt, während traditionelles SEO einfachen Text empfiehlt. Diese Tests umfassen JavaScript-Linkcode:

Wirkt auf ein externes href-Schlüssel-Wert-Paar (AVP), aber innerhalb eines Tags („onClick“).

Wirkt auf ein internes href-AVP („javascript : window" .location")

Wirkt außerhalb des a-Tags, ruft aber AVP ("javascript: openlink()") innerhalb des href auf

usw.

Ergebnis: Der Link ist fertig. Crawlen und verfolgen.

Unser nächster Test besteht darin, den Event-Handler weiter zu testen, wie zum Beispiel den oben getesteten onchange. Konkret möchten wir den Event-Handler für Mausbewegungen nutzen und dann die URL-Variable ausblenden, sodass sie nur ausgeführt wird, wenn die Event-Handler-Funktionen (in diesem Fall onmousedown und onmouseout) ausgelöst werden.

Ergebnis: Link vollständig gecrawlt und verfolgt.

Links erstellen: Wir wissen, dass Google JavaScript ausführen kann, wir möchten jedoch bestätigen, dass sie Variablen im Code lesen können. In diesem Test verketten wir also Zeichen, die eine URL-Zeichenfolge bilden.

Ergebnis: Link vollständig gecrawlt und verfolgt.

3. Inhalte dynamisch einfügen

Das sind natürlich die Kernpunkte: Text, Bilder, Links und Navigation dynamisch einfügen. Hochwertige Textinhalte sind für Suchmaschinen von entscheidender Bedeutung, um das Thema und den Inhalt der Webseite zu verstehen. Im Zeitalter dynamischer Websites ist seine Bedeutung unbestritten.

Diese Tests dienen dazu, die Ergebnisse des dynamischen Einfügens von Text in zwei verschiedenen Szenarien zu überprüfen.

1. Testen Sie, ob die Suchmaschine dynamisch eingefügten Text zählen kann und der Text aus dem HTML-Quellcode der Seite stammt.

2. Testen Sie, ob die Suchmaschine dynamisch eingefügten Text zählen kann, der von außerhalb der HTML-Quelle der Seite stammt (in einer externen JavaScript-Datei).

Ergebnisse: In beiden Fällen wurde der Text gecrawlt und eingebunden, und die Seite wurde basierend auf diesem Inhalt eingestuft. Cool!

Um mehr darüber zu erfahren, haben wir eine in JavaScript geschriebene clientseitige globale Navigation getestet. Die Links in der Navigation wurden über die Funktion document.writeIn eingefügt und bestätigt, dass sie vollständig gecrawlt werden konnten verfolgt. Es ist zu beachten, dass Google eine Website, die mit dem AngularJS-Framework und der HTML5-Verlaufs-API (pushState) erstellt wurde, interpretieren, rendern, indizieren und ein Ranking erstellen kann, genau wie eine herkömmliche statische Webseite. Deshalb ist es wichtig, Google-Crawler nicht daran zu hindern, externe Dateien und JavaScript abzurufen, und vielleicht entfernt Google es aus den Ajax-fähigen SEO-Richtlinien. Wer braucht HTML-Snapshots, wenn man einfach die gesamte Seite rendern kann?

Nach dem Test haben wir festgestellt, dass die Ergebnisse unabhängig von der Art des Inhalts gleich sind. Beispielsweise werden Bilder gecrawlt und eingebunden, nachdem sie in das DOM geladen wurden. Wir haben sogar einen Test durchgeführt, bei dem wir einen Breadcrumb erstellt haben, indem wir die Strukturdaten von data-vocabulary.org dynamisch generiert und in das DOM eingefügt haben. Das Ergebnis? Die erfolgreich eingefügten Breadcrumbs erscheinen auf der Ergebnisseite der Suchmaschine.

Es ist erwähnenswert, dass Google jetzt die Verwendung von JSON-LD-Markup zur Bildung strukturierter Daten empfiehlt. Ich bin mir sicher, dass es in Zukunft noch mehr darauf basierende Sachen geben wird.

4. Metadaten und Seitenelemente dynamisch einfügen

Wir fügen verschiedene Tags, die für SEO wichtig sind, dynamisch in das DOM ein:

Titelelement

Meta Beschreibung

Meta-Roboter

Kanonische Tags

Ergebnisse: In allen Fällen wurden die Tags gecrawlt und verhielten sich genauso wie Elemente im HTML-Quellcode.

Ein interessantes ergänzendes Experiment, das uns hilft, die Priorisierung zu verstehen. Welches gewinnt, wenn es widersprüchliche Signale gibt? Was passiert, wenn im Quellcode Noindex- und Nofollow-Tags und im DOM Noindex- und Follow-Tags vorhanden sind? Wie verhält sich der HTTP-X-Robots-Antwortheader als eine weitere Variable in diesem Protokoll? Dies wird Teil zukünftiger umfassender Tests sein. Unsere Tests zeigen jedoch, dass Google bei Auftreten eines Konflikts die Tags im Quellcode zugunsten des DOM ignoriert.

5. Ein wichtiges Beispiel mit rel="nofollow"

Wir wollten testen, wie Google mit dem Nofollow-Attribut umgeht, das auf Linkebene im Quellcode und im DOM erscheint. Wir erstellen daher eine Kontrolle ohne angewendetes Nofollow.

Für Nofollow testen wir Quellcode und DOM-generierte Anmerkungen separat.

Das Nofollow im Quellcode funktioniert wie erwartet (dem Link wird nicht gefolgt). Nofollow im DOM schlägt jedoch fehl (dem Link wird gefolgt und die Seite wird eingebunden). Warum? Da die Änderung des href-Elements im DOM zu spät erfolgt: Google ist bereit, den Link zu crawlen und stellt die URL in die Warteschlange, bevor die JavaScript-Funktion ausgeführt wird, die rel="nofollow" hinzufügt. Wenn jedoch ein a-Element mit href = „nofollow“ in das DOM eingefügt wird, werden Nofollow und Link verfolgt, da sie gleichzeitig eingefügt werden.

Ergebnisse

In der Vergangenheit bestanden SEO-Empfehlungen aller Art darin, sich wann immer möglich auf „nur Text“-Inhalte zu konzentrieren. Und dynamisch generierte Inhalte sowie AJAX- und JavaScript-Links können der Suchmaschinenoptimierung großer Suchmaschinen schaden. Für Google ist das offenbar kein Problem mehr. JavaScript-Links verhalten sich wie normale HTML-Links (das ist nur die Oberfläche und wir wissen nicht, was sich hinter den Kulissen abspielt).

JavaScript-Weiterleitungen werden ähnlich wie 301-Weiterleitungen behandelt.

Dynamisch eingefügte Inhalte, sogar Meta-Tags wie rel-kanonische Anmerkungen, werden auf die gleiche Weise behandelt, sei es im HTML-Quellcode oder wenn JavaScript ausgelöst wird, um das DOM zu generieren, nachdem der ursprüngliche HTML-Code analysiert wurde.

Google ist darauf angewiesen, die Seite vollständig rendern zu können und das DOM zu verstehen, nicht nur den Quellcode. Es ist wirklich unglaublich! (Denken Sie daran, Google-Crawlern das Abrufen dieser externen Dateien und JavaScript zu erlauben.)

Google hat in besorgniserregendem Tempo Innovationen hervorgebracht und andere Suchmaschinen hinter sich gelassen. Wir hoffen, die gleiche Art von Innovation auch in anderen Suchmaschinen zu sehen. Um im neuen Zeitalter des Webs wettbewerbsfähig zu bleiben und wesentliche Fortschritte zu erzielen, bedeutet dies eine bessere Unterstützung von HTML5, JavaScript und dynamischen Websites.

Für SEO sollten diejenigen, die die oben genannten Grundkonzepte und die Google-Technologie nicht verstanden haben, gut studieren und lernen, um mit der aktuellen Technologie Schritt zu halten. Wenn Sie das DOM nicht berücksichtigen, verlieren Sie möglicherweise die Hälfte Ihres Anteils.

Verwandte Empfehlungen:

Zusammenfassung der JavaScript-Methoden zum Durchlaufen von Arrays

Wie erstellt JavaScript ein Array?

Grundlegendes Tutorial für den Einstieg in JavaScript

Das obige ist der detaillierte Inhalt vonWie crawlt der Google-Crawler JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!