Informationsarchitekturen im E-Commerce

Von Marcus Pentzek
Aktualisiert am 13.01.2024 | Lesezeit ca. Min.

Die Informationsarchitektur einer Website hilft der Suchmaschine, diese besser zu verstehen und passend in den Suchergebnissen zu positionieren. Insbesondere Online-Shop-Betreiber sollten sich der Macht einer guten Informationsarchitektur bewusst sein und diese möglichst ideal umsetzen, um von Google viele relevante Besucher zu erhalten.

Ein kurzer Ausflug ins reale Leben

Die Welt des Zusammenlebens unter den Menschen ist geprägt von Strukturen. Nur weil wir sie haben, kann sich jeder Mensch nahezu überall zurechtfinden.

Angenommen, du kommst in eine dir fremde Stadt. Du willst etwas in der hiesigen Bibliothek herausfinden. Wie kommst du an die Informationen, die du suchst? Du schaust zunächst nach der Adresse der Bibliothek. Diese hat eine Postleitzahl, mit der du grob herausfindest, in welchen Stadtteil du dich begeben musst. Du findest die Straße und gehst zur angegebenen Hausnummer. Du bist in der Bibliothek. Dort sind die Bücher nicht alphabetisch sortiert, sondern nach Themenbereichen, denn die meisten Besucher wissen noch gar nicht, welchen Titel sie sich ausleihen wollen. Sie kennen aber das Thema. In der entsprechenden Abteilung findest du ein vielversprechendes Buch, schlägst es auf und schaust in das Inhaltsverzeichnis, um das Sub-Thema zu finden, das dich interessiert. Auf der entsprechenden Seitenzahl liest du den Text und findest darin (hoffentlich) die gewünschte Information.

Für Google ist dies nicht anders. Nur wenn Google genauso Schritt für Schritt vom Start zum Ziel gelangt, kann Google sich sicher sein, wirklich das zu erfahren, was Google erfahren will. Oder anders gesagt – nur wenn Google genau erkennen kann, wo in der Informationsarchitektur einer Website eine bestimmte Produktseite liegt, kann Google mit Sicherheit sagen, zu welcher Produktkategorie dieses Produkt gehört.

Diese Strukturen, die Webentwickler und Webdesigner an Google übermitteln können, lassen sich in drei Bereiche unterteilen:

  • URL-Design
  • Breadcrumbs
  • Klick-Pfad

Betrachten wir diese drei Aspekte, so sagen sie im Grunde doch dasselbe aus:

https://www.website.tld/shop/kleidung/hosen/blaue-jeans-mit-strassraendern-xl.html

Jede hierarchische Ebene entspricht in der URL einem “Folder“, bis auf die letzte Ebene (Produkt), welche mit einer Datei-Endung abschließt, da sich unterhalb des Produktes nichts mehr anschließt.

Informationsarchitekturen Screenshot
Beispielhafte Breadcrumb-Navigation.

Jede hierarchische Ebene wird über einen Link dargestellt, wobei die jeweils direkt vorgelagerte Ebene davor steht. Die aktuellste Seite findet sich ohne Link, denn da ist man ja bereits.

Informationsarchitekturen Screenshot
Beispielhafte Klickstrecke.

In einer eindeutigen Klickstrecke wird vorausgesetzt, dass User nicht nur von der Startseite aus von Ebene zu Ebene über Links (Klicks auf eben diese) navigieren können und sich dann eine neue Seite öffnet, von der man weiter navigieren kann, sondern sogar genauso navigieren muss, um bis zur finalen Ebene (dem Produkt) zu gelangen.

Vielleicht wird durch eine farbliche Unterlegung der drei strukturgebenden Elemente besser deutlich, dass alle drei Wege dieselbe Struktur bzw. Hierarchie beschreiben:

Informationsarchitekturen Screenshot
Hierarchische URL-Struktur, Breadcrumb-Navigation und Klickstrecke sind synchronisiert.

Je mehr Struktur-kommunizierende Elemente an Google dieselbe Hierarchie übermitteln, desto mehr kann Google dieser Hierarchie Vertrauen schenken. Weicht allerdings einer der Kommunikationskanäle von dieser Struktur ab (oder existiert praktisch nicht), ist Google gezwungen, zu raten, welche Hierarchie der entspricht, die zur Interpretation der Website herangezogen werden soll.

Vorgezogenes Fazit

Google benötigt die Unterstützung der Website bzw. der Webmaster, zu erkennen, wie eine Website aufgebaut ist und wie die Bedeutung der einzelnen Seiten innerhalb der Gesamtwebsite zu interpretieren ist.

Je mehr Hierarchie-kommunizierende Elemente Google dazu heranziehen kann und je mehr du dieselbe Hierarchie kommunizierst, desto eher kann Google die Wichtigkeit jeder einzelnen Seite bewerten, indexieren und sinnvoll in den Suchergebnisseiten (SERPs) ranken.

Wie können Fehler in der Struktur vermieden werden?

1. Aufbau eines optimalen URL-Designs

Im SEO der frühen 2000er fand man oft die Empfehlung, URLs so kurz wie möglich zu halten. Auch Google selbst hat einen Anteil an dieser Empfehlung, da zu diesen Zeiten URLs erst nach einer zweizeiligen Darstellung im Snippet abgeschnitten wurden. Matt Cutts hatte seinerzeit die Aussage getroffen (sicher auch in Anlehnung an die Darstellung der URL in den SERPs), dass man URLs mit maximal drei bis fünf Wörtern im URL-Pfad kreieren solle, da längere URLs nicht so gut aussähen für Google.

Das Ergebnis waren viele Webmaster und SEOs, die auf Verzeichnis-Strukturen verzichteten, um direkt mit Dateinamen auf Root-Ebene zu arbeiten. Diese Zeiten sind glücklicherweise lange vorbei und die meisten CMS und E-Commerce-Systeme bieten von Haus aus eine hierarchische Struktur an.

Ein Überbleibsel aus dieser Zeit sind in einigen Systemen die aus der Hierarchie ausgelagerten Produkt-URLs in einen Ordner /p/ oder auch etwas länger /products/ oder auch der Kategorie-URLs in /c/ oder /category/.

So schön dies vielleicht für die Auswertung nach Seitentypen in Analytics-Lösungen sein kann, so hinderlich ist diese Art der URL-Darstellung für das Verständnis der Website-Struktur basierend auf den URLs.

Unsere Beispiel-URL vom Beginn würde sich in einer solchen URL-Struktur in folgende Kategorie- und Produkt-URLs teilen:

https://www.website.tld/shop.html

https://www.website.tld/c/kleidung.html

https://www.website.tld/c/hosen.html

https://www.website.tld/p/blaue-jeans-mit-strassraendern-xl.html

Kannst du aus der /c/hosen.html noch herauslesen, dass es sich um eine Sub-Kategorie von “Kleidung“ handelt? Oder erkennst du an der Produkt-URL, in welcher Kategorie dieses Produkt zu finden ist (angenommen du bist ein “dummer Roboter“ und weißt nicht, dass /c/ für “Kategorie“ steht und eine “Jeans“ ein “Kleidungstück“ der Gattung “Hosen“ ist)?

Einen kleinen Schritt weiter in die richtige Richtung denkend, aber immer noch die aufeinander aufbauende Struktur von URLs missachtend: Wenn “sprechende URLs“ mit IDs kombiniert werden (müssen), um dem Shop-System mitzuteilen, welche Seite anzuzeigen ist. So wie in dem folgenden Beispiel:

https://www.website.tld/shop/

https://www.website.tld/shop/kleidung-c12/

https://www.website.tld/shop/kleidung/hosen-c121/

https://www.website.tld/shop/kleidung/hosen/blaue-jeans-mit-strassraendern-xl-p874590234.html

In der URL zur Sub-Kategorie “Hosen“ ging das “-c12“ verloren, wodurch “Hosen“ (rein der URL-Struktur folgend) nicht mehr dem originalen “Kleidung“-Ordner zugeordnet werden kann.

Dies macht auch das Navigieren über URLs unmöglich (das Wegnehmen eines Teils der URL bis zum nächsten Schrägstrich). Diesen Vorgang durfte ich nicht nur bei Nerds und IT-Professionals, sondern auch bei “normalen“ Internetnutzern bereits beobachten.

Ist man auf die Kategorie- und Produkt-IDs angewiesen, würde ich darauf bestehen wollen, dass auch die IDs in der URL-Struktur an ihrer jeweiligen Position “mitgezogen“ werden, die zu vorgelagerten Kategorien gehören.

https://www.website.tld/shop/kleidung-c12/

https://www.website.tld/shop/kleidung-c12/hosen-c121/

https://www.website.tld/shop/kleidung-c12/hosen-c121/blaue-jeans-mit-strassraendern-xl-p874590234.html

Die Zahl der 2008 von Matt Cutts empfohlenen Maximalzahl von fünf Wörtern (shop, kleidung, c12, hosen, c121, blaue, jeans, mit, strassraendern, xl, p874590234 = 11 “Wörter“) überschreiten wir deutlich, tragen aber gleichzeitig zu einer besseren Interpretationsmöglichkeit der URL in Bezug auf die Website-Architektur bei.

Dabei ist zu bedenken, dass Matts Aussage sich nicht auf die Länge an sich konzentrierte, sondern darauf, dass URLs nicht mittels Keyword Stuffing unnötig verlängert werden sollten. Dies könnte von Google als möglicher Manipulationsversuch entlarvt werden.

Eine andere Form des URL-Designs hat sich vielleicht auf dem Mythos entwickelt, dass man keine tiefen URL-Strukturen bauen sollte, um es Google nicht unnötig schwer zu machen: Jede URL findet direkt auf der Root-Ebene statt. Es gibt keine hierarchischen Strukturen.

Beispiel:

https://www.website.tld/shop/

https://www.website.tld/kleidung/

https://www.website.tld/hosen/

https://www.website.tld/blaue-jeans-mit-strassraendern-xl.html

Doch wem ist damit geholfen? Weder die Auswertung in Analytics wird damit vereinfacht noch können Suchmaschine oder Nutzer die URL nutzen, um sich auf der Website orientieren zu können.

Heute sollten URLs nicht mehr auf Länge, sondern auf Lesbarkeit und Interpretationsmöglichkeit der Website-Struktur optimiert sein.

https://www.website.tld/

https://www.website.tld/shop/

https://www.website.tld/shop/kleidung/

https://www.website.tld/shop/kleidung/hosen/

https://www.website.tld/shop/kleidung/hosen/blaue-jeans-mit-strassraendern-xl.html

Zum Glück sind heutzutage viele Shopsysteme in der Lage, diese Strukturen abzubilden

2. Mehr Orientierung durch Breadcrumbs

Breadcrumbs funktionieren am besten, wenn sie sich an den URLs orientieren dürfen. Das funktioniert natürlich nur, wenn die URLs bereits perfekt hierarchisch aufgebaut sind.

Kann die Breadcrumb nicht dem URL-Aufbau folgen, sollte darauf geachtet werden, dass man den hierarchischen Aufbau in der Breadcrumb-Navigation an jeder Stelle möglich macht.

Die Breadcrumb soll die Brotkrumenspur sein, die Hänsel (im Märchen “Hänsel und Gretel“) auf dem Weg in den tiefen Wald hat fallen lassen, um anschließend wieder herauszufinden.

User sollten also, auch wenn sie z. B. über die Google-Suche direkt auf einer Produktseite in die Website einsteigen, über die Breadcrumb-Navigation die Möglichkeit haben, die hierarchisch vorgelagerten Kategorien oder Sub-Kategorien direkt annavigieren zu können, ohne sich zunächst in der regulären Website-Navigation orientieren zu müssen.

Otto z. B. bildet Produkt-URLs nicht hierarchisch ab, zeigt aber auf Produktseiten eine logisch aufeinander aufbauende Kategorie-Hierarchie in der Breadcrumb-Navigation:

Informationsarchitekturen Screenshot Otto
Screenshot von Otto.de.

Doch die für die Nutzer sichtbare Breadcrumb-Navigation ist nur die halbe Lösung. Wenn dein SEO-Berater über die Breadcrumb-Navigation spricht, dann ist meist das Schema.org-Markup gemeint, welches im Quelltext allein für den Suchmaschinenbot die Position der aktuellen Seite in der Website-Hierarchie kommuniziert.

Die Breadcrumb-Navigation als “strukturierte Daten“ nach Schema.org im Format JSON-LD könnte z. B. so aussehen:

Informationsarchitekturen Screenshot json
Breadcrumb-Beispiel einer Produktseite von Otto.de.

Wie im Screenshot zu sehen ist, beginnt die Breadcrumb mit “position: 1“ und der Startseiten-URL und geht mit jeder Position eine Ebene tiefer in die Website über die Kategorie-Seite “Herren“ in die Sub-Kategorie “(Herren-)Bekleidung“ und von dort über die tiefer liegende Sub-Kategorie “Pullover“ zu den “Sweatshirts“.

Die aktuelle Seite (in diesem Fall das Produkt) muss dabei nicht in dieser Liste vorhanden sein, da es bei Breadcrumbs ja um die Aufwärtsnavigation geht und auch der Bot die aktuelle URL bereits kennt und entsprechend einordnen kann.

3. Mit sinnvollen Klickpfaden die User Experience erhöhen

Es ist eine bereits seit langer Zeit existierende UX-Regel (User Experience-Regel), dass jede Information einer Website – also jede einzelne Seite – innerhalb von maximal drei Klicks erreichbar sein sollte. Dies sei so von den Nutzern gelernt und würde von ihnen erwartet werden.

Da Google vor allen Dingen versucht, die Nutzer der Google-Suche zufriedenzustellen und es voraussetzt, dass Nutzern Ergebnisse (Websites) präsentiert werden, die sie als leicht zugänglich (UX-freundlich) erachten, wurde die 3-Klick-Regel schnell von SEOs in der ganzen Welt adaptiert, als eine wichtige Regel im praktischen SEO definiert und immer wieder weitergetragen.

Dagegen hat bereits Jakob Nielsen in ausführlichen Tests herausgefunden, dass Besucher einer E-Commerce-Website ein konkretes Produkt viel schneller bzw. besser finden (in Zahlen: 600 Prozent besser), wenn über eine tiefere Hierarchisierung die Produkte erst mit vier Klicks erreicht werden.

Dieser Idee folgt auch das seit vielleicht sieben bis zehn Jahren in der Suchmaschinenoptimierung einzuhaltende “Siloing“. Im “Siloing“ wird von der Startseite ausgehend immer tiefer in die aktuelle Kategorie navigiert – im Idealfall unter Ausblendung von Links zu anderen “Silos“.

Informationsarchitekturen Screenshot Baumstruktur
Abbildung einer klassischen Baumstruktur einer Website: die immer tiefer laufenden Silos zeigen, dass immer nur die direkt übergeordnete Ebene auf die tieferen Ebenen verlinkt. Gemeinsam mit einer genau rückwärts gerichteten Breadcrumb-Navigation wird das jeweilige “Silo“ klar in beide Richtungen definiert.

Viele moderne Websites sind zwar vom Prinzip her hierarchisch konzipiert, die interne Verlinkung über große Menüs (insbesondere Mega-Menüs), die auf jeder Seite gleich implementiert sind, erlauben es dem Suchmaschinenbot aber nicht, mehr über die interne Verlinkung dieser Verschachtelung der Silos zu erfahren.

Ein radikaler Ansatz der Siloing-Umsetzung wäre es, die Hauptkategorien nur noch von der Startseite aus zu verlinken, auf den jeweiligen Kategorie-Seiten dann nur noch Links anzubieten, die auf die nächste Sub-Kategorie-Ebene weisen usw. – erst auf der tiefsten Sub-Kategorie-Ebene würde man die passenden Produkte finden.

Natürlich ist das aus UX-Perspektive ein absolutes No-Go. Dennoch können wir uns dieser Theorie bedienen, die Klickstrecke ein Stück weit siloartiger zu gestalten. Hier ist ein Vorschlag:

  1. Mega-Menüs von der Website verbannen – bzw. “Maskieren“ der Links in den “Flyouts“ (Stichwort: “Linkmaskierung“)
  2. Hauptnavigation nur auf die Hauptkategorien verweisen lassen
  3. Auf den Hauptkategorie-Seiten eine Navigationsmöglichkeit anbieten, in die Sub-Kategorien einzusteigen
  4. Entgegen einer ganz strikten Siloing-Struktur belassen wir die Hauptnavigation aber eingeblendet
Informationsarchitekturen Screenshot Otto
Diesen Bereich auf der Startseite von Otto.de würde man mit einer Linkmaskierung behandeln – nicht aber die Hauptnavigations-Punkte wie “Damen“, “Herren“ usw.

Google wird nun “gezwungen“ (wenn sie den Crawl der Website auf der Startseite beginnen), zunächst eine Kategorie-Seite und anschließend eine Sub-Kategorie-Seite zu besuchen, bevor sie die erste Produkt-URL besuchen können.

Informationsarchitekturen Screenshot Otto
Auf der Damen-Kategorieseite würden die Links der Sub-Kategorien der 3. Ebene wie “Anzüge“,
“Bademode“ und “Brillen“ maskiert werden – nicht aber die in der Hierarchie direkt auf “Damen“ folgenden Links wie “Bekleidung“ oder “Accessoires“.

Natürlich wird diese strikte Logik unterbrochen von vereinzelten Produktempfehlungen (z. B. Bestseller auf der Shop-Startseite – oder Kategorie-Bestseller auf den Hauptkategorie-Seiten) und das ist auch in Ordnung. Dadurch aber, dass die Regel für einen Großteil der Produkt-URLs nach wie vor gilt, kann Google die Struktur erfahren und die Website so auf dieselbe Art interpretieren, wie dies ein Nutzer tun würde, der sich auf diese Weise durch die Website navigiert.

Struktur-Synchronisierung

Website-Strukturen in URLs in Form einer imaginären Datei-Struktur mit Ordnern und Dateien abzubilden, ist einfach nachzuvollziehen, da jeder Computer-Nutzer das bereits kennt und so schnell auf die Form der URL übertragen kann. Nutzer können so anhand der URL selbst navigieren und immer eine Ebene “höher“ springen, indem ein Stück der URL bis zu einem “/“ am Ende entfernt wird. Auch für den Bot ist das eine leicht zu erfassende Art der Struktur-Kommunikation. Noch eingängiger für den Bot ist das gezielte Auslesen strukturierter Breadcrumb-Daten in Form von Markup nach dem Schema.org-Vokabular (https://schema.org/BreadcrumbList).

Diese beiden Formen der Struktur-Kommunikation haben jedoch einen Nachteil: Sie sind beide potenziell manipulierbar und können von Suchmaschinenoptimierern instrumentalisiert werden, ohne dass menschliche Website-Nutzer beim Website-Besuch dieselbe Struktur erfahren.

Google und Menschen erfahren über den Klickpfad, wo die einzelnen Seiten der Website hierarchisch zu verorten sind. Diesem müssen Mensch und Bot zwingend folgen, um eine konkrete Seite zu erreichen.

Nur wenn alle drei Struktur-kommunizierenden Elemente (URL, Breadcrumb und Klick-Pfad) dieselbe Struktur kommunizieren (von wenigen Ausnahmen vielleicht abgesehen), kann die Suchmaschine der dreifach identisch übermittelten Hierarchie absolutes Vertrauen schenken.

icon

Disclaimer

Natürlich kann ein Webshop auch erfolgreich werden, wenn nur einzelne oder sogar keiner dieser Aspekte (URL-Design, Breadcrumbs oder Klick-Pfad) optimal gelöst sind. Aber ein besseres Verständnis seitens Google kann dazu führen, dass die Website zu spannenderen Suchbegriffen besser platziert wird. Viel wichtiger aber ist, dass man dagegen arbeitet, dass Google die Website irgendwann einmal schlechter platziert, weil andere, ansonsten ähnlich starke Websites zu deinem Thema, besser verstanden werden.

Eine letzte Anregung aus der Praxis

Nach der Korrektur des Klickpfades bei einigen unserer E-Commerce-Kunden stellten sich in 50 Prozent der Fälle SEO-Visibility-Verbesserungen und damit ein Gewinn an Besuchern ein. Zugegeben – das war nicht immer der Fall und manchmal wirkte sich der Gewinn eher gering aus, manchmal aber eben auch durchaus stärker.

Informationsarchitekturen Screenshot Searchmetrics Suite SEO-Visibility-Anstieg
SEO-Visibility-Anstieg nach der Umsetzung einer Siloing-Klick-Struktur durch Maskierung von Mega-Menü-Links.

Auch bei der Korrektur des URL-Designs in Richtung einer hierarchischen Lösung konnten wir schnell SEO-Visibility-Verbesserungen (meist nach einem kurzfristigen Verlust) feststellen.

Die Korrektur des Breadcrumb-Markups hat bislang selten zu belastbaren Ranking-Verbesserungen geführt. Dennoch möchte ich diese als vergleichsweise einfach umzusetzende und die Usability fördernde Anpassung (wenn nicht nur das Schema.org-Markup, sondern zusätzlich eine echte Breadcrumb-Navigation installiert wird) auch weiterhin unterstützen.

FAQ

Weitere Artikel