So prüfen Sie JavaScript für SEO

Veröffentlicht: 2023-03-06

JavaScript ist überall im Web vorhanden. Da HTML und CSS statischer Natur sind, wurde JavaScript weit verbreitet, um dynamische Funktionen auf der Client-Seite bereitzustellen, was nur eine schicke Art zu sagen ist, dass es heruntergeladen und in einem Browser ausgeführt wird.

Die Anforderungen an die Sprache sind hoch, mit unzähligen Frameworks/Bibliotheken und anderen Variationen, die sich alle in rasanter Entwicklung befinden. Es ist daher üblich – und war vielleicht unvermeidlich – dass die Technologie regelmäßig die Suchmaschinenunterstützung und damit die Best Practice im SEO- Bereich übertrifft. Javascript auf einem Bildschirm Sie müssen sich vor dem Auditieren von JavaScript bewusst sein, dass es häufige Probleme gibt, die wahrscheinlich auftreten, und dass Sie Kompromisse eingehen müssen, um alle Anforderungen zu erfüllen.

Wir haben unseren JavaScript-Audit-Prozess in fünf Hauptbereiche unterteilt, anhand derer Sie Folgendes bestimmen können:

  1. Ob eine Website stark auf JavaScript angewiesen ist
  2. Ob JavaScript-Assets ordnungsgemäß zwischengespeichert/aktualisiert werden
  3. Welche Auswirkungen hat JavaScript auf die Leistung der Website?
  4. Ob JavaScript-Dateien korrekt und effizient abgerufen werden
  5. Situative JavaScript-Probleme: unendliches Scroll-Routing und Weiterleitungen

Aber bevor wir uns darauf einlassen …

Ein schnelles 101 zur Website-Struktur

Aktuelle Websites bestehen aus drei Haupttechnologien:

Hypertext-Auszeichnungssprache (HTML)

Dies ist die Struktur, auf der alles andere ruht, mit einer Hierarchie von Elementen, die alles darstellen, von generischen Containern bis hin zu Text, Links, Medien und Metadaten.

Es ist einfach, robust und semantisch fokussiert, um eine breite Palette von Anwendungen zu ermöglichen.

Obwohl Browser rohes HTML vernünftig formatieren, wird die Präsentation besser gehandhabt von…

Cascading Stylesheets (CSS)

Dies ist die Präsentationsebene, in der HTML auf vielfältige Weise gestaltet und neu angeordnet werden kann .

Jedes HTML-Element kann zielgerichtet, verschoben, gefärbt, in der Größe geändert und sogar animiert werden. In der Tat ist dies die Umsetzung des Website-Designs .

Mit Ausnahme einiger eingeschränkter Funktionen bleibt es jedoch statisch, was uns zu ...

JavaScript (JS)

Dies ist die dynamische Schicht, die HTML und CSS als Reaktion auf Ereignisse wie Benutzerinteraktion, Zeit oder Serveränderungen aktiv manipulieren kann. Dies eröffnet enorm, was in Bezug auf die Benutzererfahrung erreicht werden kann .

Wenn Sie eine Website besuchen, lädt Ihr Browser die HTML-Datei herunter und liest sie dann, interpretiert und führt jeden Teil nacheinander aus. Externe Assets (CSS/JS/Medien/Fonts) werden heruntergeladen und Elemente gemäß den zugehörigen Richtlinien und Anweisungen zusammengesetzt.

Dieser Prozess, bei dem die Bausteine ​​einer Website zusammengefügt werden, um das Endergebnis zu erzielen, wird als Rendering bezeichnet . Dies ist für SEO sehr relevant, da Google etwas Ähnliches wie Browser tut (mit einigen zusätzlichen Analyseschritten) und dies beim Ranking berücksichtigt. Tatsächlich versucht Google, die Erfahrung des Benutzers zu replizieren.

Wie geht Google mit JavaScript um?

Google rendert JavaScript. Mit anderen Worten, es lädt Ihre JavaScript-Assets zusammen mit HTML und CSS, um besser zu verstehen, was Benutzer sehen werden, aber es gibt zwei grundlegende Überlegungen:

  1. Google möchte so wenig Ressourcen wie möglich zum Crawlen von Websites verwenden.
  2. Mehr JavaScript bedeutet, dass mehr Ressourcen zum Rendern benötigt werden.

Aufgrund dieser Probleme ist der Web-Rendering-Dienst von Google darauf ausgerichtet, so effizient wie möglich zu arbeiten, und verfolgt daher die folgenden Strategien:

  • Der Googlebot rendert immer eine Seite, die er zum ersten Mal crawlt. An diesem Punkt trifft es eine Entscheidung darüber, ob es diese Seite in Zukunft rendern muss. Dies wirkt sich darauf aus, wie oft die Seite bei zukünftigen Crawls gerendert wird.
  • Ressourcen werden analysiert, um alles zu identifizieren, was nicht zum wesentlichen Seiteninhalt beiträgt. Diese Ressourcen werden möglicherweise nicht abgerufen.
  • Ressourcen werden aggressiv zwischengespeichert, um Netzwerkanforderungen zu reduzieren, sodass aktualisierte Ressourcen zunächst ignoriert werden können.
  • Der Zustand wird beim Crawlen nicht von einer Seite zur nächsten beibehalten (z. B. Cookies werden nicht gespeichert, jede Seite ist ein „frischer“ Besuch).

Der Hauptpunkt hier ist, dass Google insgesamt länger braucht, um Inhalte zu indizieren, die über JavaScript gerendert werden, und gelegentlich Dinge ganz übersehen kann.

Wie viele wichtige Inhalte sind also betroffen? Wenn sich etwas ändert, wie lange dauert es, bis es in den SERPs angezeigt wird? Behalten Sie solche Fragen während des gesamten Audits im Hinterkopf.

Eine Anleitung in fünf Schritten für ein JavaScript-SEO-Audit

Jeder wird seine eigene Art haben, ein JavaScript-SEO-Audit durchzuführen, aber wenn Sie sich nicht sicher sind, wo Sie anfangen sollen, oder wenn Sie glauben, dass Sie ein paar Schritte in Ihrem aktuellen Prozess verpassen, dann lesen Sie weiter.

1. Verstehen Sie, wie abhängig eine Website von JavaScript ist

Zunächst ist es wichtig festzustellen, ob die Seite stark auf JavaScript angewiesen ist und wenn ja, in welchem ​​Umfang? Dies wird Ihnen helfen, zu steuern, wie tief Ihre nachfolgende Analyse sein sollte.

Dies kann über mehrere Methoden erreicht werden:

  • Was würde JavaScript tun?
  • Deaktivieren Sie JavaScript lokal über Chrome
  • Manuell in Chrome einchecken
  • Wappalyzer
  • Schreiender Frosch

Was würde JavaScript tun (WWJSD)

Ein von Onely bereitgestelltes Tool , das direkte Vergleiche einer URL nebeneinander bietet, indem Screenshots von HTML, Meta-Tags und Links mit und ohne JavaScript angezeigt werden.

Was würde Javascript Seite tun Überlegen Sie genau, ob Sie Mobile oder Desktop überprüfen möchten. Obwohl Mobile-First-Prinzipien im Allgemeinen gelten, wird JavaScript eher als Teil einer Desktop-Erfahrung verwendet. Aber idealerweise, wenn Sie Zeit haben, testen Sie beides!

Schritte zur Analyse der Verwendung von Javascript in WWJSD:

  1. Besuchen Sie WWJSD
  2. Wählen Sie Mobil oder Desktop
  3. URL eingeben
  4. Formular absenden

Lokal über Chrome deaktivieren

Mit dem Chrome-Browser können Sie jedes vorhandene JavaScript deaktivieren und direkt testen:

javascript in chrome deaktivieren Schritte zur Analyse der JavaScript-Nutzung mit Chrome:

  1. Drücken Sie F12, um devtools zu öffnen, und wählen Sie die Registerkarte Elemente aus, falls sie noch nicht geöffnet ist
  2. Befehl+Umschalt+P (oder Strg+Umschalt+P)
  3. Geben Sie „deaktivieren“ ein und wählen Sie *JavaScript deaktivieren*
  4. Lade die Seite neu
  5. Wieder aktivieren nicht vergessen

Manuell in Chrome einchecken

Es gibt zwei Möglichkeiten, Quell-HTML in Chrome zu überprüfen, da sie leicht unterschiedliche Ergebnisse liefern.

Beim Anzeigen der Quelle wird der HTML-Code so angezeigt, wie er ursprünglich empfangen wurde, während beim Überprüfen der Quelledynamische Änderungen wirksam werden – alles, was durch JavaScript hinzugefügt wird, wird sichtbar.

Anzeigequelle: Quelle anzeigen Quelle prüfen: Quelle prüfen Dies wird am besten verwendet, um schnell nach einem vollständigen JavaScript-Framework zu suchen. Der anfängliche Quelldownload wird kürzer sein und wahrscheinlich fehlen die meisten Inhalte, aber der Inspektor wird umfassender sein.

Versuchen Sie, in beiden nach Text zu suchen, von dem Sie vermuten, dass er dynamisch geladen wird – Inhalts- oder Navigationskopfzeilen sind normalerweise am besten.

Schritte zur manuellen Analyse der JavaScript-Nutzung mit Chrome:

 Quelltext anzeigen:

  1. Klicken Sie mit der rechten Maustaste in das Ansichtsfenster des Browsers
  2. Wählen Sie Quelle anzeigen

Quelle prüfen:

  1. Drücken Sie F12, um devtools zu öffnen
  2. Wählen Sie die Registerkarte Elemente, falls noch nicht geöffnet

Wappalyzer

Dies ist ein Tool, das eine Aufschlüsselung des Technologie-Stacks hinter einer Website bereitstellt. Normalerweise gibt es ziemlich viele Informationen, aber wir suchen speziell nach JavaScript-Frameworks:

wappalyzer Schritte zur Verwendung von Wappalyzer zur Analyse der JavaScript-Nutzung

  1. Installieren Sie die Wappalyzer Chrome-Erweiterung
  2. Besuchen Sie die Website, die Sie überprüfen möchten
  3. Klicken Sie auf das Wappalyzer-Symbol und überprüfen Sie die Ausgabe

️ Seien Sie sich bewusst, dass nur weil etwas hier nicht aufgeführt ist, es nicht zu 100% bestätigt, dass es nicht verwendet wird!

Wappalyzer verlässt sich auf Fingerprinting, um ein Framework zu identifizieren. Das heißt, Identifizierungen und Muster zu finden, die für dieses Framework einzigartig sind.

Wenn Anstrengungen unternommen wurden, diese zu ändern, wird Wappalyzer das Framework nicht identifizieren. Es gibt andere Möglichkeiten, dies zu bestätigen, die den Rahmen dieses Dokuments sprengen würden. Fragen Sie einen Entwickler.

Schreiender Frosch

Dies ist ein tiefer Einblick in die JavaScript-Sichtbarkeitsprüfung. Bei aktiviertem JavaScript-Rendering kann Screaming Frog eine umfassende Aufschlüsselung der Auswirkungen von JavaScript auf eine gecrawlte Website bereitstellen, einschließlich der Abdeckung von gerenderten Inhalten/Links und potenziellen Problemen. schreiender Frosch Schritte zur Verwendung von Screaming Frog zur Analyse von Javascript-Problemen:

  1. Gehen Sie zum Konfigurationsmenü
  2. Wähle *Spinne*
  3. Wählen Sie die Registerkarte Rendern
  4. Wählen Sie JavaScript aus der Dropdown-Liste
  5. (optional) Reduzieren Sie das AJAX-Timeout und deaktivieren Sie das Kontrollkästchen, um die Crawling-Leistung zu verbessern, wenn Sie Probleme haben

2.Verwenden Sie eine erzwungene Cache-Aktualisierung

Caching ist ein Verfahren, mit dem Websites effizienter geladen werden können. Wenn Sie eine URL zum ersten Mal besuchen, werden alle erforderlichen Assets an verschiedenen Orten gespeichert, z. B. in Ihrem Browser oder Hosting-Server. Anstatt Seiten bei jedem Besuch von Grund auf neu zu erstellen, wird die letzte bekannte Version einer Seite für schnellere Folgebesuche gespeichert.

Wenn eine JavaScript-Datei aktualisiert wurde, möchten Sie nicht, dass die zwischengespeicherte Version verwendet wird. Google cachet auch ziemlich aggressiv, daher ist dies besonders wichtig, um sicherzustellen, dass die aktuellste Version Ihrer Website gerendert wird.

Es gibt einige Möglichkeiten, damit umzugehen, z. B. das Hinzufügen eines Ablaufdatums zur zwischengespeicherten Datei, aber im Allgemeinen ist die beste „On-Demand“-Lösung die Verwendung einer erzwungenen Cache-Aktualisierung .

Das Prinzip ist einfach: Angenommen, Sie haben eine JavaScript-Datei namens „main.js“, die den Großteil des JavaScripts für die Website enthält. Wenn diese Datei zwischengespeichert ist, verwendet Google diese Version und ignoriert alle Aktualisierungen. bestenfalls ist die gerenderte Seite veraltet; im schlimmsten Fall geht es kaputt.

Es empfiehlt sich, den Dateinamen zu ändern, um ihn von der vorherigen Version zu unterscheiden. Dies beinhaltet normalerweise eine Art Versionsnummer oder das Generieren eines Codes durch Fingerabdruck der Datei.

Um dies zu erreichen, gibt es zwei Strategien:

  1. Ein paar Dateien mit dem Zeitstempel „Zuletzt aktualisiert“ als URL-Variable angehängt.
  2. Ein eindeutiger Code, der im Dateinamen selbst verwendet wird – „Dateiname.code.js“ ist ein allgemeines Muster wie unten:

Ändern des Dateinamens, um Caching zu vermeiden Schritte zum folgen:

  1. Drücken Sie F12, um die Chrome-Entwicklungstools zu laden
  2. Gehen Sie auf die Registerkarte „Netzwerk“.
  3. Filter anwenden
    • Filtern Sie im Feld *Filter* nach der Hauptdomain wie folgt: `domain:*.website.com`
    • Klicken Sie auf den JS-Filter, um Nicht-JS-Dateien auszuschließen
  4. Überprüfen Sie die Dateiliste und werten Sie sie aus – wenden Sie sich bei Bedarf an die Unterstützung des Entwicklers

️ Obwohl die relevanten JavaScript-Dateien normalerweise auf der Hauptdomain zu finden sind, können sie in einigen Fällen extern gehostet werden, z. B. in einem Content Delivery Network (CDN).

Auf von WP Engine gehosteten Websites müssen Sie gemäß dem obigen Beispiel möglicherweise nach „*.wpenginepowered.com“ anstelle der Hauptdomäne filtern. Hier gibt es keine festen Regeln – überprüfen Sie die Domains in der (ungefilterten) JS-Liste und verwenden Sie Ihr bestes Urteilsvermögen. Ein Beispiel dafür, was Sie sehen könnten, ist: Beispiel einer Domänenliste beim Filtern nach „*.wpenginepowered.com Wenn die Spalte Domäne nicht sichtbar ist, klicken Sie mit der rechten Maustaste auf eine vorhandene Spaltenüberschrift und wählen Sie Domäne aus.

3. Identifizieren Sie, welche Auswirkungen JS auf die Websiteleistung hat

Wenn es um die Leistung der Website geht, gibt es ein paar Dinge zu beachten.

Bearbeitungszeit

Dies knüpft an Core Web Vitals (CWV) an, von denen einige in der folgenden Timing-Visualisierung dargestellt sind, die Metriken wie größter Inhaltsschmerz (LCP), kumulative Layoutverschiebung (CLS) und erste Eingabeverzögerung (FID) betrachtet.

Insbesondere interessieren Sie sich für die Lade- und Skriptzeiten in der Zusammenfassung. Wenn diese übermäßig hoch sind, ist dies möglicherweise ein Zeichen für große und/oder ineffiziente Skripte.

Die Wasserfallansicht bietet auch eine nützliche Visualisierung der Auswirkungen jedes CWV sowie anderer Komponenten der Website. Wasserfallansicht von CWV Schritte:

  1. Drücken Sie F12, um die Chrome-Entwicklungstools zu öffnen
  2. Wechseln Sie zur Registerkarte „Leistung“.
  3. Klicken Sie im Bedienfeld auf die Schaltfläche „Aktualisieren“.
  4. Überprüfen Sie die Registerkarte Zusammenfassung (oder Bottom Up, wenn Sie tiefer eintauchen möchten).

Kompression

Dies ist eine einfache, aber wichtige Prüfung; Es stellt sicher, dass Dateien effizient bereitgestellt werden.

Ein richtig konfigurierter Host komprimiert Site-Assets, damit sie so schnell wie möglich von Browsern heruntergeladen werden können. Die Netzwerkgeschwindigkeit ist oft der wichtigste (und variabelste) Engpass bei der Ladezeit der Website. Ladezeit von CWV Schritte:

  1. Drücken Sie F12, um die Chrome-Entwicklungstools zu öffnen
  2. Gehen Sie auf die Registerkarte „Netzwerk“.
  3. Filter anwenden
  4. Filtern Sie im Feld „Filter“ wie folgt nach der Hauptdomain: „domain:*.website.com“.
  5. Klicken Sie auf den JS-Filter, um Nicht-JS-Dateien auszuschließen
  6. Überprüfen Sie den Inhalt der Spalte „Content-Encoding“. Wenn „gzip“, „compress“, „deflate“ oder „br“ angezeigt wird, wird eine Komprimierung angewendet.

️ Wenn die Inhaltscodierungsspalte nicht sichtbar ist:

  1. Klicken Sie mit der rechten Maustaste auf eine vorhandene Spalte
  2. Bewegen Sie den Mauszeiger über „Antwort-Header“.
  3. Klicken Sie auf „Inhaltscodierung“.
  4. Abdeckung

Eine Zunahme an funktionsreichen Asset-Frameworks (z. B. Bootstrap, Foundation oder Tailwind) beschleunigt die Entwicklung, kann aber auch dazu führen, dass große Teile von JavaScript nicht wirklich verwendet werden.

Diese Überprüfung hilft zu visualisieren, wie viel von jeder Datei tatsächlich nicht auf der aktuellen URL verwendet wird.

️ Beachten Sie, dass unbenutztes JavaScript auf einer Seite auf anderen verwendet werden kann!Dies dient hauptsächlich der Orientierung und weist auf eine Optimierungsmöglichkeit hin. Suchen Sie nach unbenutztem Javascript Schritte:

  1. Drücken Sie F12, um die Chrome-Entwicklungstools zu öffnen
  2. Befehl+Umschalt+P (oder Strg+Umschalt+P)
  3. Klicken Sie auf „Abdeckung anzeigen“.
  4. Klicken Sie im Bedienfeld auf die Schaltfläche „Aktualisieren“.
  5. Filter anwenden
    • Filtern Sie im Feld *Filter* nach der Hauptdomain. Keine Wildcards hier; 'website.com' reicht aus.
    • Wählen Sie JavaScript aus der Dropdown-Liste neben der Filtereingabe aus

Minimierung

JavaScript ist zunächst in einer für Menschen lesbaren Weise geschrieben, mit Formatierungen und Begriffen, die leicht zu verstehen sind. Computern ist das egal – sie interpretieren eine ganze Datei als eine einzige Codezeile und kümmern sich nicht darum, wie die Dinge heißen, solange sie konsistent referenziert werden.

Es ist daher gut, Dateien auf die kleinstmögliche Größe zu reduzieren. Dies wird als Minifizierung bezeichnet und ist eine gängige Praxis, die jedoch gelegentlich noch vermisst wird.

Die Unterschiede zu erkennen ist trivial: verkleinerte Datei ^ Minimiert = gut! nicht minimierte Datei ^ Nicht minimiert = nicht gut!

️ Dies gilt hauptsächlich für Standorte in der PRODUKTION.Sites in der Entwicklung/im Test haben in der Regel nicht minimierte Dateien, um das Auffinden von Fehlern zu erleichtern.

Schritte:

  1. Drücken Sie F12, um die Chrome-Entwicklungstools zu öffnen
  2. Gehen Sie auf die Registerkarte „Netzwerk“.
  3. Filter anwenden
    • Filtern Sie im Feld „Filter“ wie folgt nach der Hauptdomain: domain:*.website.com
    • Klicken Sie auf den JS-Filter, um Nicht-JS-Dateien auszuschließen
  4. Überprüfen Sie jede Datei
    • Klicken Sie auf den Dateinamen
    • Gehen Sie im angezeigten Bereich zur Registerkarte "Antwort".

Bündelung

Mehrere JavaScript-Dateien können in weniger Dateien (oder eine!) gebündelt werden, um die Anzahl der Netzwerkanfragen zu reduzieren. Je mehr JavaScript-Dateien von der Hauptdomäne abgerufen werden, desto unwahrscheinlicher ist es, dass dieser Ansatz verwendet wird.

Dies ist meistens nicht wirklich ein Dealbreaker, aber je schwerwiegender die Anzahl separater JavaScript-Dateien ist, desto mehr Zeit kann durch Bündeln gespart werden.

Beachten Sie, dass WordPress insbesondere das Laden von Dateien durch Plugins nach Bedarf fördert, was dazu führen kann, dass einige Seiten viele JavaScript-Dateien laden und andere nur sehr wenige. Das ist also eher eine Gelegenheitsübung als alles andere.

Schritte:

  1. Wiederholen Sie die Schritte 1-3 der Minimierung
  2. Beachten Sie, wie viele Dateien vorhanden sind – eins bis drei sind im Allgemeinen ein gutes Zeichen

4. Verstehen Sie, ob JavaScript-Dateien korrekt und effizient abgerufen werden

Es gibt ein paar Dinge, die man sich ansehen sollte.

Ressource durch robots.txt blockiert

In robots.txt blockierte JavaScript-Dateien werden von Google beim Rendern einer Website nicht abgerufen, was möglicherweise dazu führt, dass das Rendern fehlerhaft ist oder Daten fehlen.

Stellen Sie sicher, dass in der robots.txt kein JavaScript blockiert wird.

Laden des Skripts

Wenn JavaScript-Dateien auf einer Seite eingebunden werden, ist die Ladereihenfolge wichtig.

Wenn zu viele Dateien vor den benutzerseitigen Inhalten abgerufen werden, dauert es länger, bis ein Benutzer die Website sieht, was sich auf die Benutzerfreundlichkeit auswirkt und die Absprungrate erhöht. Eine effiziente Strategie zum Laden von Skripts trägt dazu bei, die Ladezeit einer Website zu minimieren.

  • Direkte Methode: <script src="file.js">

Die direkte Methode lädt die Datei an Ort und Stelle. Die Datei wird abgerufen, heruntergeladen oder aus dem Cache abgerufen (in diesem Fall erscheint sie auf der Registerkarte „Netzwerk“ von devtools) und dann analysiert und ausgeführt, bevor der Browser mit dem Laden der Seite fortfährt.

  • Asynchrone Methode: <script async src="file.js">

Die async-Methode ruft die Datei asynchron ab. Dies bedeutet, dass das Herunterladen/Abrufen der Datei im Hintergrund beginnt und das Laden der Seite sofort fortgesetzt wird. Diese Skripte werden erst ausgeführt, wenn der Rest der Seite geladen ist.

  • Defer-Methode: <script defer src="file.js">

Die defer-Methode ruft die Datei wie bei der async-Methode asynchron ab, führt diese Skripts jedoch sofort nach dem Abruf aus, selbst wenn die Seite noch nicht fertig geladen ist.

Welche dieser Methoden ist also die beste?

Klassische SEO-Antwort, es kommt darauf an. Idealerweise sollte jedes Skript, das asynchron/verzögert sein kann, dies auch sein. Entwickler können bestimmen, welches am besten geeignet ist, je nachdem, was der Code tut, und können überzeugt werden, die Skripte weiter aufzuschlüsseln, damit sie auf die eine oder andere Weise effizienter gehandhabt werden können.

Beide Typen können im Allgemeinen im <head>-Hauptbereich des HTML-Codes platziert werden, da sie das Laden des Inhalts nicht verzögern. Das Laden über die direkte Methode ist manchmal unvermeidlich, sollte aber in der Regel am Ende des Seiteninhalts vor dem schließenden </body>-Tag erfolgen. Dadurch wird sichergestellt, dass der Inhalt der Hauptseite an den Benutzer geliefert wurde, bevor Skripte geladen/ausgeführt werden. Auch dies ist nicht immer möglich (oder wünschenswert), sollte aber beachtet werden.

Überprüfen Sie die Auswirkungen von Drittanbieter-Skripts

Websites beziehen häufig Skripte von Drittanbietern für eine Vielzahl von Zwecken ein, am häufigsten sind dies Analyse- und Anzeigenressourcen. Der Knackpunkt ist, dass diese oft eigene zusätzliche Skripte laden, die wiederum mehr laden können. Dies kann im Prinzip über devtools-Netzwerkdaten überprüft werden, aber das vollständige Bild kann schwierig zu erfassen sein.

Glücklicherweise gibt es ein praktisches Tool, das die Abhängigkeiten visuell darstellen kann, um einen Einblick zu geben, was geladen wird und woher: Werkzeug, das Abhängigkeiten anzeigt Das Ziel hier ist, festzustellen, was geladen wird, und Möglichkeiten zu erkennen, die Anzahl von Skripts von Drittanbietern zu reduzieren, wenn sie redundant, nicht mehr verwendet oder im Allgemeinen ungeeignet sind.

Schritte:

  1. Besuchen Sie Webseitentest
  2. Stellen Sie sicher, dass der Test „Websiteleistung“ ausgewählt ist
  3. Geben Sie die URL ein und klicken Sie auf „Test starten“.
  4. Suchen Sie auf der Seite mit der Zusammenfassung der Ergebnisse nach dem Dropdown-Menü "Anzeigen".
  5. Wählen Sie 'Karte anfordern'

5. Seien Sie sich situativer JavaScript-Probleme bewusst

JS-Frameworks

Sie werden zweifellos auf eines oder mehrere der beliebten JavaScript-Frameworks gestoßen sein – React, Vue und Angular sind prominente Beispiele.

Diese verlassen sich in der Regel auf JavaScript, um eine Website ganz oder teilweise im Browser zu erstellen, anstatt bereits erstellte Seiten herunterzuladen.

Obwohl dies in Bezug auf Leistung und Wartung von Vorteil sein kann, verursacht es auch Kopfschmerzen für SEO, wobei die typischste Beschwerde darin besteht, dass es mehr Arbeit für Google bedeutet, jede Seite vollständig darzustellen. Dies verzögert die Indexierung – teilweise erheblich. Viele in der SEO-Community verstehen darunter „JavaScript = schlecht“ und raten von der Verwendung von Frameworks ab. Hier geht es wohl darum, das Kind mit dem Bade auszuschütten.

Eine sehr praktikable Alternative ist die Verwendung eines Dienstes wie Prerender . Dadurch wird Ihre Website für Suchmaschinen-Crawler gerendert und zwischengespeichert, sodass sie beim Besuch Ihrer Website eine aktuelle und vollständige Darstellung davon sehen, was eine schnelle Indexierung gewährleistet.

Unendliche Schriftrolle

Unendliches Scrollen neigt dazu, ruckelig und nicht so solide wie Paginierung zu sein , aber es gibt richtige und falsche Wege, dies zu tun.

Überprüfen Sie alle URLs, die wahrscheinlich eine Paginierung enthalten, wie z. B. Blogs und Kategorien, und suchen Sie nach Paginierung. Wenn stattdessen unendliches Scrollen verwendet wird, beobachten Sie die URL-Leiste, während Sie durch jeden Stapel von Ergebnissen scrollen – wird die URL aktualisiert, um die „Seite“ widerzuspiegeln, während Sie durchscrollen?

Wenn ja, ist dies gut genug für Google und sollte ordnungsgemäß gecrawlt werden.

Wenn nicht, sollte dies von den Entwicklern behoben werden.

URL-Updates sollten idealerweise „sauber“ wie ?page=2 oder /page/2 implementiert werden. Es gibt Möglichkeiten, dies mit einem Hash (wie #page-2) zu tun, aber Google wird dies derzeit nicht crawlen.

Routing

Wenn ein JavaScript-Framework (z. B. React, Vue, Angular) verwendet wird, überprüfen Sie dies mit Wappalyzer . Es gibt ein paar URLs, die Sie wahrscheinlich sehen werden:

  • https://www.website.com/pretty/standard/route
  • https://www.website.com/#/wait/what/is/this
  • https://www.website.com/#!/again/what

Der Hash im zweiten und dritten Beispiel kann von JavaScript-Frameworks generiert werden. Es ist in Ordnung zum Surfen, aber Google kann sie nicht richtig crawlen.

Wenn Sie also # (oder eine Variation davon) vor ansonsten „korrekt“ aussehenden URL-Segmenten sehen, sollten Sie einen Wechsel zu einem hashfreien URL-Format vorschlagen.

Weiterleitungen

JavaScript-Redirects sollten generell vermieden werden. Obwohl sie von Suchmaschinen erkannt werden, müssen sie gerendert werden, um zu funktionieren, und sind daher für SEO suboptimal.

Sie können dies überprüfen, indem Sie einen Screaming Frog-Crawl mit aktiviertem JavaScript-Rendering ausführen und die JS-Weiterleitungen unter dem JS-Tab/-Filter überprüfen.

Es kann Fälle geben, in denen eine bestimmte JS-gesteuerte Funktion eine JS-Weiterleitung erfordert. Solange dies eher die Ausnahme als die Regel ist, ist das in Ordnung.

Abschluss

Javascript kann Probleme für SEO aufwerfen, aber diese können minimiert werden, indem die wichtigsten potenziellen Problembereiche sorgfältig verstanden und geprüft werden:

1) Wie abhängig eine Website von JavaScript ist

2) Ob JavaScript-Assets ordnungsgemäß zwischengespeichert/aktualisiert werden

3) Welchen Einfluss hat JavaScript auf die Leistung der Website?

4) Ob JavaScript-Dateien korrekt und effizient abgerufen werden

5) Situative JavaScript-Probleme, wie z. B. unendliches Scroll-Routing und Weiterleitungen

Wenn Sie Fragen zu JavaScript Auditing oder SEO haben, zögern Sie nicht, uns zu kontaktieren – wir würden uns freuen, mit Ihnen zu chatten.