Grundlagen von JavaScript SEO für E-Commerce: Was Sie wissen müssen

JavaScript (JS) ist in der E-Commerce-Welt äußerst beliebt, weil es hilft, ein nahtloses und benutzerfreundliches Erlebnis für Käufer zu schaffen.

Nehmen Sie zum Beispiel das Laden von Artikeln auf Kategorieseiten oder das dynamische Aktualisieren von Produkten auf der Website mit JS.

Während dies der Fall ist großartige Neuigkeiten für E-Commerce-Websites, JavaScript stellt SEO-Profis vor mehrere Herausforderungen.

Google arbeitet ständig an der Verbesserung seiner Suchmaschine, und ein großer Teil seiner Bemühungen widmet sich der Sicherstellung, dass seine Crawler auf JavaScript-Inhalte zugreifen können.

Es ist jedoch nicht einfach sicherzustellen, dass Google JS-Sites nahtlos crawlt.

In diesem Beitrag teile ich alles, was Sie über JS SEO für E-Commerce wissen müssen und wie Sie Ihre organische Leistung verbessern können.

Fangen wir an!

Wie JavaScript funktioniert E-Commerce-Sites

Beim Aufbau einer E-Commerce-Site verwenden Entwickler HTML für Inhalt und Organisation, CSS für Design und JavaScript für die Interaktion mit Backend-Servern.

JavaScript spielt drei wichtige Rollen innerhalb von E-Commerce-Websites .

1. Hinzufügen von Interaktivität zu einer Webseite

Das Ziel des Hinzufügens von Interaktivität besteht darin, Benutzern zu ermöglichen, Änderungen basierend auf ihren Aktionen zu sehen, wie z. B. Scrollen oder Ausfüllen von Formularen.

Zum Beispiel: Ein Produktbild ändert sich, wenn der Käufer mit der Maus darüber fährt. Oder wenn Sie die Maus bewegen, dreht sich das Bild um 360 Grad, sodass der Käufer das Produkt besser sehen kann.

All dies verbessert die Benutzererfahrung (UX) und hilft Käufern, sich für ihren Kauf zu entscheiden.

JavaScript fügt Websites eine solche Interaktivität hinzu und ermöglicht es Marketingfachleuten, Besucher anzusprechen und den Umsatz zu steigern.

2. Verbindung zu Backend-Servern herstellen

JavaScript ermöglicht eine bessere Backend-Integration mit Asynchronous JavaScript (AJAX) und Extensible Markup Language (XML).

Es ermöglicht Webanwendungen das asynchrone Senden und Abrufen von Daten vom Server unter Beibehaltung der UX.

Mit anderen Worten, der Prozess beeinträchtigt nicht die Anzeige oder das Verhalten der Seite.

Anderenfalls müssten Besucher, wenn sie eine andere Seite laden wollten, warten, bis der Server mit einer neuen Seite antwortet . Dies ist ärgerlich und kann dazu führen, dass Käufer die Website verlassen.

JavaScript ermöglicht also dynamische, Backend-unterstützte Interaktionen – wie das Aktualisieren eines Artikels und das Anzeigen der Aktualisierung im Warenkorb – sofort.

In ähnlicher Weise unterstützt es die Fähigkeit, Elemente per Drag-and-Drop auf einer Webseite abzulegen.

3. Web-Tracking und -Analyse

JavaScript bietet Echtzeit-Tracking von Seitenaufrufen und Heatmaps, die Ihnen sagen, wie weit unten die Leute Ihre Inhalte lesen.

Zum Beispiel kann es Ihnen sagen, wo sie sind Maus ist oder worauf sie geklickt haben (Klickverfolgung).

So ermöglicht JS das Verfolgen von Benutzerverhalten und -interaktionen auf Webseiten.

Wie verarbeiten Suchbots JS?

Google verarbeitet JS in drei Phasen, nämlich: Crawlen, Rendern und Indizieren.

Bild aus der Google-Suche, September 2022

Wie Sie in diesem Bild sehen können, stellen die Google-Bots die Seiten zum Crawlen und Rendern in die Warteschlange. Während dieser Phase scannen die Bots die Seiten, um neue Inhalte zu bewerten.

Wenn eine URL durch Senden einer HTTP-Anfrage aus der Crawl-Warteschlange abgerufen wird, greift sie zuerst auf Ihre robots.txt-Datei zu, um zu prüfen, ob Sie sie haben hat Google erlaubt, die Seite zu crawlen.

Wenn es nicht erlaubt ist, werden die Bots es ignorieren und keine HTTP-Anfrage senden.

In der zweiten Phase, dem Rendern, dem HTML, CSS , und JavaScript-Dateien werden verarbeitet und in ein Format umgewandelt, das von Google leicht indexiert werden kann.

In der letzten Phase, der Indizierung, wird der gerenderte Inhalt dem Google-Index hinzugefügt, sodass er in den SERPs angezeigt werden kann.

Häufige JavaScript-SEO-Herausforderungen bei E-Commerce-Sites

JavaScript-Crawling ist viel komplexer als traditionelle HTML-Sites.

Bei letzteren ist der Vorgang schneller.

Sehen Sie sich diesen schnellen Vergleich an.

	Traditionelles HTML-Site-Crawling		JavaScript-Crawling
1	Bots laden die HTML-Datei herunter	1	Bots laden die HTML-Datei herunter
2	Sie extrahieren die Links, um sie ihrer Crawl-Warteschlange hinzuzufügen	2	Sie finden keinen Link im Quellcode, da sie erst nach der JS-Ausführung eingefügt werden
3	Sie laden die CSS-Dateien herunter	3	Bots laden CSS- und JS-Dateien herunter
4	Sie senden die heruntergeladenen Ressourcen an Caffeine, Googles Indexer	4	Bots verwenden den Google Web Rendering Service (WRS), um JS zu parsen und auszuführen
5	Voila! Die Seiten sind indexiert	5	WRS holt Daten aus der Datenbank und externen APIs
		6	Inhalt wird indiziert
		7	Bots können endlich neue Links entdecken und sie der Crawl-Warteschlange hinzufügen

Bei JS-reichen E-Commerce-Websites hat es Google daher schwer, Inhalte zu indexieren oder Links zu entdecken, bevor die Seite gerendert wird.

Tatsächlich hat Sofiia Vatulyak in einem Webinar über die Migration einer Website zu JavaScript ein renommierter JS-SEO-Experte, teilte mit,

„JavaScript bietet zwar einige nützliche Funktionen und spart Ressourcen für den Webserver, aber nicht alle Suchmaschinen können es verarbeiten. Google braucht Zeit, um JS-Seiten zu rendern und zu indizieren. Daher ist es eine Herausforderung, JS zu implementieren und gleichzeitig SEO aufrechtzuerhalten.“

Hier sind die wichtigsten JS-SEO-Herausforderungen, denen sich E-Commerce-Vermarkter bewusst sein sollten.

Begrenztes Crawl-Budget

E-Commerce-Websites haben oft eine riesige (und wachsende!) Menge an Seiten, die schlecht organisiert sind.

Diese Websites haben umfangreiche Anforderungen an das Crawl-Budget, und im Fall von JS Websites, ist der Crawling-Prozess langwierig.

Außerdem können veraltete Inhalte, wie z. B. verwaiste und Zombie-Seiten, eine enorme Verschwendung des Crawl-Budgets verursachen.

Begrenztes Render-Budget

Wie bereits erwähnt, müssen Such-Bots ihn rendern, um den von JS geladenen Inhalt im Browser sehen zu können. Aber das Rendern in großem Maßstab erfordert Zeit und Rechenressourcen.

Mit anderen Worten, wie ein Crawl-Budget hat jede Website ein Render-Budget. Wenn dieses Budget aufgebraucht ist, verlässt der Bot die Website, verzögert die Erkennung von Inhalten und verbraucht zusätzliche Ressourcen.

Google rendert JS-Inhalte in der zweiten Indexierungsrunde.

Das ist wichtig um Ihre Inhalte in HTML anzuzeigen, sodass Google darauf zugreifen kann.

Bild von Google Search Central, September 2022

Gehen Sie zum Inspect-Element auf Ihrer Seite und suchen Sie nach Inhalten. Wenn Sie es dort nicht finden können, haben Suchmaschinen Probleme, darauf zuzugreifen.

Fehlerbehebung bei JavaScript-Websites ist schwierig

Die meisten JS-Websites haben Probleme mit Crawlbarkeit und Erreichbarkeit.

Beispielsweise schränkt JS-Inhalt die Fähigkeit eines Bots ein, durch Seiten zu navigieren. Dies wirkt sich auf die Indexierbarkeit aus.

In ähnlicher Weise können Bots den Kontext des Inhalts auf einer JS-Seite nicht herausfinden, wodurch ihre Fähigkeit eingeschränkt wird, die Seite für bestimmte Schlüsselwörter zu ranken.

Solche Probleme machen Es ist für E-Commerce-Vermarkter schwierig, den Darstellungsstatus ihrer Webseiten zu bestimmen.

In einem solchen Fall kann die Verwendung eines fortschrittlichen Crawlers oder Protokollanalysators hilfreich sein.

Tools wie Semrush Log File Analyzer, Google Search Console Crawl Stats und JetOctopus bieten unter anderem eine umfassende Protokollverwaltungslösung, mit der Webmaster besser verstehen können, wie Such-Bots mit Webseiten interagieren.

JetOctopus, hat zum Beispiel JS-Rendering-Funktionalität.

Sehen Sie sich dieses GIF an, das zeigt, wie das Tool JS-Seiten als Google-Bot anzeigt.

Screenshot von JetOctopus, September 2022

In ähnlicher Weise geben die Crawling-Statistiken der Google Search Console einen nützlichen Überblick über die Crawling-Leistung Ihrer Website.

Screenshot aus den Crawling-Statistiken der Google Search Console, September 2022

Die Crawling-Statistiken sind sortiert nach:

• Kilobytes heruntergeladen pro Tag zeigt die Anzahl der Kilobytes, die Bots bei jedem Besuch der Website herunterladen.
• Seiten gecrawlt pro Tag zeigt die Anzahl der Seiten, die die Bots pro Tag crawlen (niedrig, durchschnittlich oder hoch).
• Zeitaufwand für das Herunterladen einer Seite gibt an, wie viel Zeit Bots für die Erstellung benötigen eine HTTP-Anfrage für den Crawl. Weniger Zeitaufwand bedeutet schnelleres Crawlen und Indizieren.

Clientseitiges Rendering standardmäßig

E-Commerce-Websites, die in JS-Frameworks wie React, Angular oder Vue erstellt wurden, sind standardmäßig auf clientseitiges Rendering (CSR) eingestellt.

Mit dieser Einstellung können die Bots nicht sehen, was sich auf der Seite befindet, was zu Rendering- und Indizierungsproblemen führt.

Große und nicht optimierte JS-Dateien

JS-Code verhindert kritische Website Ressourcen vor dem schnellen Laden. Dies wirkt sich negativ auf UX und SEO aus.

Top-Optimierungstaktiken für JavaScript-E-Commerce-Sites

1. Überprüfen Sie, ob Ihr JavaScript SEO-Probleme aufweist

Hier sind drei schnelle Tests, die Sie auf verschiedenen Seitenvorlagen Ihrer Website ausführen können, nämlich der Startseite, Kategorie- oder Produktlistenseiten, Produktseiten, Blogseiten und Zusatzseiten.

URL-Prüftool

Greifen Sie in Ihrer Google Search Console auf den URL-Prüfbericht zu.

Screenshot von der Google Search Console, September 2022

Geben Sie die URL ein, die Sie testen möchten.

Screenshot von der Google Search Console, September 2022

Drücken Sie als Nächstes auf Getestete Seite anzeigen und wechseln Sie zum Screenshot der Seite. Wenn Sie diesen Abschnitt leer sehen (wie in diesem Screenshot), hat Google Probleme beim Rendern dieser Seite.

Screenshot von der Google Search Console, September 2022

Wiederholen Sie diese Schritte für alle zuvor freigegebenen relevanten E-Commerce-Seitenvorlagen.

Führen Sie eine Google-Suche durch

Durch Ausführen einer Website-Suche können Sie feststellen, ob sich die URL im Google-Index befindet.

Überprüfen Sie zuerst die No-Index und kanonische Tags. Sie möchten sicherstellen, dass Ihre Canonicals selbstreferenzierend sind und kein Index-Tag auf der Seite vorhanden ist.

Gehen Sie als Nächstes zur Google-Suche und geben Sie – Site:yourdomain.com inurl:your url

Screenshot von der Suche nach [Site:target.com inurl:], Google, September 2022
Dieser Screenshot zeigt, dass Target “Über uns” Seite wird von Google indexiert.

Wenn es ein Problem mit dem JS Ihrer Website gibt, sehen Sie dieses Ergebnis entweder nicht oder erhalten ein ähnliches Ergebnis, aber Google hat keine Metainformationen oder irgendetwas Lesbares.

 

Screenshot von der Suche nach [Site: made.com inurl:hallway], Google, September 2022

Screenshot von der Suche nach [Site:made.com inurl:homewares], Google, September 2022Go For Content Search

Manchmal indexiert Google Seiten, aber der Inhalt ist nicht lesbar. Mit diesem abschließenden Test können Sie beurteilen, ob Google Ihre Inhalte lesen kann.

Sammeln Sie eine Reihe von Inhalten aus Ihren Seitenvorlagen und geben Sie sie in Google ein, um die Ergebnisse anzuzeigen.

Lassen Sie uns Nehmen Sie einige Inhalte von Macy’s.

Screenshot von Macy’s, September 2022

Screenshot von der Suche nach [alfani essential capri pull-on with tummy control], Google, September 2022Kein Problem hier!

Aber sehen Sie sich an, was mit diesen Inhalten auf Kroger passiert. Es ist ein Alptraum!

Screenshot von Kruger, September 2022

Screenshot von der Suche nach [score an $8 s’mores bunder when you buy 1 Hershey], Google, September 2022Obwohl das Erkennen von JavaScript-SEO-Problemen komplexer ist, helfen Ihnen diese drei Tests, schnell zu beurteilen, ob Ihr E-Commerce-JavaScript SEO-Probleme aufweist.

Folgen Sie diesen Tests mit einem detaillierten JS-Website-Audit mit einem SEO-Crawler, der Ihnen helfen kann, festzustellen, ob Ihre Website bei der Ausführung von JS fehlgeschlagen ist und ob ein Code nicht richtig funktioniert.

Zum Beispiel haben einige SEO-Crawler dies getan eine Liste von Funktionen, die Ihnen helfen können, dies im Detail zu verstehen:

• Die “JavaScript-Leistung” -Bericht bietet eine Liste aller Fehler.
• Die “Browser-Leistungsereignisse” Das Diagramm zeigt die Zeit von Lebenszyklusereignissen beim Laden von JS-Seiten. Es hilft Ihnen, die Seitenelemente zu identifizieren, die am langsamsten geladen werden.
• Die  „Ladezeitverteilung“ Der Bericht zeigt die Seiten, die schnell oder langsam sind. Wenn Sie auf diese Datenspalten klicken, können Sie die langsamen Seiten weiter im Detail analysieren.

2. Implementieren Sie dynamisches Rendering

Wie Ihre Website Code rendert, wirkt sich darauf aus, wie Google Ihre JS-Inhalte indexiert. Daher müssen Sie wissen, wie das JavaScript-Rendering erfolgt.

Serverseitiges Rendering

Dabei wird die gerenderte Seite (das Rendern von Seiten erfolgt auf dem Server) an den Crawler bzw. den Browser (Client) gesendet. Crawling und Indizierung ähneln HTML-Seiten.

Aber die Implementierung von serverseitigem Rendering (SSR) ist oft eine Herausforderung für Entwickler und kann die Serverlast erhöhen.

Ferner die Zeit bis zum ersten Byte (TTFB) ist langsam, da der Server unterwegs Seiten rendert.

Entwickler sollten beim Implementieren von SSR daran denken, keine Funktionen zu verwenden, die direkt im DOM ausgeführt werden.

Clientseitiges Rendering

Hier wird das JavaScript vom Client mithilfe des DOM gerendert. Dies führt zu mehreren Rechenproblemen, wenn Such-Bots versuchen, Inhalte zu crawlen, zu rendern und zu indizieren.

Eine praktikable Alternative zu SSR und CSR ist dynamisches Rendering, das zwischen client- und serverseitig gerenderten Inhalten für bestimmte Benutzeragenten umschaltet.

Es ermöglicht Entwicklern, den Inhalt der Website Benutzern bereitzustellen, die mit im Browser generiertem JS-Code darauf zugreifen.

Den Bots wird jedoch nur eine statische Version präsentiert. Google unterstützt offiziell die Implementierung von dynamischem Rendering.

Bild von Google Search Central, September 2022

Um dynamisches Rendering bereitzustellen, können Sie Tools wie Prerender.io oder Puppeteer verwenden.

Diese können Ihnen dabei helfen, den Crawlern eine statische HTML-Version Ihrer Javascript-Website ohne negative Auswirkungen bereitzustellen Auswirkung auf CX.

Dynamisches Rendering ist eine großartige Lösung für E-Commerce-Websites, die normalerweise viele Inhalte enthalten, die sich häufig ändern oder auf Social Media-Sharing angewiesen sind (mit einbettbaren Social Media-Walls oder Widgets).

3. Leiten Sie Ihre URLs richtig weiter

JavaScript-Frameworks verwenden einen Router, um saubere URLs zuzuordnen. Daher ist es wichtig, Seiten-URLs beim Aktualisieren von Inhalten zu aktualisieren.

Zum Beispiel generieren JS-Frameworks wie Angular und Vue URLs mit einem Hash (#) wie www.example.com/#/about-us

Solche URLs werden von Google-Bots während des Indexierungsprozesses ignoriert. Daher ist es nicht ratsam, #.

zu verwendenVerwenden Sie stattdessen statisch aussehende URLs wie http://www.example.com/about-us

4. Halten Sie sich an das Internal Linking Protocol

Interne Links helfen Google dabei, die Website effizient zu crawlen und wichtige Seiten hervorzuheben.

Eine schlechte Linkstruktur kann der Suchmaschinenoptimierung schaden, insbesondere für JS-lastige Websites .

Ein häufiges Problem, auf das wir gestoßen sind, ist, wenn E-Commerce-Websites JS für Links verwenden, die Google nicht crawlen kann, wie z.

<a href=”/important-link”onclick=”changePage(‘important-link’)”>Diese Seite crawlen</a>

Wenn Sie möchten, dass Google-Bots entdecken und Folgen Sie Ihren Links, stellen Sie sicher, dass es sich um reines HTML handelt.

Google empfiehlt die Verknüpfung von Seiten mit HTML-Anchor-Tags mit href-Attributen und bittet Webmaster, JS-Event-Handler zu vermeiden.

5. Seitenumbruch verwenden

Paginierung ist entscheidend für JS-reiche E-Commerce-Websites mit Tausenden von Produkten, die Einzelhändler häufig für eine bessere UX auf mehrere Seiten verteilen.

Benutzern endloses Scrollen zu ermöglichen, kann für UX gut sein, ist aber nicht unbedingt SEO -freundlich. Dies liegt daran, dass Bots nicht mit solchen Seiten interagieren und keine Ereignisse auslösen können, um mehr Inhalte zu laden.

Irgendwann erreicht Google ein Limit (hört auf zu scrollen) und verlässt die Seite. Daher werden die meisten Ihrer Inhalte ignoriert, was zu einem schlechten Ranking führt.

Stellen Sie sicher, dass Sie <a href> Links, damit Google die zweite Seitennummerierung sehen kann.

Verwenden Sie zum Beispiel Folgendes:

<a href=”https://example.com/shoes/”>

6. Lazy Load Images

Obwohl Google Lazy Loading unterstützt, wird beim Besuch einer Seite nicht durch den Inhalt gescrollt.

Es passt die Größe des virtuellen Darstellungsbereichs der Seite an, wodurch er während des Crawlings länger wird Prozess. Und weil die  „scrollen” Ereignis-Listener wird nicht ausgelöst, dieser Inhalt wird nicht gerendert.

Wenn Sie also, wie bei den meisten E-Commerce-Websites, Bilder unterhalb der Falte haben, ist es wichtig, sie träge zu laden, damit Google Ihren gesamten Inhalt sehen kann.

7. Bots das Crawlen von JS erlauben

Dies mag offensichtlich erscheinen, aber wir haben mehrfach gesehen, dass E-Commerce-Websites versehentlich das Crawlen von JavaScript-Dateien (.js) blockiert haben.

Dies wird dazu führen JS-SEO-Probleme, da die Bots diesen Code nicht darstellen und indizieren können.

Überprüfen Sie Ihre robots.txt-Datei, um festzustellen, ob die JS-Dateien geöffnet und zum Crawlen verfügbar sind.

8. Prüfen Sie Ihren JS-Code

Stellen Sie schließlich sicher, dass Sie Ihren JavaScript-Code prüfen, um ihn für Suchmaschinen zu optimieren.

Verwenden Sie Tools wie Google Webmaster Tools, Chrome Dev Tools und Ahrefs sowie einen SEO-Crawler wie JetOctopus, um ein erfolgreiches JS-SEO-Audit durchzuführen.

Google Search Console

Diese Plattform kann Ihnen dabei helfen, Ihre Website zu optimieren und Ihre organische Leistung zu überwachen. Verwenden Sie GSC, um Googlebot- und WRS-Aktivitäten zu überwachen.

Bei JS-Websites können Sie mit GSC Probleme beim Rendern sehen. Es meldet Crawling-Fehler und gibt Benachrichtigungen für fehlende JS-Elemente aus, die für das Crawling blockiert wurden.

Chrome-Entwicklungstools

Diese Webentwickler-Tools sind in Chrome integriert zur einfachen Verwendung.

Mit der Plattform können Sie gerendertes HTML (oder DOM) und die Netzwerkaktivität Ihrer Webseiten überprüfen.

Auf der Registerkarte „Netzwerk“ können Sie das JS leicht identifizieren und CSS-Ressourcen vor dem DOM geladen.

Screenshot von Chrome Dev Tools, September 2022

Ahrefs

Mit Ahrefs können Sie den Aufbau von Backlinks, Content-Audits, Keyword-Recherche und mehr effektiv verwalten. Es kann Webseiten in großem Maßstab rendern und ermöglicht es Ihnen, auf JavaScript-Weiterleitungen zu prüfen.

Sie können auch JS in Site-Audit-Crawls aktivieren, um mehr Einblicke zu gewinnen.

Screenshot von Ahrefs, September 2022

Die Ahrefs Toolbar unterstützt JavaScript und zeigt einen Vergleich von HTML mit gerenderten Versionen von Tags.

JetOctopus SEO-Crawler und Protokollanalysator

JetOctopus ist ein SEO-Crawler und Protokollanalysator, mit dem Sie mühelos allgemeine E-Commerce-SEO-Probleme prüfen können.

Seit Es kann JS als Google-Bot anzeigen und rendern, E-Commerce-Vermarkter können JavaScript-SEO-Probleme in großem Umfang lösen.

Die Registerkarte „JS Performance“ bietet umfassende Einblicke in die JavaScript-Ausführung – First Paint, First Contentful Paint und Laden der Seite.

Es teilt auch die Zeit, die benötigt wird, um alle JavaScript-Anforderungen mit den JS-Fehlern abzuschließen, die sofort behoben werden müssen.

GSC-Integration mit JetOctopus kann helfen Ihnen, die vollständige Dynamik Ihrer Websiteleistung zu sehen.

Ryte UX Tool

Ryte ist ein weiteres Tool, das Ihre Javascript-Seiten crawlen und prüfen kann. Es rendert die Seiten und sucht nach Fehlern, hilft Ihnen bei der Problembehebung und überprüft die Benutzerfreundlichkeit Ihrer dynamischen Seiten.

seoClarity

seoClarity ist eine Unternehmensplattform mit vielen Funktionen. Wie die anderen Tools verfügt es über dynamisches Rendering, sodass Sie überprüfen können, wie das Javascript auf Ihrer Website funktioniert.

Zusammenfassend

E-Commerce-Websites sind reale Beispiele für dynamische Inhalte, die mit JS eingefügt werden .

Daher schwärmen E-Commerce-Entwickler davon, wie sie mit JS äußerst interaktive E-Commerce-Seiten erstellen können.

Andererseits fürchten viele SEO-Profis JS, weil sie danach einen Rückgang des organischen Traffics erlebt haben Ihre Website begann, sich auf clientseitiges Rendering zu verlassen.

Obwohl beide Recht haben, ist die Tatsache, dass auch JS-basierte Websites in den SERPs gut abschneiden können.

Befolgen Sie die Tipps, die in geteilt werden dieser Anleitung, um der effektivsten Nutzung von JavaScript einen Schritt näher zu kommen und gleichzeitig das Ranking Ihrer Website in den SERPs aufrechtzuerhalten.