SEO Best Practices für React E-Commerce-Websites

React hat sich zu einem der führenden JavaScript-Frameworks entwickelt, das auf einer Vielzahl verschiedener Websites und insbesondere auf E-Commerce-Websites verwendet wird.

Aufgrund der Art und Weise, wie sie aufgebaut sind, müssen React-Websites einige spezifische Überlegungen zur Suchmaschinenoptimierung (SEO) anstellen, mit einer Reihe von SEO-Best Practices für React Single Page Applications (SPAs).

In diesem Leitfaden werden wir uns ansehen, wie Sie sicherstellen, dass eine React E-Commerce-Website korrekt für SEO konfiguriert ist, und einige der Vor- und Nachteile der Verwendung von React auf einer suchoptimierten E-Commerce-Website.

Was ist Reagieren?

React ist eine JavaScript-Bibliothek, die verwendet werden kann, um Benutzeroberflächen basierend auf gängigen UI-Komponenten zu erstellen. Es wird von der Muttergesellschaft von Facebook, Meta, zusammen mit einer Open-Source-Community von Entwicklern, darunter Unternehmen und Einzelpersonen, gepflegt.

Da es Open Source ist, kann React auch kostenlos verwendet werden. Es kann das Grundgerüst einer Single-Page-Anwendung (oben erwähnte SPAs) oder einer mobilen App bilden.

Warum ist React gut für E-Commerce?

Der Fokus von React auf UI bedeutet, dass es ein nützliches Tool ist, um reibungslose, nahtlose E-Commerce-Websites zu erstellen, die die Benutzererfahrung (UX) in den Mittelpunkt des Designs stellen.

Inhalte werden clientseitig bereitgestellt und Seiten müssen nicht aktualisiert werden, sodass Kunden schneller und einfacher auf einer Website navigieren können und weniger Serververzögerungen die Seitenladegeschwindigkeit beeinträchtigen.

Die Vielseitigkeit von React bedeutet, dass es sowohl auf Desktop-E-Commerce-Sites als auch auf mobilen Apps verwendet werden kann, was es zu einer der einfachsten Optionen für Entwickler macht, die Progressive Web Apps erstellen möchten.

Können Suchmaschinen React-Websites crawlen?

Wie bei jeder suchoptimierten Website ist es wichtig zu verstehen, wie die Roboter (und insbesondere der Googlebot) den Inhalt einer React-Website sehen.

Im Allgemeinen crawlt Google die Website in zwei Phasen und identifiziert dabei den Inhalt.

Crawlen Sie den Quellcode

Zunächst durchsucht der Googlebot die Website und ruft den Quellcode ab, einschließlich HTML, Seitenkopfzeilen usw.

Rendern Sie das DOM

Zweitens rendert der Googlebot das Domain Object Model (DOM) einschließlich des auf der Seite verwendeten JavaScripts – Sie können dies anhand der integrierten Entwicklertools von Chrome und gleichwertiger Funktionen in anderen Browsern erkennen.

React ist ein clientseitiges JavaScript-Framework, was bedeutet, dass der Googlebot möglicherweise Schwierigkeiten hat, Seiten zu identifizieren. Dies liegt daran, dass React im Gegensatz zu einer herkömmlichen Website keine Anfragen an den Server sendet, wenn von einer Seite zur anderen navigiert wird – was es Google erschwert, die verschiedenen Seiten zu sehen.

Sie können React so konfigurieren, dass serverseitiges Rendering verwendet wird, aber der Googlebot rendert die JavaScript-Dateien und andere serverbasierte Ressourcen beim Navigieren auf Ihrer Website immer noch nicht. Aus diesem Grund ist es wichtig, Ihre React E-Commerce-Website für SEO gemäß den Best Practices einzurichten.

Häufige SEO-Probleme mit React

Es gibt mehrere häufige SEO-Probleme mit React E-Commerce-Websites:

Inhalt nicht gefunden / langsam zu indizieren

Der Googlebot weist jeder Website, die er durchsucht, ein „Rendering-Budget“ zu und verlässt die Website in der Regel, sobald dieses Budget aufgebraucht ist. Dadurch wird sichergestellt, dass kleinere Websites ihren Anteil an der Aufmerksamkeit des Crawlers erhalten und Endlos-Crawling-Schleifen verhindert werden, beispielsweise auf Websites, die während der Navigation dynamische URLs generieren.

Da React-Websites als SPAs fungieren, muss die gesamte Website gerendert werden, bevor ihr gesamter Inhalt gecrawlt werden kann. Dies kann das Auffinden von Inhalten verzögern und zusätzliche Ressourcen auf Seiten des Crawlers verbrauchen, was dazu führen kann, dass weniger Seiten gecrawlt und indexiert werden.

Serverseitiges Rendering und Pre-Rendering können die Roboter etwas von der Ressourcenlast entlasten und dazu beitragen, die Geschwindigkeit zu verbessern, mit der neue Seiten im Index erscheinen.

Suchroboter bemerken aktualisierte Inhalte nur langsam

Dies ist ein Ableger des obigen Problems – wenn Sie eine Seite ändern, kann es einige Zeit dauern, bis diese Änderungen in den Suchergebnissen durchdringen.

Auch dies liegt daran, wie Seiten bei der Verwendung von React gerendert werden, was dazu führen kann, dass aktualisierte Seiten von den endlichen Crawler-Ressourcen von Google länger unbemerkt bleiben.

"Tiefe" Seiten werden selten (oder nie) gecrawlt

Seiten, die tief in der Hierarchie Ihrer Website vergraben sind, werden mit geringerer Wahrscheinlichkeit vom Googlebot erreicht, insbesondere wenn er bereits ein erhebliches Rendering-Budget weiter oben in Ihrer Hierarchie ausgegeben hat.

Auch hier kann Pre-Rendering ein wertvolles Werkzeug sein, um den Such-Crawlern zu helfen, tiefer in die Ordnerstruktur Ihrer Website einzudringen, bevor ihnen das zuweisbare Crawl-Budget ausgeht.

[Ebook] Crawlbarkeit

Stellen Sie sicher, dass Ihre Websites die Anforderungen der Suchmaschinen an die Crawlbarkeit erfüllen, um die SEO-Leistung zu steigern.

Lesen Sie das E-Book

So optimieren Sie E-Commerce-Websites von React

Mit einigen Best Practices für React E-Commerce-SEO können Sie Ihrer Website – und Ihren einzelnen Seiten – eine bessere Chance geben, es in den Suchindex zu schaffen.

Eindeutige Seiten-URLs

Das bewährte Gegenstück zum oben erwähnten Problem mit dynamischen URLs besteht darin, jeder Seite auf Ihrer Website eine eigene eindeutige und statische URL zuzuweisen. Der Inhalt wird dann mit einem einzigen dauerhaften Ort verknüpft – einer kanonischen URL für die Seite – die Suchmaschinen auf ihren Ergebnisseiten mit Zuversicht crawlen, indexieren und ranken können.

React Router ist der Weg, dies auf React-Websites zu erreichen. React Router kann jeder Seite auf der Website eine eigene permanente URL zuweisen und die Benutzeroberfläche an einer bestimmten URL ausrichten.

Isomorphe Reaktion

Isomorphic React ist eine Möglichkeit, serverseitiges Rendern zu ermöglichen, um den Druck auf die Renderbudgets von Crawlern zu verringern. Es erkennt, wenn JavaScript auf der Clientseite deaktiviert ist, und erstellt eine serverseitig gerenderte Form des HTML der Website. Wenn clientseitiges Rendering verfügbar ist, wird die Website wie gewohnt als React SPA geladen.

Auf diese Weise überwindet Isomorphic React die Sichtbarkeitsprobleme für Such-Crawler und verbessert die Auffindbarkeit von Seiten, ohne das reibungslose und nahtlose React-Erlebnis für menschliche Besucher mit aktiviertem clientseitigem JavaScript zu beeinträchtigen.

Vorab-Rendering

Pre-Rendering ist eine weitere Möglichkeit, ein ähnliches Ergebnis wie Isomorphic React zu erzielen. Es funktioniert, indem es eine zwischengespeicherte Version des gerenderten HTML generiert, auf die Crawler dann anstelle des nicht gerenderten Quellcodes zugreifen können.

Menschliche Besucher erhalten die clientseitige React-Website, die ihnen wieder alle Vorteile eines reibungslosen, blitzschnellen SPA bietet. Es stehen viele Pre-Rendering-Dienste zur Auswahl, darunter Google Puppeteer, Prerender.io und SEO4Ajax.

Metadaten optimieren

Stellen Sie schließlich sicher, dass Ihre Inhalte über optimierte Metadaten verfügen – auch nach all den Jahren immer noch ein wichtiges Element in der Onpage-SEO.

Neben einer eindeutigen, optimierten URL sollte jede Seite einen eindeutigen Titel-Tag und alle anderen relevanten Meta-Tags haben, die den Seiten helfen, sich abzuheben, und die Suchroboter anweisen, die Seite mit einem bestimmten Thema oder primären Schlüsselwort zu verknüpfen.

React Helmet ist eine gute Möglichkeit, dies zu erreichen, indem es direkten Zugriff auf die Bearbeitung von Metadaten SEO auf React E-Commerce-Websites gewährt. Auf diese Weise können Sie Old-School-SEO-Best-Practice und klassisches Metadaten-Keywording mit allen Vorteilen einer modernen, mobilfreundlichen React-E-Commerce-Website kombinieren.