So manche Migration einer E-Commerce Website ist an technischen SEO-Problemen gescheitert. Von der Blockierung von Crawlern im Staging bis hin zur Optimierung Deiner Facettennavigation und mehr - wir haben 6 Punkte für Dich, die Du beachten solltest.
Die Migration einer E-Commerce-Website ist eine Herausforderung. Für den erfolgreichen Launch der neuen Version Deiner Website hast Du nur eine Chance. Wenn Du sie nicht aus technischer SEO-Sicht optimierst, kannst Du über Nacht alle Deine Rankings und Deinen Traffic verlieren.
Migrations sind schwierig, und selbst große, gut finanzierte E-Commerce-Shops scheitern regelmäßig daran. Der Hauptgrund dafür ist der Mangel an technischer SEO-Qualitätssicherung.
Technisch gesehen steht einer guten Vorbereitung Deiner Website auf den Umzug nichts im Wege. Wenn Du die Migration in einer Staging-Umgebung durchführst, hast Du die Möglichkeit zu testen, wie die Suchmaschinen Deine neue Website zukünftig sehen.
Aber es braucht etwas Erfahrung, um zu wissen, worauf Du achten musst.
In diesem Artikel erfährst Du, worauf Du in Deiner Staging-Umgebung besonders achten solltest, um den Erfolg Deiner neuen Website zu gewährleisten, wenn sie online geht.
Passend dazu kannst Du Dir auch unseren Leitfaden zum Thema E-Commerce SEO ansehen.
Bei der Migration Deiner Website ist die beste Vorgehensweise, zunächst eine Staging-Umgebung zu erstellen, in der Du die neue Version Deiner Website entwickeln und testen kannst, bevor sie live geht. Du solltest dabei allerdings bedenken, dass Suchmaschinen Deine Staging-Site crawlen und indexieren, wenn Du sie nicht daran hinderst, darauf zuzugreifen. Nicht gerade ideal.
Lass uns als Quickcheck nachschauen, wie viele Staging-Sites von Google indexiert werden. Hier der Suchoperator, den ich dafür verwendet habe:
site:uat.*.com OR site:*uat.*.com OR site:stage.*.com OR site:staging.*.com OR site:test.*.com OR site:testing.*.com
Abbildung 1: Google Suchergebnisse für Staging Websites
Sieh Dir die Zahl unter der Suchleiste an – all diese Seiten sind indexiert und sollten dringend aufgeräumt werden. Ich habe im Check nur ein paar der beliebtesten Staging-Subdomains verwendet – Du könntest also sicher noch mehr Beispiele finden.
Hier ist der Grund, warum die Indexierung Deiner Staging-Umgebung schlecht ist:
Wie kannst Du das verhindern? Schütze Deine Staging-Umgebung auf Server-Ebene mit HTTP-Authentifizierung.
Wenn Du Deine Staging-Website schützt, indem Du nach Anmeldedaten fragst, können Suchmaschinen-Crawler nicht darauf zugreifen und nichts wird indexiert. Das ist eine einfache Lösung, die nicht nur gut für die Suchmaschinenoptimierung ist, sondern auch Deine sensiblen Daten davor schützt, in falsche Hände zu geraten.
Verbessere Deine technische SEO mit Ryte!
Heutzutage ist es üblich, E-Commerce Websites auf moderne JavaScript-Frameworks zu migrieren. Diese Frameworks bieten zwar fantastische Funktionen, aber Du solltest unbedingt sicherstellen, dass Google Deine neue JavaScript-gestützte Website erfolgreich rendern und alle Deine Inhalte sehen kann, bevor Du live gehst.
Dazu kommt, dass Google JavaScript zwar gut verarbeitet, aber das gilt nicht für alle Suchmaschinen. Manche Suchmaschinen verarbeiten JavaScript überhaupt nicht. Das heißt, wenn Du Inhalte auf Deiner Website hast, für die JavaScript verarbeitet werden muss, um sie zu laden, werden einige Suchmaschinen die Inhalte nicht indexieren und Du wirst in ihren Suchergebnissen nicht auftauchen.
Vor kurzem bin ich auf eine E-Commerce-Seite gestoßen, die mit Büro- und Schreibwaren handelt. Leider war die Website so aufgebaut, dass Google den eigentlichen Inhalt der Kategorieseiten nicht sehen konnte. Warum? Weil sie mit falsch konfiguriertem JavaScript injiziert wurde.
Abbildung 2: Kaputte gerenderte Version einer Webseite-Kategorieseite
Der Screenshot oben zeigt die gerenderte Version der Kategorieseite der Website. Der Googlebot hat außer der Schaltfläche „Alle anzeigen“ nichts gesehen. Der wichtige Inhalt wurde nicht gerendert, was zu einer leeren Seite führte. Wie Du Dir wahrscheinlich denken kannst, wurde diese Seite für nichts Sinnvolles gerankt.
Im Fall dieser Website können wir folgendes annehmen:
Was ist hier die Lektion? Bevor Du Deine Website live schaltest, musst Du sicherstellen, dass Crawler Deine wichtigen Inhalte rendern können. Ich weiß, das hört sich vielleicht geekig an, aber hier ist eine Schritt-für-Schritt-Anleitung, der Du folgen kannst:
Überprüfe als erstes den gerenderten HTML-Code und den Raw-HTML-Code der Seite in Chrome DevTools. Wenn Du beide Versionen vergleichst, erkennst Du die Unterschiede bei fehlenden Inhalten und Linkelementen, die im gerenderten HTML-Code enthalten sein sollten, es aber nicht sind.
Um die Chrome DevTools aufzurufen, klicke mit der rechten Maustaste auf ein beliebiges Element und wähle „Untersuchen“. Oder Du drückst Command+Shift+C oder Command+Option+C (Mac) und Control+Shift+C (Windows.)
Als Nächstes musst Du den User Agent in Googlebot ändern, wofür Du die Registerkarte „Netzwerkbedingungen“ aufrufst.
Du hast zwei Möglichkeiten, entweder:
Abbildung 3: Anpassen und Steuern in Chrome-DevTools
Deaktiviere das Kontrollkästchen „Browser-Standard verwenden“. Wähle dann den gewünschten User-Agent aus und aktualisiere die Seite, aber klicke während des Tests nirgendwo auf die Seite.
Abbildung 4: User-Agent-Einstellungen in den Chrome-DevTools
Wichtig ist, dass Du einen Link oder ein Fragment Deines wichtigen Inhalts auswählst, anhand dessen Du die Darstellung Deiner Seite testen willst. Versuche dann, eventuelle Unterschiede zwischen den beiden Versionen Deiner Seite zu erkennen.
Der Bereich „Elemente“ zeigt Dein gerendertes HTML, auch bekannt als DOM (ursprüngliches HTML und alle Änderungen, die JavaScript vorgenommen hat). Prüfe nun, ob die Links oder Inhalte, die vorhanden sein sollten, in diesem Code sichtbar sind (ohne auf die Seite zu klicken).
Abbildung 5: Elemente Panel in Google Chrome DevTools
Gehe anschließend zum Panel „Netzwerk“, aktualisiere die Seite und klicke auf das HTML-Dokument. Navigiere zum Codeabschnitt „Antwort“ und suche nach Deinem Inhalt oderLink (dies ist der ursprüngliche HTML-Code).
Abbildung 6: Netzwerk Panel in Google Chrome DevTools
Du kannst das gerenderte HTML und das Roh-HTML auch ganz einfach mit einer Chrome-Erweiterung vergleichen: View Rendered Source.
Website-Elemente, die erst auf die Seite geladen werden, nachdem ein Nutzer geklickt oder gescrollt hat, sind für Crawler normalerweise nicht zugänglich. Der Googlebot klickt oder scrollt nicht.
E-Commerce Websites zeigen aber oft technische Spezifikationen, Produktmerkmale und zusätzliche Informationen hinter Registerkarten an. Es ist wichtig, dass Google diese Inhalte (Tabbed Content) erfassen kann, aber manchmal sind sie eben so aufgebaut, dass sie erst durch einen Klick geladen werden können.
Abbildung 7: Inhalte in Registerkarten (Tabbed Content) auf einer E-Commerce Website
Hast Du sogenannten Tabbed Content auf Deiner Website? Wenn ja, überprüfe, ob er gerendert werden kann.
Kopiere dazu ein Textfragment aus Deinem Tabbed Content. Verwende die Registerkarte „Netzwerkbedingungen“ in Chrome DevTools und wähle den Googlebot User Agent aus. Aktualisiere dann die Seite und achte darauf, dass Du während des Tests auf keine Elemente klickst. Überprüfe, ob sich das von Dir gewählte Fragment im Tab „Elemente“ finden lässt.
Abbildung 8: Elemente prüfen in Chrome DevTools
Wenn Du es nicht finden kannst, bedeutet das, dass Googlebot es auch nicht finden wird. Nimm Änderungen an Deiner Website vor, damit dieser Inhalt im Quellcode verfügbar ist, ohne dass JavaScript gerendert werden muss. So können Crawler schnell auf wichtige Inhalte zugreifen und Rendering-Probleme vermeiden.
Wenn Deine neue Website falsch konfiguriert ist, erhalten verschiedene User Agents (z. B. der Googlebot im Vergleich zu einem normalen Nutzer) möglicherweise unterschiedliche Werte in den HTML-Elementen, die aus SEO-Sicht wichtig sind.
Oft enthält die ursprüngliche HTML-Datei einen Satz von Werten, die beim Rendern von JavaScript ersetzt werden. Das ist für Suchmaschinen-Bots sehr verwirrend, weil sie nicht wissen, welche Elemente sie berücksichtigen sollen.
Folgenden Elementen solltest Du besondere Aufmerksamkeit schenken:
Diese HTML-Elemente sind für die Suchmaschinenoptimierung unerlässlich und Du solltest sicherstellen, dass die Crawler die von Dir gewünschte Version erhalten, sowohl mit als auch ohne das Rendern von JavaScript.
Eine facettierte Navigation erleichtert es den Nutzern, die Produkte zu finden, nach denen sie suchen. Aber aus SEO-Sicht kann sie gefährlich werden, wenn Du sie nicht richtig optimierst.
Die Filter in Deiner facettierten Navigation können mehrere Versionen der gleichen Kategorieseite erzeugen. Wenn Google uneingeschränkt auf diese Kopien zugreifen kann, wird es versuchen, sie alle zu indexieren, was zu Problemen mit Duplicate Content führt.
Botify hat eine E-Commerce-Website mit weniger als 200 Tausend Produktseiten analysiert. Aufgrund einer nicht optimierten Facettennavigation hatte diese Website über 500 Millionen Seiten, auf die der Googlebot zugreifen konnte.
Wie kann man dieses Problem lösen? Indem Du festlegst, welche Facetten-Filter crawlbar und indexierbar sein sollen.
Jede E-Commerce Website sollte eine Indexierungsstrategie für Seiten mit Facettenfiltern haben. Einige dieser Seiten können für wichtigen organischen Traffic sorgen, während andere Duplikate sind, nach denen niemand je suchen wird und die daher nicht indexiert werden sollten.
Die folgenden zwei Fragen solltest Du für jede facettierte Kategorieseite beantworten:
Befolge außerdem die Best Practices von Google für die facettierte Navigation.
Vergiss nicht zu prüfen, ob alle Weiterleitungen korrekt implementiert sind, bevor Deine neue Website online geht.
Die Implementierung von Weiterleitungen ist nicht schwierig, aber jeder Fehler kann teuer werden:
Bevor Deine Website online geht:
Die Migration einer Website ist komplex und jeder Fehler kann kostspielig sein. Das heißt aber nicht, dass Du Deine E-Commerce Website nicht erfolgreich migrieren kannst. Alles, was Du tun musst, ist, Dir im Voraus einen guten Plan zurechtzulegen und ihn gründlich umzusetzen.
Ich hoffe, dieser Artikel hat Dir geholfen, die Themen kennenzulernen, auf die Du bei Deiner Staging-Website achten solltest. Kümmere Dich um anfallende Probleme, bevor Du Deine neue Website launchst, um Ärger von vornherein zu vermeiden.
Verbessere Deine technische SEO mit Ryte!
Veröffentlicht am 29.09.2022 von Jasmita D'Souza.
Jasmita D'Souza ist technische SEO-Spezialistin bei Onely - der fortschrittlichsten technischen SEO-Agentur der Welt. In ihrem Job analysiert sie Websites auf JavaScript-Probleme, um das Web zu einem glücklichen und zugänglichen Ort für Bots und Menschen zu machen. Außerdem ist sie ein aktives Mitglied der Women in Technical SEO Community und teilt ihr Wissen und ihre Ressourcen. In ihrer Freizeit füttert sie Vögel, entspannt sich bei Heimwerkerprojekten oder häkelt. Und das ist noch nicht alles! Sie beschäftigt sich gerne mit Graphologie (Handschriftenanalyse) und erforscht Tools, die den Alltag erleichtern. Verbinde Dich mit ihr auf Twitter und Linkedin.