Website Struktur & Website Aufbau: Planen, Grundlagen, Begriffe

Familienfoto als Beispiel für Website Struktur

Die Website Struktur ist wie ein Familien­stammbaum

Stell dir vor, deine Website wäre wie ein Familienstammbaum. Ganz oben, die Großeltern – das ist deine Startseite, der Dreh- und Angelpunkt. Von dort aus verzweigt sich der Baum: Eltern, Tanten, Onkel – das sind deine Hauptmenüpunkte, die Tore zu deinen Unterseiten. Und dann kommen die Kinder – deine Inhaltsseiten, gefolgt von den Enkelkindern, den detaillierten Beiträgen oder Produktseiten. Jeder hat seinen festen Platz, jeder ist sinnvoll vernetzt und verlinkt. Drei Generationen unter einem digitalen Dach, jede mit ihrer eigenen Geschichte und Bedeutung für das große Ganze.

Website Struktur: Crawlbarkeit und Vertrauen

Damit Google deine Website überhaupt besuchen kann, brauchen die Suchmaschinen so etwas wie eine Einladung. Stell dir vor, du und deine Familie wohnen in einem sehr großen Haus. Du hast dein Namensschild, deine Domain, an die Tür geschrieben und willst Google und die Suchmaschinen einladen. Damit sie dich besuchen können, müssen alle Türen offen sein.

In der digitalen Welt bedeutet das, dass deine Seiten auf 'index-follow' eingestellt sein sollten. Du kannst das in deinem Backend prüfen, damit erlaubst du Google deine Website zu indexieren. Das ist wichtig, da deine Website sonst nicht in den Suchergebnissen erscheinen kann.

Die Einladung steht in speziellen Hinweisen im Code jeder einzelnen Webseite. Das sind die Meta-Tags index und follow. Im Code sieht das in etwa so aus:

<meta name="robots" content="index, follow">

Wenn du deine Seiten auf 'index-follow' stellst, öffnest du damit deine Türen und Google kann schauen was du machst, bzw. was es auf deiner Seite zu lesen gibt. An der Stelle: Nutze auch immer die Alt-Tags bei deinen Bildern, das sind deine Bildbeschreibungen. Diese kurzen, prägnanten Texte helfen nicht nur Suchmaschinen-Crawlern zu verstehen, was auf den Bildern dargestellt wird, sondern machen deine Inhalte auch für Menschen mit Sehbehinderungen zugänglich. Das Bild sollte übrigens auch immer zum Inhalt passen! Wenn du deinen Alt-Tag schreibst, kannst du, wenn es sinnvoll ist, auch ein Keyword einfügen!

Wenn deine Gäste, die Suchmaschinen, also bei dir vorbeikommen, lernen sie Zimmer für Zimmer deine Familie kennen. Die Links auf deiner Seite sind wie offene Türen, die sie einladen, von einem Raum zum nächsten zu gehen. Deine Hauptnavigation ist dein Treppenhaus, das zu den wichtigsten Räumen führt, während interne Links wie geheime Gänge sind, die auch zu den versteckten Ecken deines digitalen Zuhauses führen.

Eine gut durchdachte Struktur und Zugänglichkeit laden Google ein, sich wie zu Hause zu fühlen. Und wenn die Crawler merken, dass es immer wieder Neues zu entdecken gibt, werden sie gerne öfter vorbeischauen. So baust du Vertrauen auf und sorgst dafür, dass deine Website in den Suchergebnissen ein gern gesehener Gast ist.

Vielleicht gibt es in deinem Haus auch ein Zimmer, das du lieber verschlossen hältst. Da hast du allen möglichen Krimskrams drin und bist noch am sortieren. Damit Google diesen Teil nicht sieht, kannst du ein - Bitte nicht stören Schild - an die Tür hängen, den 'nofollow'-Tag. Google weiß dann, dass diese Seite nicht indexiert werden soll. Wenn du dein Zimmer richtig geheim halten willst, gibt es dafür die Robots.txt.

In den meisten Content-Management-Systemen (CMS) kannst du mit ein paar Klicks festlegen, welche Seiten indexiert und auch gesehen werden dürfen und welche nicht. Setze einfach ein Häkchen in den entsprechenden Einstellungen, und schon hast du die volle Kontrolle darüber, welche Bereiche deines digitalen Zuhauses für Besucher offenstehen und welche geheim bleiben.

open - Crawlbarkeit für Google Suchmaschine
Alle Seiten erreichbar - Crawlbarkeit für Google

Website Struktur planen

Bevor du loslegst solltest du dir überlegen was du mit deiner Website überhaupt erreichen willst.

Was ist das Ziel der Website

  • Kunden (Leads) generieren: Das ist meistens das Hauptziel der Website, also Kundenkontakt, zum Beispiel über Download­möglichkeiten oder Newsletter.
  • Informationen bereitstellen: Anleitungen, Erklärungen, Tests, vielleicht auch mit Videos.
  • Produkte oder Dienstleistungen verkaufen: Das kann entweder ein Webshop sein oder du bist vielleicht Coach, Mentor oder Expertin und bietest deine Kurse an.
  • Markenbewusstsein schaffen: Je mehr Bekanntheit du hast desto besser. Um das zu erreichen stimmst du deine Website mit deinen Werten ab und arbeitest an deinem Image.
  • Kundenbindung: Das funktioniert über Vertrauen. Dafür brauchst du gute Inhalte, ein Blog ist dafür eine super Möglichkeit. Aber auch mit einer ansprechenden Optik und wertvollen Inhalten auf deinen einzelnen Seiten kann dir das gelingen.

Lege dein Hauptziel fest. Konzentriere dich dabei auf eine Sache, sonst verzettelst du dich schnell.

 

Wer ist deine Zielgruppe

Ganz wichtig. Ohne, dass du dir ein Bild gemacht hast, kann es sein, du entwickelst deine Website an deinen potentiellen Kunden und Kundinnen vorbei.

Deshalb schreibe dir auf an wen du denkst und arbeite dir eine Person heraus. Stell dir deinen Wunschkunden oder deine Wunschkundin vor.

Du suchst nach individuellen Antworten bei deinem Webseiten-Aufbau?

Du hast dir schon richtig viel angelesen und weißt eigentlich schon wie du deine Website angehen willst. Aber bei der einen oder anderen Sache wäre es schön genauer nachzufragen. In meiner Website-Hilfe gehen wir deine individuellen Herausforderungen an. Wir klären was du brauchst und finden gemeinsam die beste Lösung, damit du deine Website sicher und mit einem guten Gefühl starten kannst.

Website Struktur erstellen

Fasse Themen, die zusammengehören in eine Kategorie. So verschaffst du deinen Besuchern und Google mehr Klarheit. Zum Beispiel dein Menüpunkt Leistungen, darunter kommt alles was du anbietest. Stell dir vor wie du deine Website besuchen würdest, was würdest du erwarten? Mach dir klar welche Schritte dein Kunde bis zum Ziel geht. Das Ziel ist eine Handlungsaufforderung, ein CTA-Button. Je nachdem welches Hauptziel du für deine Website hast, kommt an dieser Stelle die Information für deinen Website­besucher. Und schreibe klar was bei Klick passiert. Zur Kursanmeldung oder Zur Über-Mich-Seite...

Deine Seiten sollten schnell erreichbar sein, deshalb bitte keine endlosen Verschachtelungen. Die Hauptnavigation selbst am besten 5, höchsten 7 Punkte. Eine typische Website Struktur sieht so aus:

  • Startseite
  • Thema 1
    • Unterthema 1.1
    • Unterthema 1.12
  • Thema 2
  • Thema 3
    • Unterthema 3.1
    • Unterthema 3.12

und so weiter.

Deine Website Struktur ist auch wichtig für SEO - Suchmaschinenoptimierung. Gib deinen Seiten immer eindeutige Seitentitel, sogenannte sprechende URLs. Die URL, der Alias (dass ist das was oben in der Browserzeile steht), ergibt sich aus dem Seitentitel. Manche Systeme erzeugen aber eigene Kreationen, die solltest du im Blick haben und lieber manuell ändern.

Achtung: Wenn du den Alias einer bereits veröffentlichten Seite änderst, findet Google die Seite nicht mehr!! Also hier dann eine Weiterleitungsseite einrichten:-)

Website Aufbau

Der Website Aufbau bezieht sich auf die Anordnung und Gestaltung der einzelnen Seiten deiner Website. Auch hier gehört die Planung an den Anfang. Der Aufbau deiner Website führt deine Leserinnen und Leser. Gut ist, wenn du eine logische Abfolge planst. Schaffe Klarheit. Um was geht es. Was für wen ist eine hilfreiche Frage, die du immer anwenden kannst. Mit der passenden Optik, einem Farbkonzept und Bildern erzielst du zusätzliche, positive Signale damit der User bei dir bleibt.

Dein Website Aufbau soll das Nutzer-Erlebnis und die Benutzerfreundlichkeit verbessern, sprich: Lieber unkompliziert als mega durchdesigned und Verwirrung gestiftet.

Website Aufbau Grundlagen

Ich sehe ganz oft, dass Leute von body sprechen und damit den Hauptinhalt der Webseite meinen. Das ist nicht korrekt. Body ist ein Begriff aus der Programmiersprache bzw. eine Bezeichnung innerhalb des HTML-Gerüstes mit dem deine Website aufgebaut ist. Dein CMS erstellt dir das ganz automatisch. Dieser Aufbau der Website Struktur macht es den Suchmaschinen möglich deine Website zu lesen. Sie hangeln sich von Eintrag zu Eintrag.

Der Aufbau deiner Webseite: Als Erstes gibt es die Information in welcher Sprache deine Website ist. Im darauf folgenden head-Bereich gibt es Einträge zum System, wie die Website heißt, die Beschreibung und mehr. Dann erst kommen die eigentlichen Inhalte deiner Website, sie sind vom body umschlossen.

Je nach CMS haben die einzelnen, darin enthaltenen Elemente unterschiedliche Bezeichnungen, zum Beispiel wrapper oder container. Was gleich ist sind Begriffe für die Website-Struktur: html, head, body -> header, navigation, article, aside (die Sidebar oder Seitenleiste, wenn es sie gibt), footer.

HTML Struktur für deinen Website Aufbau
HTML Gerüst - damit deine Website von Google gelesen werden kann

Header, main, aside, footer

Im Header sind Logo, Navigation, oft auch eine Suchfunktion oder Warenkorb enthalten. Manchmal siehst du noch eine Zeile über der Navigation, die Top-Bar. Viele Websites sind so programmiert, dass die Navigation beim Scrollen stehenbleibt, die Top-Bar aber nach oben verschwindet. Deshalb solltest du hier nur Informationen einfügen, die zweitrangig sind und an einer anderen Stelle noch einmal auftauchen.

Im article, in meinem CMS (Content-Management-System Contao) ist die Bezeichnung dafür main, hier sind in der Regel alle Hauptinhalte drin. Was hier steht ist wichtig. Auch Links, die von hier verweisen, sind in der Wertigkeit höher als aus dem Header, der Sidebar (aside) oder dem Footer.

Sidebar, aside du kannst auch Seitenleiste sagen: Die Sidebar findest du oft in Blogs. Hier sind gerne Untermenü oder Hinweise enthalten. Die Sidebar ist ein eigener Bereich und damit außerhalb der Hauptinhalte. Auf der mobilen Darstellung befindet sie sich unter dem main, erst auf dem Desktop rutscht dieser Teil meistens neben den Hauptinhalt. Das solltest du bei der Planung berücksichtigen!

Der Footer ist auf allen Seiten identisch. Hier sollte dein Impressum und deine Datenschutzerklärung rein, beides muss mit einem Klick erreichbar sein. Auch Hinweise zu Social Media sind sinnvoll oder nochmal alle wichtigen Unterseiten. Links zu deinen eigenen Plattformen kannst du mit dem Hinweis "rel=me" bezeichnen. Damit machst du den Crawlern klar, dass es zu deinen eigenen Posts geht.

Eine Weile wurden dafür nofollow-Links verwendet. Jetzt erläutert Google nofollow Links zu verwenden macht keinen Sinn. Weil: Warum solltest du überhaupt auf eine Plattform oder andere Website verlinken, der du nicht vertraust?

Cookiebar: Wenn du zum Beispiel Youtube-Videos oder Trackingtools eingebaut hast, erzeugen diese Elemente eine direkte Verbindung zu einer externen Plattform. Das bedeutet Daten deines Users gehen beim Aufruf deiner Website dort hin. Um das zu unterbinden, gibt es Cookiebars oder Consent-Manager. Die umfangreichen kosten meistens Geld. Es lohnt sich einen passenden auszusuchen, weil du vielleicht nur wenig an Abfragen nutzt.

Ich finde die Cookiebanner total ätzend. Deshalb verzichte ich meistens auf solche Verbindungen.

Aber Achtung! Manche Systeme bauen dir über Plugins Verbindungen zu diesen Anbietern ganz automatisch ein. Deshalb unbedingt prüfen!

Die Top-Bar ganz oben im Header
Navigation im Header
Top-Bar und Navigation im Header

Website Aufbau Begriffe

Die meisten, die zu mir kommen, möchten eine Homepage und meinen aber eine Website.

Eine Homepage ist die Startseite einer Website. Die Website sind alle einzelnen Seiten zusammen. Mit Webseite ist eine einzelne Seite gemeint. Wenn ich hier von Seite schreibe, meine ich die einzelne Webseite.

Vielleicht kennst du noch den Begriff Onepager. Bei einem Onepager befinden sich alle Inhalte auf einer Seite. Die Navigation ist so eingerichtet, dass die Menüpunkte in der Navigation mit einem bestimmten Inhalt verlinkt sind. Bei Klick scrollst du einfach auf der gleichen Seite nach unten. Nur die Inhalte des Impressums und der Datenschutzerklärung befinden sich auf zusätzlichen Seiten!

Above the fold begegnet dir vielleicht auch ab und zu. Das ist der Teil deiner Website, der sichtbar ist ohne zu scrollen. Hier macht es Sinn eine aussagekräftige Headline zu platzieren, die deine Leserin und Leser abholt.

Social Proof: Vertrauen schaffen. Wir Menschen wollen Bestätigung, dass unsere Entscheidung richtig ist. Wenn andere eine positive Aussage zu einem Produkt machen, das wir interessant finden und vielleicht kaufen wollen, fühlen wir uns gut. Deshalb sind Rezensionen oder bekannt aus... perfekt. Falls du jetzt noch keine Bewertungen hast, alles gut. Dann baust du es später ein!

Website im Aufbau

Eine Website im Aufbau, das ist eine Website die gerade bearbeitet wird. Also eine Cooming-Soon zum Beispiel. Solange du noch in der Entwicklung bist, kannst du auch eine digitale Visitenkarte angeben.

Wenn du deine bereits bestehend Website bearbeitest, rät Google keine Baustellen-Website zu verwenden.

Wenn du also eine Website überarbeitest, erstelle dir lieber ein Duplikat. Mach alles fertig und switche dann um. Im Artikel wird eine 503-Information erwähnt: Das bedeutet eine Website/Server ist momentan nicht erreichbar.

Falls du Seiten bei deiner Überarbeitung erweiterst und du glaubst der Seitentitel passt nicht mehr, Vorsicht! Denn wenn sich der Alias verändert, solltest du die Seite umleiten! Sonst glaubt Google die Seite gibt es nicht mehr.

Besser ist es den Alias so zu lassen, da es bei einer Umleitung zu Rankingverlusten kommen kann. Wenn du komplett neue Inhalte lieferst, macht es wahrscheinlich Sinn eine neue, eigene Seite zu erstellen.

Google: Keine Baustellen-Seite verwenden
Google: Keine Baustellen-Seite verwenden

Website Aufbau Inhalte

Wie du ja weißt, brauchen die Crawler der Suchmaschinen eine Gerüst um Inhalte deuten zu können. Wenn du eine Überschrift, eine Headline schreibst, markierst du sie und wählst zum Beispiel eine h1 oder h2 aus.

Der Code, den dein System (Contao, Wordpress..) dann ausgibt, umschließt deinen Text mit diesen Bezeichnungen. Damit ist für die Crawler und übrigens auch für Screen Reader, die Menschen mit Sehbehinderungen verwenden, klar: Dieser Text ist eine Überschrift und damit wichtig. Es gibt Bezeichnungen von h1 bis h6. Die h1 darf es nur einmal auf der Seite geben. Sie ist richtig für deine allerwichtigste Aussage. Zu jeder Überschrift solltest du auch einen Erklärtext haben, der sinnvoll dazu passt.

Die Reihenfolge ist ebenfalls wichtig! Also keine h4 vor einer h2! Das Problem ergibt sich oft, da die Überschriften als Gestaltungselement genutzt werden. Am besten fragst du deinen Webdesigner oder Webdesignerin, damit sie dir etwas integrieren, um eine passende Schriftgröße auszuwählen und die Reihenfolge korrekt bleibt.

Du kannst deine Texte auch als fett markieren (im Code steht dann strong:-) oder Listenelemente, Bulletpoints integrieren. Damit verstärkst du ebenfalls und gliederst gleichzeitig den Lesefluss.

Homepage Aufbau: deine Startseite

Die Startseite ist der Einstieg in deine Website. Du gibst einen Überblick, damit deine potenziellen Kunden und deine Kundinnen wissen was sie erwarten können. Tendenziell werden Startseiten immer länger und verstärkt für mehr Informationen genutzt.

In deinem Header ist dein Logo, vielleicht noch ein Slogan und deine Navigation.

Im Hauptteil, main, kommt zuerst deine Headline (h1) und ein Bild, das deinen Leser und Leserin anspricht. Deine Überschrift sollte deine Leserin abholen. Wenn du hier kreativ bist und noch unklar ist um was es geht, baue unbedingt eine erklärende Subline ein. Rüberkommen sollte: Was ist der Nutzen für deinen Leser und für wen ist dein Angebot.

Manche platzieren hier einen Slider. Ich würde davon abraten. Er erhöht die Ladezeiten. Außerdem wird durch das schnelle Scrollen, das Nachladen oft nicht bemerkt. Wenn der Slider fix läuft, ist der Text schwer lesbar.

Nach deiner Headline kannst du gleich einen Introtext einbauen, auch ein passender CTA macht hier Sinn.

Im nächsten Abschnitt kann ein emotionaler Text sein oder schon dann Angebote mit einem kurzen Text und Verlinkung zur entsprechenden Unterseite. Ein weiterer Abschnitt, der Vertrauen schafft, ist ein Text über dich. Verweise von hier zu deiner About-Seite.

Jetzt folgen deine Referenzen, dein Social Proof. Wenn es geht am besten mit Fotos deiner Kunden.

Zum guten Schluss eine Handlungsaufforderung. Du kannst auch auf eine Informationsseite verlinken. je nachdem was dein Ziel ist.

Der Abschluss ist dann der Footer in dem du alles Rechtliche integrierst.

Das war das Gerüst, nun kommen die Inhalte: Bevor du dich ans Schreiben deiner Texte machst, überlege dir bitte was für Suchbegriffe eingeben werden, um jemanden mit deinem Angebot zu finden. Schau nach Keywords. Google mal, was andere machen. Hol dir Inspiration.

Denke dabei an deine Zielgruppe. Wie sprichst du sie am besten an? Du? Sie? Auch Farbwahl und deine Bilder sind ein emotionaler Aspekt, um zu kaufen.

Bei deinen Unterseiten ist der Aufbau ähnlich, du gehst aber ausführlicher auf deine Inhalte ein. Content wird immer wichtiger. Google möchte hilfreiche Inhalte. Informationen für die Leserinnen und Leser. Achte dabei auf Keywords und beachte alles was du für deine Suchmaschinenoptimierung anwenden kannst.

Website Aufbau

Fazit - Website Struktur & Aufbau

Wenn ich eine neue Website anfange, beginne ich damit das Ziel festzulegen und meine Zielgruppe zu analysieren. Dann sammle ich alle Ideen in einer Mindnode. Das finde ich super hilfreich. Ich habe einen Überblick, kann ergänzen und auch verschieben. Zum Schluss habe ich eine perfekte Struktur, die ich bei neuen Erkenntnissen erweitern kann. Im nächsten Schritt recherchiere ich Keywords.

Ab dann fängt es an, dass ich mir Gedanken zum Layout und dem Webdesign mache. So entsteht ein Bild in meinem Kopf, das ich entweder erst einmal skizziere oder mit einem Tool umsetze. Meistens beginne ich dann schon Texte zu formulieren, damit ich weiß, wie viel Platz ich brauche, wenn ich die Website angehe.

Die Umsetzung der Website kommt zum Schluss. Mein Lieblings-CMS dafür ist Contao. Es ist super damit zu arbeiten. Contao liebe ich, weil du alles damit machen kannst. Es ist im Vergleich zu anderen Content-Management-Systemen richtig schnell und sehr sicher.

Wenn du Fragen hast, schreib mir einfach:-)

Noch ein kleiner Funfact zu meinem Einstiegsbild: Früher wurde bei Fotografien deshalb nicht gelächelt, weil die Belichtungszeit so lang war. Es gab sogar Sitze mit Kopfstützen, um es den Portraitierten zu erleichtern.

Christina Martens von go hooray - online sichtbar werden

Christina Martens

Meer, Wind, meinen Job, den ich seit fast 30 Jahren mache. Alles Dinge, die ich liebe und mit Leidenschaft lebe.

 

go hooray gibt es damit du, auch wenn du noch nie etwas mit Webseiten zu tun hattest, eine Website bekommst, die du selbst anpassen kannst, dich zeigt und dich richtig stolz macht. Mehr zu mir...