Die Bedeutung der Navigation für SEO

Bei der Navigation einer Webseite denkt man gleich an das Hauptmenü, welches grundsätzlich im oberen Bereich der Webseite zu finden ist und spätestens bei Mobilgeräten als Burger-Menü in Erscheinung tritt. Bei kleinen Webseiten mit vergleichsweise wenig Inhalt genügt diese Lösung auch vollends. Doch hat man eine umfangreiche Webseite mit viel Inhalt, sollte man sich ein ausgefeiltes Navigations-Konzept überlegen.

Wie und Warum profitiert das SEO von einer durchdachten Navigation?

Sie fragen sich vielleicht, ob sich diese Mühe wirklich lohnt. Wir versichern Ihnen: Das tut es!
Ihr SEO profitiert von einer gelungenen Navigation gleich auf mehreren Ebenen: Zunächst einmal benötigen Suchmaschinen Verlinkungen für das Crawling Ihrer Seite, zudem dienen Links auch zur Bewertung der Relevanz Ihrer Inhalte. Doch fast noch wichtiger hierbei ist die Verbesserung der Benutzerfreundlichkeit, die Reduktion von Barrieren und nicht zuletzt auch das Minimieren der Klickpfade.

Die Usability, oder auf Deutsch Benutzerfreundlichkeit, ist ein Ranking-Faktor von Google, welcher nicht unterschätzt werden darf. Zerbrechen Sie sich aber nicht den Kopf darüber, wie Google die Usability versucht zu beziffern, sondern versetzen Sie sich viel lieber in Ihre User: Denn sollte Ihre Webseite Ihren Usern Kopfzerbrechen bereiten, werden diese sich nach einem anderen Anbieter umsehen. Der Bedeutung der Usability haben wir hier einen Artikel gewidmet.

Mit Accessibility ist die Barrierefreiheit auf Ihrer Webseite gemeint. Unter keinen Umständen dürfen Sie sich hier zur Annahme verleiten lassen, dieses Thema betreffe Ihre Webpage oder Ihr Zielpublikum nicht. Sie wären überrascht, wie viele Menschen mit Einschränkungen inzwischen den Zugang ins Netz gefunden haben, Tendenz steigend. Zu dieser besonderen Nutzergruppe gehören übrigens auch Seniorinnen und Senioren, welche bekanntlich einen zunehmenden Bevölkerungsanteil ausmachen. Eine praktische, übersichtliche Navigation erleichtert die Orientation auf Ihrer Webseite ungemein für alle Personen. Ausserdem wirkt sie sich positiv auf die Usability aus und trägt zur Verkürzung der Klickpfade bei.

Ein Klickpfad bezeichnet die Abfolge der Klicks, welche ein User unternimmt, um eine Aufgabe auf einer Webseite abzuschliessen oder ein Ziel zu erreichen. Eine solche Aufgabe könnte beispielsweise das Registrieren für einen Newsletter, das Abschicken eines Kontaktformulars oder das Einkaufen eines Produktes darstellen. Je länger ein solcher Klickpfad ist, desto eher verliert ein User das Interesse und weicht vom Pfad ab, weil er beispielsweise von etwas abgelenkt wird oder ihm noch etwas anderes in den Sinn kommt. Und je kürzer der Klickpfad ist, umso effizienter können Ihre User die Tätigkeiten auf Ihrer Webseite ausführen, von welchen auch Sie profitieren: Conversions. Hier können Sie mehr über Conversions erfahren.

Welche Arten von Navigation eignen sich wozu?

Navigation zwischen Seiten

Damit die Nutzer zwischen den einzelnen Seiten navigieren und Bots alle Seiten indexieren können, werden interne Verlinkungen zwingend benötigt. Wenn wir diese Links bündeln und strukturieren, ergeben sich Menüs. Besonders bei grossen Seiten hat sich hier ein Aufteilen der Menüpunkte in verschiedene Menüs bewährt.

Hauptmenü

Der Klassiker: Die Hauptnavigation beinhaltet die wesentlichsten und wichtigsten Punkte innerhalb der Webseite. Denn die Links in diesem Menü werden von Bots stärker gewichtet als Footer- oder Aside-Links und von den Nutzern am meisten angeklickt. Das Hauptmenü befindet sich im oberen Bereich der Webseite, meistens findet man sie am oberen Bildschirmrand, aber es kann auch als Sidebar platziert sein. Auf Mobilgeräten wird dieses Menü meist als Burgermenü dargestellt, von Zeit zu Zeit auch als Slide Menü. Nicht selten beinhaltet ein Hauptmenü Dropdown Untermenüs.

Behalten Sie hier unbedingt den Umfang dieses Menüs im Auge, da sich die Übersichtlichkeit mit steigender Anzahl Menüpunkte schnell reduziert. Ein überfülltes Menü ist nicht nur für eingeschränkte Personen eine Qual: Niemand mag es, lange zu suchen. Durch Übersichtsseiten, evtl. mit Filterfunktionen, können Sie sich das ein oder andere Untermenü sparen, für Ihre Firmentätigkeit weniger relevante Seiten können Sie getrost ins Footermenü verbannen.

Footermenü

Am Ende der Webseite gibt es nicht selten auch ein Menü im Footer. Dieses Menü wird von Usern wesentlich weniger beachtet als das Hauptmenü. Sogar Bots gewichten die hier untergebrachten Links schwächer. Doch das ist auch völlig in Ordnung so – Sie werden schliesslich nicht aufgrund Ihres Impressums oder Ihrer AGB in den Suchresultaten erscheinen.

Sitemap

Eine Sitemap umfasst sämtliche Seiten Ihrer Homepage und ist hierarchisch aufgebaut. Hier ist die übrigens die Rede von einer HTML Sitemap, welche als Seite meistens im Footermenü verlinkt ist. Es gibt auch eine XML Sitemap, welche man bei Google für eine schnellere Indexierung einreichen kann.

Die Sitemap bildet die komplette Architektur Ihrer Webseite ab, mit Links zu all Ihren Seiten und Unterseiten. Wobei es in grösseren Shops besser ist, die einzelnen Produkte von der Sitemap auszuschliessen. Die Sitemap darf in Kategorien gegliedert werden, beinhaltet aber niemals Dropdowns oder ähnliches. Eine Sitemap hat im Grunde zwei Funktionen: Bots das Crawling zu erleichtern und gleichzeitig Menschen mit Einschränkungen eine simple Übersicht anzubieten.

Previous & Next

Mit einem Previous-Link kann ein User schnell zum vorherigen Galerie-Bild, Beitrag oder Produkt wechseln. Der Next-Link leitet entsprechend zum darauffolgenden Item weiter. Bei Shops sollte man sich darauf achten, dass jeweils Produkte der selben Kategorie, im besten Fall sogar mit der Sortierung des Users, ausgeliefert werden. Bei Shops mit aufwändigeren Filteroptionen besteht die Schwierigkeit, dass Nutzer die Produkte in der Reihenfolge erwarten, wie sie ihnen auf der konfigurierten Übersichtsseite gezeigt wurden.

Recommendations

Empfehlungen zu weiteren Produkten oder Inhalte gehören zwar nicht unbedingt zu den klassischen Menüs, aber wir führen sie hier trotzdem auf. Dabei werden meist nach dem eigentlichen Produkt noch ähnliche, passende oder oft zusammen gekaufte Produkte gelistet. Dies kann das Interesse des Kunden wecken und liefert zusätzliche Kaufanreize. Die Recommendations zählen für uns zur Seitennavigation, da auch sie dem Nutzer eine verlinkte Übersicht weiterer Seiten, in diesem Fall Produktseiten, präsentieren und ihm so eine bessere Orientation bieten.

Suchfunktion

Die Suchfunktion ist semantisch gesehen kein Menü, da sie kein Link sondern ein Formular darstellt. Dennoch ist sie ein wichtiger Bestandteil vieler Haupt- oder Seitenmenüs. Dank der Suche können Nutzer direkt nach Produkten, Themen und mehr suchen.

Navigation innerhalb einer Seite

Inhaltsverzeichnis

Am Anfang eines Artikels bietet sich, ähnlich wie bei einem Buch, ein Inhaltsverzeichnis an, um dem Besucher einen Überblick über dessen Inhalt zu geben. Die Listenpunkte beinhalten hier aber keine Seitenzahlen, sondern Ankerlinks, also Sprungmarken, zu den jeweiligen Unterpunkten. Inhaltsverzeichnisse sind bei umfangreichen Texten eine Bereicherung für die Nutzererfahrung.

Back to top Links

Beim Klicken auf einen Back-to-Top Link springt der Browser an den Anfang der Webseite und erspart dem Nutzer so ein langes Hochscrollen. Diese Links machen nur auf langen Seiten Sinn. Meistens findet man einen solchen Link im Footer oder am Ende eines Artikels. Beliebt ist auch die Sticky-Variante, welche ab einem gewissen Punkt immer in einer Ecke oder am Rand des Bildschirms gezeigt wird. Die Sticky Variante bringt aber nur per Maus einen Mehrwert – Keyboard-Nutzer haben trotzdem erst am Ende der Seite darauf Zugriff. Grundsätzlich braucht man sich nicht auf einen einzelnen Link zu beschränken. Man kann zum Beispiel bei einem Onepager nach jedem Teilbereich einen solchen Link hinzufügen, damit Keyboard-Nutzer schnell wieder zurück zur Hauptnavigation springen können.

Skiplinks für Screenreaders

Durch Skiplinks erhalten auch Users ohne Maus endlich die Freiheit, Inhalte überspringen zu können. Dies sind Anker-Links, also Sprungmarken, welche nicht sichtbar aber fokusierbar sind. Mit Ihnen gibt man Keyboard-Usern die Möglichkeit, gewisse Teile der Webseite zu überspringen Zum Beispiel kann so das Hauptmenü übersprungen und direkt zum Inhalt gewechselt werden. Weitere Ideen für überspringbare Inhalte: Sidebar, Kontaktformular, Widgets, Footer-Menü. Falls Sie Ihre Kontaktdaten im Footer oder in der Sidebar platziert haben: Wie wäre es mit einem Skiplink direkt dorthin?

Weiterlesen

Ob man es nun „Weiterlesen“ oder „Mehr erfahren“ nennt und ob es zu einer Einzelansicht führt oder nur die aktuelle Seite erweitert: Diese Links können wirklich praktisch sein. Sie lassen den Usern die Wahl, ob sie zu einem Thema oder Produkt mehr erfahren oder ob sie lieber noch weiterstöbern möchten.

Paginations

Besonders bei Übersichtsseiten erfreut sich dieses Menü grosser Beliebtheit, aber auch bei sehr langen Inhalten findet es Anwendung; Die Pagination. Dabei wird der Inhalt auf mehrere Seiten aufgeteilt, welche dann über anklickbare Seitenzahlen erreichbar sind. Ein Vorteil gegenüber dem Infinite Scroll besteht in der leichteren Orientierung: Man weiss immer, wo man steht und wie viel noch folgt. Zudem besteht so die Möglichkeit, die aktuelle Seite in den Lesezeichen zu speichern, was besonders bei mehrseitigen Artikeln sehr praktisch sein kann.

Sidebar

Sidebars bieten Fläche für nützliche Funktionen oder Informationen. Oft werden hier Menüs zum navigieren innerhalb des aktuellen Seitenbereichs untergebracht, wie etwa Archive, Kategorien oder Filterfunktionen. Beliebt ist die Sidebar auch für Kontaktinfos oder als Menü für Social Media Seiten. Denkbar wäre es hier aber auch ein Inhaltsverzeichnis mit markierter Position zu zeigen, Randnotizen mit wichtigen Infos zum aktuellen Formular bereitzustellen oder die aktuelle Position im Bestellvorgang zu verdeutlichen. Eine Sidebar kann Ihren Usern als Orientierungshilfe dienen.

Filterfunktionen

Der Vollständigkeit zuliebe wollen wir hier auch die Filterfunktionen erwähnen, auch wenn sie meist kein Menü mit Links darstellen. Auf Übersichtsseiten können sie auf jeden Fall für mehr Ordnung sorgen, bzw. dem User helfen, das Gesuchte schneller zu finden.

Navigation entlang des Klickpfads

Breadcrumbs

Breadcrumbs ( auf Deutsch Brotkrumen) zeigen dem User seine aktuelle Position innerhalb einer Seitenhierarchie an. Dieses Menü wird als Pfad dargestellt, bei welchem jedes Item auch anklickbar ist. Die Breadcrumbs starten mit der Startseite und enden bei der aktuellen Seite (Beispiel: Start >> Kleidung >> Schuhe >> High Heels). Oft entspricht dieser Pfad sogar dem Klickpfad des Nutzers. Mit Hilfe dieses Menüs kann man schnell zu höheren Ebenen zurückspringen und behält gleichzeitig die Orientierung.

Zurück-Link

Hierbei handelt es sich um genau das, wonach es sich anhört: Ein Link, welcher den User dahin zurückführt, wo er zuvor war. Diese Links machen exakt dasselbe, wie der Zurück-Button des Browsers. Dafür gibt es auch Shortcuts: Alt+linke Pfeiltaste (Win), Backspace (Mac). Manche Leute nutzen diese Links aber trotzdem ganz gerne, um von einer Single-Ansicht wieder zurück zur Übersichtsseite zu gelangen.

Accessibility-Tipps

Rücksichtnahme gehört zum guten Ton – auch im Internet. Hier geben wir unsere Tipps

Zunächst sollten Sie sicherstellen, dass Sie die korrekte Semantik verwenden: Benutzen Sie für alle richtigen Menüs das nav-Tag mit einer Liste aus Links darin. Listen werden für Navigationen empfohlen, weil es semantisch Sinn macht, und Screenreader-Nutzer sehr gut damit zurecht kommen. Alleinstehende Links brauchen nicht extra in einem nav-Tag stehen, dürfen es aber. So kann ein Screenreader zwischen normalen Links und Navigationslinks unterscheiden.

Achten Sie sich darauf, dass alles mindestens per Tab-Key erreichbar ist und beachten Sie, dass man per Tab Key nur linear durch die Seite navigieren kann: Von einem Element zum nächsten, gemäss HTML Quellcode. Besonders bei längeren Seiten können Sie es somit Keyboard-Nutzern enorm erleichtern, wenn Sie an verschiedenen Stellen Ihrer Seite Skiplinks bereitstellen.

Sobald Sie mehrere Menüs auf Ihrer Seite integriert haben, raten wir Ihnen zur Nutzung des „aria-label“ Attributs. Dieses funktioniert so ähnlich, wie das bekannte „alt“-Attribut bei Bildern: Der Screenreader liest es vor, sobald der Nutzer zu diesem Menü gelangt. Auf diese Weise können Sie diesen Nutzern klipp und klar mitteilen, bei was für einer Navigation sie sich gerade befinden. Mit dem aria-label Attribut können Sie auch einzelne Links, wie etwa den Back-To-Top-Link beschriften. Aber Achtung: Sobald dieses Attribut vorhanden ist, lesen Screenreader nur noch dessen Inhalt vor und ignorieren den Linktext.

Nutzen Sie nicht den Fokus-Zustand, um Untermenüs zu öffnen, denn so sind Nutzer ohne Maus gezwungen, immer durch das komplette Menü zu navigieren. Mit einem Toggle, also einem Button zum öffnen des Untermenüs, lassen Sie dem Nutzer die Wahl. Vergessen Sie aber nicht, dem Toggle das Attribut aria-haspopup=“true“ zu setzen, sodass der Screenreader dem User mitteilt, dass er damit etwas öffnet. Mit dem aria-label Attribut können Sie den Button noch beschriften, damit der Verwendungszweck klar wird. Vergessen Sie nicht aria-expanded nach dem Klick via JavaScript anzupassen: Sonst weiss der User nicht, ob das Untermenü gerade geöffnet oder geschlossen ist.

Nehmen Sie sich die Zeit, Ihre Seite selbst zu testen. Sie benötigen dazu lediglich etwas Zeit, eine Tastatur, Kopfhörer und eine kostenfreie ScreenReader Erweiterung für Ihren Browser. Schliessen Sie nun die Augen und navigieren Sie einmal per Tabulator durch Ihre Seite. Das ist zwar etwas gewöhnungsbedürftig, aber sehr zielführend auf der Suche nach möglichen Barrieren.

Hier finden Sie eine sehr umfangreiche Liste zu nützlichen Browsererweiterungen, mit welchen Sie die Zugänglichkeit Ihrer Webseite prüfen können.