Eine gute Website sieht nicht nur ansprechend aus. Besucher:innen müssen sich auf ihr zurechtfinden, wichtige Informationen schnell erreichen und verstehen, welchen nächsten Weg sie nehmen können. Dafür braucht es einen durchdachten Website-Aufbau.
Dabei geht es sowohl um die einzelnen Bereiche einer Webseite – etwa Header, Hauptinhalt und Footer – als auch um die Struktur der gesamten Website. Gerade für Onlineshops ist diese Unterscheidung wichtig: Neben dem Aufbau einzelner Produkt- oder Kategorieseiten entscheidet die Verbindung dieser Seiten darüber, wie einfach Kund:innen passende Produkte finden können.
In diesem Beitrag erfährst du, aus welchen Bereichen eine Website besteht, welche Seiten sinnvoll sind und wie du den Aufbau Schritt für Schritt planst.
Wie sieht der typische Website-Aufbau aus?
Eine Website besteht typischerweise aus einem Header mit Navigation, einem Hero-Bereich, dem Hauptinhalt und einem Footer. Zusätzlich werden die einzelnen Webseiten innerhalb einer hierarchischen Struktur miteinander verbunden – beispielsweise von der Startseite über Kategorien und Unterseiten bis hin zu Produkt- oder Detailseiten.
Warum ist ein guter Website-Aufbau wichtig?
Eine klare Struktur erleichtert Besucher:innen die Orientierung. Wer ohne langes Suchen erkennt, wo Produkte, Informationen oder Kontaktmöglichkeiten zu finden sind, kann sich einfacher durch eine Website bewegen.
Das ist besonders im E-Commerce relevant. Ein Onlineshop kann beispielsweise Hunderte oder Tausende Produkte enthalten. Ohne nachvollziehbare Kategorien, Navigation, Suchfunktion und interne Verlinkung fällt es Kund:innen schwer, das passende Angebot zu finden.
Ein durchdachter Aufbau unterstützt außerdem die Suchmaschinenoptimierung. Eine klare Hierarchie hilft Suchmaschinen dabei, Zusammenhänge zwischen Startseite, Kategorien, Produkten und Informationsseiten nachzuvollziehen. Interne Links verdeutlichen zusätzlich, welche Inhalte zusammengehören.
Ein sinnvoller Website-Aufbau erfüllt damit mehrere Aufgaben:
- Er schafft Orientierung für Besucher:innen.
- Er macht wichtige Inhalte leichter erreichbar.
- Er strukturiert umfangreiche Angebote.
- Er unterstützt die Nutzerfreundlichkeit auf Desktop und Mobilgeräten.
- Er erleichtert Suchmaschinen das Erfassen der Website-Struktur.
Der Aufbau sollte deshalb nicht erst festgelegt werden, wenn Design und Inhalte bereits fertig sind. Idealerweise gehört die Struktur zu den ersten Schritten bei der Website-Planung.
Aus welchen Bereichen besteht eine Webseite?
Die meisten Webseiten lassen sich grundsätzlich in Header, Hauptinhalt und Footer unterteilen. Je nach Seitentyp kommen weitere Elemente wie Hero-Bereich, Suchfunktion, Filter oder Formulare hinzu.
Header und Navigation
Der Header befindet sich am oberen Rand einer Webseite und dient vor allem der Orientierung. Er bleibt auf vielen Websites über verschiedene Unterseiten hinweg ähnlich oder identisch.
Typische Bestandteile sind:
- Logo
- Hauptnavigation
- Suchfunktion
- Kundenkonto oder Login
- gegebenenfalls Warenkorb
Welche Elemente sinnvoll sind, hängt von der Website ab. Für einen kleinen Unternehmensauftritt kann eine einfache Navigation ausreichen. Bei einem umfangreichen Onlineshop gewinnt dagegen die Suche an Bedeutung, weil Kund:innen damit direkt nach Produkten, Kategorien oder Marken suchen können.
Das Logo wird üblicherweise mit der Startseite verknüpft. Dadurch können Besucher:innen von nahezu jeder Unterseite zum Ausgangspunkt der Website zurückkehren.
Hero-Bereich
Direkt unter oder teilweise innerhalb des Headers befindet sich auf vielen Websites ein Hero-Bereich. Dabei handelt es sich um den großflächigen ersten Inhaltsbereich, den Besucher:innen sehen.
Er kann beispielsweise aus einer Überschrift, einem kurzen Text sowie einem Bild oder Video bestehen. Seine wichtigste Aufgabe ist Orientierung: Nutzer:innen sollten schnell erfassen können, worum es auf der Seite geht.
Auf einer Startseite kann der Hero einen Überblick über das Unternehmen und sein Angebot geben. Auf einer Kategorieseite sollte er dagegen vor allem deutlich machen, welche Produkte zu dieser Kategorie gehören.
Ein Hero-Bereich ist allerdings kein Pflichtbestandteil jeder Webseite. Bei Seiten, auf denen Besucher:innen möglichst schnell zu bestimmten Inhalten gelangen sollen, kann ein kompakter Einstieg sinnvoller sein.
Hauptinhalt
Der Hauptinhalt oder Body nimmt in der Regel den größten Teil einer Webseite ein. Was hier erscheint, hängt stark vom Seitentyp ab.
Mögliche Inhalte sind beispielsweise Texte, Bilder, Videos, Produktinformationen, Produktlisten, Tabellen, Filter oder Formulare.
Auch die Struktur des Hauptinhalts ist wichtig. Klare Überschriften, kurze Absätze und logisch angeordnete Abschnitte erleichtern es Besucher:innen, Inhalte zu überfliegen und die für sie relevanten Informationen zu finden.
Auf einer Produktseite könnte der Hauptinhalt beispielsweise Produktbilder, Beschreibung, Varianten, Preis und weitere Produktinformationen enthalten. Eine Blogseite ist dagegen stärker durch Überschriften, Textabschnitte und ergänzende Medien geprägt.
Footer
Der Footer bildet den unteren Abschluss einer Webseite und bleibt normalerweise ebenfalls über mehrere Unterseiten hinweg gleich.
Hier finden sich häufig Informationen und Links, die wichtig sind, aber nicht dauerhaft Platz in der Hauptnavigation benötigen. Dazu können Kontaktinformationen, Serviceseiten, rechtlich erforderliche Seiten oder zusätzliche Navigationsmöglichkeiten gehören.
Bei umfangreichen Websites kann der Footer zugleich eine zweite Navigationsebene bilden. Während das Hauptmenü auf wenige zentrale Wege beschränkt bleibt, bietet der Footer Platz für ergänzende Seiten.
Wie ist eine komplette Website aufgebaut?
Neben der Gestaltung einzelner Webseiten solltest du die Architektur des gesamten Internetauftritts planen. Die meisten Websites folgen dabei einer hierarchischen Struktur.
Den Ausgangspunkt bildet üblicherweise die Startseite. Von dort führen Links zu wichtigen Bereichen und Unterseiten. Diese können wiederum weitere Unterseiten enthalten.
Eine einfache Unternehmenswebsite könnte beispielsweise so strukturiert sein:
Startseite
→ Leistungen
→ Über uns
→ Blog
→ Kontakt
Bei einem Onlineshop entsteht häufig eine umfangreichere Hierarchie:
Startseite
→ Produktkategorie
→ Unterkategorie
→ Produktseite
Daneben können Bereiche wie Blog oder Ratgeber, Kundenservice und weitere Informationsseiten stehen.
Ziel ist nicht, möglichst viele Ebenen anzulegen. Die Struktur sollte vielmehr so tief wie nötig und so übersichtlich wie möglich sein. Wenn Besucher:innen mehrere verschachtelte Ebenen durchlaufen müssen, um wichtige Inhalte zu erreichen, kann die Navigation unnötig kompliziert werden.
Eine klare Website-Hierarchie hilft außerdem dabei, Inhalte thematisch zu ordnen. Produkte aus derselben Produktgruppe können beispielsweise einer gemeinsamen Kategorie zugeordnet werden, während Ratgeberartikel zusätzliche Fragen rund um diese Produktgruppe beantworten.
Welche Seiten braucht eine Website?
Welche Seiten erforderlich oder sinnvoll sind, hängt vom Zweck der Website ab. Ein Portfolio benötigt eine andere Struktur als ein umfangreicher Onlineshop.
Zu den häufigsten Seitentypen gehören:
Startseite
Die Startseite dient als zentraler Orientierungspunkt. Sie sollte vermitteln, worum es auf der Website geht, und Wege zu den wichtigsten Bereichen anbieten.
Bei einem Onlineshop können das beispielsweise Produktkategorien, ausgewählte Produkte, neue Kollektionen oder relevante Serviceinformationen sein.
Die Startseite muss dabei nicht jeden Inhalt ausführlich erklären. Ihre Aufgabe besteht vielmehr darin, einen Überblick zu schaffen und Besucher:innen sinnvoll weiterzuführen.
Kategorie- und Unterkategorieseiten
Kategorieseiten sind für Onlineshops besonders wichtig. Sie bündeln ähnliche Produkte und erleichtern dadurch das Browsen.
Ein Shop für Sportbekleidung könnte zum Beispiel Kategorien für Oberteile, Hosen und Schuhe verwenden. Bei einem großen Sortiment können zusätzliche Unterkategorien sinnvoll sein.
Wie fein diese Struktur wird, sollte sich daran orientieren, wie Kund:innen nach Produkten suchen und wie umfangreich das Sortiment ist.
Produktseiten
Produktseiten stellen einzelne Artikel vor. Hier benötigen Kund:innen alle Informationen, die für die Beurteilung eines Produkts relevant sind.
Welche Angaben dazu gehören, hängt vom Sortiment ab. Häufig finden sich dort Produktbilder, Beschreibungen, Varianten, Preise, Größen- oder Materialinformationen und Hinweise zu Lieferung oder Verfügbarkeit.
Auch Empfehlungen zu ergänzenden oder verwandten Produkten können Teil der Seitenstruktur sein.
Über-uns-Seite
Eine Über-uns-Seite liefert Hintergrundinformationen zum Unternehmen, zur Marke oder zu den Personen dahinter.
Sie kann besonders dann hilfreich sein, wenn Herkunft, Herstellung, Unternehmensgeschichte oder bestimmte Werte eine wichtige Rolle bei der Positionierung spielen.
Kontakt- und Serviceseiten
Besucher:innen sollten schnell herausfinden können, wie sie bei Fragen Unterstützung erhalten.
Je nach Geschäftsmodell können dafür eine Kontaktseite, Hilfe-Center, FAQ-Seiten oder Informationen rund um Bestellung und Versand sinnvoll sein.
Blog oder Ratgeber
Ein Blog oder Ratgeber bietet Platz für Inhalte, die über einzelne Produkte hinausgehen.
Ein Onlineshop für Kaffee könnte beispielsweise nicht nur Kaffeemaschinen verkaufen, sondern auch erklären, wie unterschiedliche Zubereitungsmethoden funktionieren. Solche Inhalte helfen Besucher:innen bei Fragen, die vor, während oder nach einer Kaufentscheidung entstehen können.
Gleichzeitig können Informationsseiten Suchanfragen abdecken, für die reine Produkt- oder Kategorieseiten nicht geeignet sind.
Weitere notwendige Seiten
Abhängig von Geschäftsmodell, Standort und geltenden Anforderungen können weitere Informations- und rechtlich erforderliche Seiten hinzukommen. Sie sollten so eingebunden sein, dass Besucher:innen sie zuverlässig finden können, ohne dass die Hauptnavigation dadurch unnötig umfangreich wird.
Navigation: So finden sich Besucher:innen auf deiner Website zurecht
Eine gute Website-Struktur funktioniert nur, wenn Besucher:innen sie auch nutzen können. Navigation und interne Verlinkung machen die Struktur sichtbar.
Das Hauptmenü sollte deshalb die wichtigsten Bereiche der Website abbilden und verständliche Bezeichnungen verwenden.
Je nach Umfang der Website kommen unterschiedliche Menütypen infrage. Eine horizontale Navigation eignet sich beispielsweise für eine überschaubare Zahl von Menüpunkten. Dropdown-Menüs können Unterkategorien bündeln. Bei großen Onlineshops kommen häufig Mega-Menüs zum Einsatz, in denen mehrere Kategorien und Unterkategorien gleichzeitig sichtbar werden.
Auf Mobilgeräten wird die Navigation meist platzsparend hinter einem sogenannten Hamburger-Menü zusammengefasst.
Unabhängig vom Menütyp gilt: Besucher:innen sollten möglichst wenig darüber nachdenken müssen, wo sie einen bestimmten Inhalt finden.
Besonders bei Onlineshops können zusätzliche Navigationselemente helfen:
- Suchfunktion für die direkte Produktsuche
- Filter zur Eingrenzung großer Sortimente
- Breadcrumbs zur Orientierung innerhalb der Seitenhierarchie
- interne Links zu verwandten Kategorien, Produkten oder Inhalten
Die Navigation sollte außerdem regelmäßig auf verschiedenen Bildschirmgrößen geprüft werden. Eine Struktur, die am Desktop übersichtlich wirkt, kann auf einem Smartphone schnell unpraktisch werden.
Was ist beim Website-Aufbau eines Onlineshops besonders wichtig?
Bei einem Onlineshop steht nicht nur die Vermittlung von Informationen im Mittelpunkt. Besucher:innen müssen aus einem unter Umständen sehr großen Sortiment passende Produkte auswählen können.
Dadurch entstehen zusätzliche Anforderungen an die Website-Struktur.
Kategorien sollten zum Sortiment passen
Die Kategorien bilden das Grundgerüst eines Onlineshops. Sie sollten Produkte sinnvoll gruppieren, ohne unnötig viele Ebenen zu erzeugen.
Ein kleiner Shop benötigt möglicherweise nur wenige Hauptkategorien. Bei einem umfangreichen Sortiment können Unterkategorien notwendig werden.
Entscheidend ist, dass die Einteilung für Kund:innen nachvollziehbar bleibt.
Suche und Filter ergänzen die Navigation
Je größer das Sortiment wird, desto wichtiger werden alternative Wege zu Produkten.
Eine Suchfunktion hilft Nutzer:innen, die bereits relativ genau wissen, wonach sie suchen. Filter unterstützen dagegen beim Eingrenzen einer Kategorie, beispielsweise anhand von Größe, Farbe, Preis oder anderen Produkteigenschaften.
Navigation, Suche und Filter sollten deshalb nicht isoliert betrachtet werden. Gemeinsam bilden sie das Orientierungssystem des Shops.
Produktseiten brauchen eine klare Informationshierarchie
Nicht jede Information ist auf einer Produktseite gleich wichtig.
Zentrale Produktmerkmale sollten leicht erfassbar sein. Ergänzende Details können weiter unten auf der Seite folgen oder strukturiert zusammengefasst werden.
Dadurch müssen Kund:innen nicht lange suchen, um die für ihre Entscheidung relevanten Angaben zu finden.
Mobile Nutzung sollte von Beginn an mitgedacht werden
Auf kleinen Bildschirmen steht deutlich weniger Platz für Menüs, Produktübersichten und Filter zur Verfügung.
Der mobile Aufbau sollte deshalb nicht erst nachträglich aus der Desktop-Version abgeleitet werden. Navigation, Suche, Produktdarstellung und andere zentrale Funktionen sollten auch auf Smartphones einfach bedienbar bleiben.
Fazit: Ein guter Website-Aufbau schafft Orientierung
Der Website-Aufbau umfasst mehr als die sichtbare Gestaltung einer einzelnen Seite. Header, Hero-Bereich, Hauptinhalt und Footer bilden den grundlegenden Rahmen. Erst durch eine nachvollziehbare Hierarchie, Navigation und interne Verlinkung entsteht daraus jedoch eine vollständige Website.
Bei Onlineshops kommen weitere Anforderungen hinzu. Kategorien, Produktseiten, Suche und Filter müssen zusammenspielen, damit Kund:innen auch in großen Sortimenten den Überblick behalten.
Wenn du die Struktur frühzeitig aus Sicht deiner Besucher:innen planst und die unterschiedlichen Aufgaben einzelner Seitentypen berücksichtigst, entsteht eine Website, auf der Informationen und Produkte leichter gefunden werden können.
