Skip to main content

Schlagwort: Website Aufbau

Aufbau einer Website: Struktur trumpft Style – Tipps für die Strukturierung

Beim Aufbau oder der Neugestaltung einer Website steht oftmals das Aussehen im Fokus. Dabei sind Struktur und Inhalt deutlich wichtiger. Warum? Beide nutzen direkt der Nutzererfahrung (UX) und der Suchmaschinenoptimierung (SEO). Eine logische Strukturierung vereinfacht das Navigieren und Finden von Inhalten für Nutzer, was sich positiv auf die Konversionsrate auswirkt. Zeitgleich unterstützt ein strukturierter Aufbau alle SEO-Bestrebungen und hilft beim Ranking in den Suchmaschinen. Die Strukturierung und Organisation ist allerdings oft eine Herausforderung. Die folgenden Tipps helfen, diese Aufgabe effizient umzusetzen.

Die Startseite ist der Startpunkt der Website-Anatomie

Nicht jeder Nutzer landet unbedingt zuerst auf der Startseite, wenn er über ein Suchmaschinen-Ergebnis auf die Website gelangt. Viele gelangen jedoch direkt drauf oder klicken sich von einer tiefen Seite auf die Startseite durch, um sich einen Überblick über die Inhalte und die Navigation dorthin zu verschaffen. Die Startseite muss also neuen Nutzern einen Eindruck davon vermitteln, was das Unternehmen bietet. Statt langweiliger Willkommenstexte sind hier knappe und gut strukturierte Inhalte gefragt. Kurze Sätze, einfache Wörter, Zwischenüberschriften und eine gute Portion interner Links sind ideal und wirken nicht überladen. Inspiration für die Betextung liefert ein typisches Erstkunden-Gespräch: Was müssen Kunden unbedingt wissen? Welche Fragen werden immer wieder gestellt?

Top-Level-Navigation

Vieles muss nicht in Sätzen, sondern kann in Stichpunkten mit der Top-Level-Navigation beantwortet werden. Die Top-Level-Navigation stellt das höchste Level der Website-Architektur dar und zeigt Nutzern, welche Inhalte sie erwarten können, sowie den Weg dorthin. Für kleinere Websites reichen eine Handvoll an Begriffen wie etwa Leistungen, Referenzen oder Blog. Große Websites von Amazon bis Zalando nutzen mehrstufige Mega-Menüs, um Nutzern ihre Inhalte zu präsentieren. Die Platzhirsche der eigenen Branche bieten sich als Inspirationsquelle an, wie man die Navigation gestalten kann. Sich an der Struktur großer und beliebter Websites zu orientieren hat den Vorteil, dass die eigene Website neuen Nutzern gleich vertraut vorkommt und sie keine Probleme damit haben, sich zurechtzufinden.

Footer

Häufig unterschätzt wird die Fußzeile (Footer). Dort finden sich oftmals die langweiligeren Dinge wie die AGB, Hinweise zum Datenschutz, das Impressum oder die Kontaktmöglichkeiten. Der Footer muss aber keineswegs klein und unauffällig sein. Zum einen lassen sich Menüpunkte aus der Hauptnavigation wiederholen. Zum anderen kann man interessante Punkte, die es nicht in die Top-Level-Navigation geschafft haben, hier auflisten sowie Social Media Buttons hinzufügen. Bei den Social Media Buttons gibt es zwei Varianten. Erstens die Social Share Buttons, mit denen die Inhalte der aktuellen Website geteilt werden können (zum Beispiel „Share this“ für Facebook oder „Tweet this“ für Twitter). Zweitens die Social Follow Buttons, über die Nutzer der Website den Social-Media-Accounts folgen können.

Breadcrumbs

Da der Footer auf jeder Unterseite automatisch erscheint, wird das Seitenelement auch für sogenannte Brotkrümel (Breadcrumbs) genutzt. Die Breadcrumbs helfen, den Weg zurück zur Startseite zu finden. Ganz ähnlich wie bei Hänsel und Gretel. Im E-Commerce-Bereich haben sich aber noch einen anderen Vorteil: Sie helfen, von einer tiefen Unterseite zur Kategorieseite zu gelangen. Wer beispielsweise eine weiße Fahrradtasche über die Suchmaschine gefunden hat, kann mithilfe von Breadcrums schnell zum Überblick aller Fahrradtaschen gelangen, ohne über die Startseite und weitere Unterkategorien gehen zu müssen. Für eine kleine Website mit flacher Struktur sind Breadcrumbs unnötig. Je größer die Website ist oder in Zukunft werden soll, desto sinnvoller ist es, auf tiefen Unterseiten kleine Brotkrümel für die Kundschaft zu hinterlassen. Mittelgroße und große E-Commerce-Seiten sollten Breadcrumbs nicht unterschätzen.

Die Startseite steht an der Spitze der Website-Anatomie und zeigt Nutzern den Weg zu den Unterseiten. Bei größeren Websites ist diese Struktur durchaus komplex. Daher empfiehlt es sich immer, sich zur Inspiration die Strukturierung bei der Konkurrenz anzusehen.

Visualisierung der Website-Struktur anfertigen

Als Sitemap wird eine hierarchische Strukturierung des Inhalts (also aller Top-Level-Seiten und Unterseiten) bezeichnet. Anders ausgedrückt: Es ist ein logischer Plan der Struktur einer Website. Die HTML-Sitemap (und idealerweise zusätzlich eine XML-Sitemap) ist ein Muss für jede Internetpräsenz und ihr Fehlen wäre ein klares SEO-Defizit. Denn fehlt die Sitemap, haben es Suchmaschinen-Webcrawler deutlich schwerer, die Inhalte und den Aufbau zu inspizieren und zu indexieren. Die Sitemap sollte immer dann aktualisiert werden, wenn Änderungen und Ergänzungen vorgenommen werden, die den Aufbau der Internetpräsenz beeinflussen.

Dieser logische Plan lässt sich visuell abbilden. Die Visualisierung wird häufig in Form eines Baumdiagramms dargestellt. Ein solches Baumdiagramm ist eine gute Idee, um sich zu vergegenwärtigen, welche Seiten bereits bestehen beziehungsweise welche Seitentypen gebraucht werden. Bei den Top-Level-Seiten gibt es mehrere Varianten:

  • eigenständige Seite (Stand-alone page), die keine Unterseiten in tieferen Ebenen hat (geeignet etwa für Kontakt, Preise, Tools etc.)
  • Kategorieseite (Category page), von der Unterseiten ausgehen (geeignet für Produktkategorien, Blog, Karriereseite etc.)
  • Drehkreuzseite (Content hub page), die übergeordnete Inhalte zu einem Thema mit vielen Unterthemen anzeigt (geeignet etwa für Themen wie Online Marketing mit Unterthemen wie Social Media Marketing, Influencer Marketing, Suchmaschinenoptimierung etc.)

Wenn eine Website neu erstellt wird, lässt sich die Visualisierung mit dem gesamten Team teilen. So wissen alle, welche Seiten in Bearbeitung, welche fertiggestellt oder noch erstellt werden müssen. Auch für die Designer ist es nützlich zu wissen, welche Seiten im Top-Level Priorität genießen. Und falls die Seite später um Unterseiten ergänzt wird, zeigt das Baumdiagramm, wo sie hingehören. Außerdem können Sitemaps dabei helfen, den Überblick darüber zu behalten, welche (Unter-)Seiten wann aktualisiert wurden. Denn jede Website sollte regelmäßig auf den aktuellen Stand gebracht werden.

Die ausgedruckte Visualisierung zeigt Aufbau und Struktur. Bei einer großen Website kann das einen riesigen Konferenztisch einnehmen. Aber auch bei kleineren Websites ist die Visualisierung oft überraschend groß. Eine solche Visualisierung lässt sich mit einer Mindmap-Software erstellen (zum Beispiel mit Xmind).

Bei der Visualisierung einer Website sind zwei Dinge hilfreich:

  • Keyword-Recherche als Grundlage der Strukturierung nutzen. Die wichtigsten Keywords werden zu Top-Level-Seiten. Ein Blick zur Konkurrenz ist meist sehr aufschlussreich.
  • Struktur lieber flach als tief anlegen. Der Grund dafür ist, dass bei flach strukturierten Websites einzelne Seiten nur wenige Klicks voneinander entfernt sind. Das ist günstig für die Nutzererfahrung und steigert die Crawler-Effizienz. Sind Seiten mehr als sechs Klicks voneinander entfernt, schrumpft die Zahl der Nutzer, die bereits sind, so viel beim Navigieren zu klicken. Auch das Zugreifen der Suchmaschinen wird durch einen so tiefen Aufbau erschwert. Wie tief eine Website-Architektur ist, lässt sich mit Site-Audit-Tools prüfen.

Guter Content: Inhalte auf Unterseiten strukturieren

Nicht nur die Startseite, sondern auch alle Unterseiten sollten übersichtlich gestaltet sein. Insbesondere für textlastige Seiten ist das wichtig, damit Nutzer das Interesse nicht verlieren. Speziell auf mobilen Endgeräten wirken lange Texte geradezu unleserlich.

via GIPHY

Bestandstexte sowie neue Texte sollten gut strukturiert aufgearbeitet werden. Überschriften (h1), Zwischenüberschriften (h2, h3,…) und kurze Textblöcke mit etwa 100 bis 200 Wörtern gliedern einen Fließtext optisch und erleichtern das Lesen. Ist der gesamte Text maximal 300 Wörter lang, sind Zwischenüberschriften unsinnig. Höchstens eine Zwischenüberschrift (h2) wäre dann möglich, ist aber meist nicht nötig.

Damit sich der Text auf jedem Endgerät gut lesen lässt, ist eine klar erkennbare Schrift mit gutem Kontrast (also nicht beispielsweise Gelb auf Weiß, das ist kontrastarm und lässt sich schwer lesen) sowie in ausreichender Größe wichtig. Interne Verlinkungen zu übergeordneten oder untergeordneten Themen oder Kategorien dürfen ebenfalls nicht fehlen. Diese möglichst direkt im oder zum Text und nicht auf Multimediaelemente setzen.

Eine klickbare Inhaltsangabe zeigt Inhalt und Aufbau des Textes auf einen Blick und ermöglicht es Nutzern, schnell zu den für sie am meisten relevanten Inhalten zu springen. Zusätzlich lockern Elemente wie Aufzählungen, Bilder, Diagramme oder Tabellen das Geschriebene auf. Idealerweise wird der Text durch die optischen Elemente leichter verständlich. Dabei sollte ein Aspekt dringend beachtet werden: die Ladezeit. Visuelle Elemente, die langsam laden, ziehen die Website herunter. Eine langsame Ladezeit hebt den eigentlichen Nutzen des Elements auf. Daher nur visuelle Elemente verwenden, die keine negativen Effekte auf die Ladezeit haben. Im Bezug auf Videos heißt das, dass erst Texte mit mindestens 1.000 Wörtern mit Videos aufgelockert werden können.

Durch Dinge wie „Ähnliche Beiträge“ und „Tagging“ werden Klicktiefe und Crawltiefe positiv beeinflusst.

Wer sich daran macht, mehr Struktur in bereits bestehenden Content zu bringen, sollte direkt eine andere Aufgabe dranhängen und die alten Texte aktualisieren. Dafür ist es nicht nötig, den gesamten Text zu überarbeiten. Vielmehr hat sich ein Update am Textende bewährt. Dieses Update kann je nach Thema kürzer oder länger ausfallen und entweder neue Inhalte einbringen oder klarstellen, dass der Text aus dem Jahr XY stammt und sich seither die Dinge weiterentwickelt haben.

Zusätzlich gut ist es, hinter dem ursprünglichen Datum der Veröffentlichung, den Vermerk Update mit dem aktuellen Datum zu setzen. So sehen Nutzer, dass der Text aktualisiert worden ist und die Wahrscheinlichkeit, dass sie Weiterlesen, steigt. Außerdem ermuntert die regelmäßige Aktualisierung Webcrawler dazu, die Seite regelmäßig zu besuchen. Wo es sich anbietet, kann sogar der Titel geändert werden – etwa mit einer Ergänzung wie „Update 2022“. Hier ist es wichtig zu beachten, dass Keywords erhalten bleiben, um das Ranking der Unterseite nicht zu gefährden.

Referenzen und Portfolio

Referenzen und ein Portfolio abgeschlossener Aufträge sind Instrumente, die schnell eine emotionale Verbindung zum Nutzer schaffen. Wer zum ersten Mal auf die Website kommt, kann sich so einen genaueren Eindruck verschaffen, was geboten wird. Vor allem Bilder helfen Interessenten, sich selbst in die Position des Kunden zu versetzen. In diesem Sinne ist es wichtig, diesen Content gut zu bebildern und geschickt zu betexten. Referenzen (auch Testimonial genannt) sollten stets in den Worten des Kunden verfasst sein. Fremdwörter oder komplizierte Ausdrücke sind in den meisten Branchen kontraproduktiv.

Lieber sind zwei, drei einfache Sätze, die die positive Erfahrung oder Leistung darstellen. Es ist möglich, die Testimonials direkt auf die Startseite zu setzen. Alternativ kann auch eine gesonderte Top-Level-Seite erstellt werden, auf der die Referenzen aufgelistet sind. Je nach Branche mag eine Liste der Unternehmen oder Organisationen ohne direkte Zitate reichen. Dann bietet sich eine knappe stichwortartige Beschreibung des Projekts an, oder eine Verlinkung zum Projekt.

Wer seine Arbeit präsentieren möchte, kann abgeschlossen Aufträge auf einer Portfolio-Seite auflisten. Hier empfiehlt sich eine eigene Top-Level-Seite, auf der Bilder der abgeschlossenen Projekte stehen. Hochwertige Bilder reduzieren den Bedarf an Text. Sinnvoll sind stichpunktartige schriftliche Angaben, die den Bildern Kontext verleihen (etwa Art des Projekts, Umfang, Dauer, Kosten etc.). Eine strukturierte Gliederung und die Ladezeit sollten beachtet werden. Unter Umständen kann auf der Startseite eine prominente Verlinkung zum Portfolio gesetzt werden (etwa eine Bildergalerie, die zum Klicken einlädt).

Die Vorteile einer guten Website-Struktur

Der eigenen Website eine gute Struktur zu verpassen – entweder von Anfang an oder nachträglich – hat mehrere Vorteile.

Zuallererst ist die Nutzererfahrung (UX oder User Experience genannt) um Welten besser, wenn eine Website gut strukturiert ist. Nutzer, die das Gesuchte zügig finden, sind zufriedener und eher geneigt, den Kaufbutton zu drücken. Wenn Nutzer nicht in drei bis vier Klicks zum gesuchten Produkt finden, springen viele lieber zur Konkurrenz ab. Das Motto an dieser Stelle ist daher eine angemessene und angenehme Klicktiefe zu finden.

An zweiter Stelle ist ein strukturierter Aufbau auch für die Platzierung in den Suchmaschinen förderlich. Er wirkt sich positiv auf die Crawl-Effizienz aus. Eine gute Struktur bedeutet nämlich, dass es viele interne Verlinkungen gibt, die die Top-Level-Seiten mit Unterseiten verlinken. Eine solche Linkstruktur verhilft dem sogenannten PageRank (PR) zum Fließen. Dieser PageRank stammt noch aus den Anfangszeiten von Google, misst interne und externe Verlinkungen und repräsentiert die Autorität, die eine Website besitzt. Bis heute wird der PageRank als Ranking-Signal genutzt. Seiten mit einer höheren Anzahl an internen Links ranken tendenziell besser als Seiten mit wenigen oder ohne interne Links. Daher ist es sinnvoll, alle relevanten Unterseiten miteinander sowie mit den relevanten Top-Level-Seiten zu verknüpfen. Dabei gilt: Wirklich nur verlinken, was für die Nutzer sinnvoll ist. Willkürlich gesetzte Verlinkungen wirken sich negativ aus.

Cleverer Einsatz von internen Verlinkungen, den verwendeten Anker-Texten sowie eine gute Struktur der Website können einen weiteren Vorteil bringen, denn Suchmaschinen wie Google zeigen beliebte Unterseiten als sogenannte Sitelinks an. Dabei stehen unter dem eigentlichen Suchergebnis bis zu sechs Sitelinks, die etwa auf häufig gesuchte Dinge wie Öffnungszeiten oder Kontakt führen. Ein anderes Beispiel wäre, wenn beim Suchbegriff „Schuhe“ unter dem Suchergebnis für Zalando mehrere Sitelinks zu Herrenschuhe, Damenschuhe, Kinderschuhe etc. aufgelistet wären. Durch Sitelinks wirkt eine Website in den Suchergebnissen prominenter und Suchende haben nicht nur eine Klickmöglichkeit, sondern können aus bis zu sieben Links wählen, um auf eine Webseite zu gelangen.

Ein strukturierter und logischer Aufbau ist auch nützlich für die Content-Planung, da leichter ersichtlich ist, wo und wann neue Rubriken oder Unterseiten erstellt werden sollten. Neuer Content ist selbstverständlich immer eng mit der Keyword-Recherche verbunden. Nur bei hohem Traffic-Potenzial lohnt sich die Arbeit, neue Texte zu schreiben.

Und nicht zuletzt macht ein durchdachter Aufbau die eigene Internetpräsenz zukunftssicher. Sollte die Website wachsen und in Zukunft neue Inhalte hinzugefügt werden, lassen sich neue Unterseiten problemlos an den relevanten Stellen platzieren. Die Notwendigkeit, die Internetseite umzustrukturieren und Weiterleitungen (sogenannte redirects) einzupflegen, wird wahrscheinlich nicht entstehen.

Checkliste zu Aufbau einer Website

Mit dieser Checkliste lässt sich prüfen, welche Aufgaben bereits erledigt sind.

  • Wurde eine inhaltlich logische Struktur für alle Inhalte auf der Website geschaffen, aus der sich ein klarer hierarchischer Aufbau von Ober- und Unterthemen ergibt?
  • Wurde eine HTML-Sitemap (und gegebenenfalls zusätzlich eine XML-Sitemap) erarbeitet? Wird die Sitemap regelmäßig aktualisiert, wenn sich am Aufbau und Inhalt der Seite etwas ändert?
  • Basiert jeglicher Content auf recherchierten Keywords und der dazugehörigen Nutzerintention?
  • Wird regelmäßig nach neuen Keywords recherchiert, auf deren Basis neuer Content erstellt wird?
  • Wird Content gut strukturiert? (Absätze, Zwischenüberschriften, Schriftart, Schriftgröße, Kontrast, visuelle (mediale) Elemente, interne Verlinkungen etc.)
  • Werden Bestandstexte regelmäßig aktualisiert, damit Webcrawler einen Anreiz haben, die Webseiten immer wieder zu besuchen?
  • Stehen SEO-Audit-Tools zur Verfügung, mit denen Crawlen möglich ist, um etwa die Klicktiefe zu ermitteln und Optimierungen vorzunehmen? (Jegliche Tools sollten hinsichtlich Funktionen und Kosten in Relation zur eigenen Website stehen – oft gibt es kostenlose Tools, die für Anfänger ausreichen).
  • Werden Links regelmäßig geprüft und aktualisiert, um „tote“ Links (broken Links) und Weiterleitungen zu eliminieren?
  • Wird auf Unterbrecherwerbung (Interstitial) verzichtet, um das Nutzererlebnis nicht zu stören?
  • Generell: Ist im Content Management die Funktion „nicht indexieren“ deaktiviert? Sind Tools wie die Google Search Console und Google Analytics eingerichtet?

Sie haben Fragen zum Aufbau und der Gestaltung Ihrer Webpräsenz? Dann sprechen Sie uns an, wir beraten Sie gerne!