Mega Dropdown Menü + SEO

Wer einen Relaunch oder die Etablierung einer neuen Website plant, wird früher oder später mit den Themen Menüstruktur und Verlinkung konfrontiert: Wie soll die Hauptnavigation aufgebaut werden – Mega Dropdown Menü oder reduziertes Navigationsmenü? In diesem Beitrag gehe ich tiefer auf das Thema ein und versuche zu beantworten, für welche Website ein Mega Menü geeignet ist und wie dieses technisch etabliert werden sollte.

Was ist ein Mega Dropdown Menü?

Mega Dropdown Menüs sind umfangreiche Navigationsmenüs die viele tiefe Direkteinstiege bieten, damit sich ein Besucher schneller auf einer Website zurechtfindet.

Mega Menüs können vertikal oder horizontal aufgebaut sein. Sie besitzen Navigationsgruppen (zum Beispiel: Shop, Produkte und Lösungen, Consumer, etc.), die durch Hovern oder Klicken ausgeklappt werden. Jede Navigationsgruppe besitzt thematisch relevante Links zum Direkteinstieg in hierarchisch tiefliegende Seiten, die individuell gestaltet und strukturiert werden können (z. B. farbliche Nuancen der Navigationsgruppen; Textlink bzw. Textlink-Bild-Kombination). Mega Dropdown Menüs werden visuell immer vollständig dargestellt, so dass auf Scrollen verzichtet werden kann. Für Mobilgeräte muss ein abweichendes reduziertes Navigationsmenü etabliert werden. Auf dem Desktop-PC (und Tablet-PC) wird das Mega Dropdown Menü dargestellt, auf dem Smartphone jedoch eine reduzierte Variante weil es visuell nicht abbildbar ist. Die Canon Website verwendet ein Mega Dropdown Menü bestehend aus Textlinks, die horizontal aufklappen:

Mega Dropdown Menü // canon.de
Mega Dropdown Menü // canon.de

Vorteile
Nutzer erhält einen thematischen Überblick der Seite
Nutzer kann in hierarchisch tiefliegende Seiten direkt einsteigen
Emotionalisierung durch Typografie und Design möglich

Als Beispiel einer Website mit einem klassischen Hautmenü (ohne Dropdown) habe ich die Apple Website gewählt. Der Nutzer muss sich sukzessive durch die Navigation klicken, wobei diese deutlich reduzierter ist und weniger Direktlinks in tiefliegende Seiten bereitstellt:

Standard-Menü // apple.com
Standard-Menü // apple.com

Vorteile
Definierte Klickpfade mindern Unentschlossenheit der Nutzer
Sehr gute Crawlbarkeit für Suchmaschinen
Thematische Relevanz einer Seite ist für Suchmaschinen gegeben
Hohe Accessibility und Nutzbarkeit bei Verwendung von textbasierten Browsern
Geringer Einfluss auf Seiten-PageSpeed

Kompromiss zwischen UX und SEO

Durch ein Mega Dropdown Menü wird die Nutzbarkeit einer Website vereinfacht. Der Besucher kann meist mit einem Klick tiefliegende Seiten aufrufen. Doch so schön ein Mega Menü aus UX-Perspektive ist, wirkt es sich hinsichtlich einer zielführenden Suchmaschinenoptimierung negativ aus. Denn die zusätzlich abgehende Link-Belastung einer Seite, verbietet eine effiziente Nutzung von Crawlbudgets, senkt das Rankingpotenzial spürbar, erhöht auch die Seitenladezeit so dass Absprungraten steigen. Deshalb erfordert die Frage, für welche Website ein Mega Dropdown Menü geeignet ist, immer einen Kompromiss zwischen UX und SEO sowie eine geeignete technische Realisierung. Eine Ideallösung gibt es nicht und im Zweifel rate ich vom Einsatz eines Mega Menüs ab und empfehle die Verwendung einer dynamischen Dropdown-Navigation.

Wie schnell zusätzliche hunderte abgehende Links durch ein Mega Menü erzeugt werden können, zeigt der Shop unter otto.de:

Mega Dropdown Menü // otto.de
Riesiges Mega Dropdown Menü // otto.de

Nachteile
Thematische Relevanz einer Seite wird massiv verzerrt (Wofür soll die Seite ranken?)
Interne Verlinkung wird spürbar verwässert (Verlinkungen von der Seite „Spielwaren“ in z. B. „Damenunterwäsche“)
Nutzer werden durch die Linkwüste überfordert, was zur Unentschlossenheit führt
Barrierefreiheit wird nicht gewährleistet, z. B. Nutzung durch Tastatur
Schlechte Nutzbarkeit der Website mit Textbasierten Browsern
Zielführende Nutzung verfügbarer Crawlbudgets nicht möglich
Seitenladezeit wird erhöht

Für welche Website kann ein Mega Dropdown Menü geeignet sein?

Grundlegend sollte man sich zwei Fragen stellen:

  1. Kann die Website eine zusätzliche Link-Belastung verkraften?
  2. Ist die Website so umfangreich strukturiert, dass ein Mega Menü erforderlich wird?

Zusätzliche Link-Belastung

Angenommen das Mega Dropdown Menü einer Website enthält 200 Links und wird auf jeder Seite eingesetzt. So muss man beachten, dass neben anderen abgehenden sitewide Links (Breadcrumb, Widgets, Footer, etc.) und den Content-Links zusätzlich 200 ausgehende Links berechnet werden müssen. Das hat enorme Auswirkungen auf den SEO-Optimierungsgrad der Website.

Aus diesen Gründen sollte eine Website dahingehend bewertet werden, ob man bereit ist, spürbare Limitierungen aus SEO-Sicht hinzunehmen und ob die Website die zusätzliche Link-Belastung verkraften kann. Dabei empfehle ich nicht nur den internen PageRank, CheiRank, etc. zu bewerten, sondern auch das externe Linkprofil einer Domain.

Die Website mit einer geeigneten Software zu spidern und die Seitenarchitektur jeweils mit und ohne Mega Dropdown Menü zu analysieren, bringt häufig hilfreiche Erkenntnisse hervor.

Umfang der Website

Das zweite Bewertungskriterium pro/contra Mega Menü ist der Umfang der Website. Wenn eine Website bereits eine flache Informationsarchitektur mit weniger als drei Hierarchie-Ebenen besitzt und dort nur wenige Seiten vorhanden sind, ist nach meiner Bewertung kein Mega Menü erforderlich. Diese Struktur kann ein herkömmliches Navigationsmenü durchaus darstellen. Oder wenn eine Website wenige Kategorien und dort aber sehr viele gleichwertige Seiten (z. B. Artikel eines kleinen Online Shops) bereitstellt, wäre die Etablierung eines Mega Menüs sicher auch übertrieben.

Hilfreich kann ein Mega Dropdown Menü hinsichtlich einer besseren Nutzbarkeit für große Websites und Shops sein, die viele Hierarchien besitzen und dort viele gleichwertige Seiten aber nur eine Handvoll Seiten mit hoher Relevanz besitzen (z. B. Top-Seller einer Shop-Kategorie).

Beispiele für potenzielle Websites

  • Online Shops mit vielen Kategorien und tausenden Produkten (z. B. adidas.de, zalando.de)
  • Websites mit vielen themenrelevanten Inhalten (z. B. weg.de, spiegel.de)
  • Websites/Shops mit umfangreichem Sprachmenü (Sprache + Land)

Was sollte man aus SEO-Perspektive beachten?

Grundlegend rate ich von überdimensionierten Megamenüs ab. Hat man sich allerdings für die Verwendung eines Mega Menüs entschieden, sollte man einige technische Fallstricke aus SEO-Perspektive beachten, wie zum Beispiel:

Best practice

  • HTML Einfachheit: Mega Menü technisch simpel entwickeln (HTML, CSS, JavaScript)
  • Menü-Quellcode unter dem Hauptcontent implementieren > besseres Rendering
  • Empfehlung: Pro Navigationsgruppe maximal vier Links abbilden
  • Nur wirklich wichtige und populäre Seiten verlinken > Nutzerverhalten analysieren
  • HTML Sitemap mit allen wichtigen Seiten bereitstellen und im Mega Menü verlinken

Mobile Variante des Megamenüs

Für Smartphones müssen oft reduzierte Navigationsmenüs bereitgestellt werden, weil das Mega Dropdown Menü auf dem kleinen Display nicht dargestellt werden kann. Das kann zur Folge haben, dass im Seitenquelltext einer responsiven Website zwei Menüs (Mega Menü für Desktop und Tablet + Reduziertes Menü für Smartphones) implementiert werden müssen. Die Anzahl der abgehenden Links wird dadurch zusätzlich erhöht.

Bereits in der Konzeptphase sollte man gewährleisten, dass sich die Menüs (Desktop/Tablet vs. Smartphones) nur gering unterscheiden. Aus SEO-Sicht wäre es günstig, wenn im Seitenquelltext nur ein Menü implementiert werden muss.

Dont do this

Ich rate dringend ab, die komplette Website-Struktur im Megamenü abzubilden. Erstens würde das Nutzer überfordern. Zweitens würde das interne Linkprofil garantiert verwässert werden. Drittens ist das die Aufgabe von HTML Sitemaps. Wenn man Nutzern eine Übersicht aller (wichtigen) Seiten zur Verfügung stellen möchte, empfehle ich dafür eine HTML Sitemap zu etablieren, die im Mega Dropdown Menü verlinkt wird.

Je mehr Links ein Mega Dropdown Menü enthält, desto ungenauer können Suchmaschinen berechnen, wofür eine Seite ranken soll. Skeptiker empfehle ich eine WDF*IDF-Analyse mit aktivierten/deaktivierten Mega Menü durchzuführen.

Zusammenfassung: Klassische Navigation versus Mega Dropdown Menü

Klassische NavigationMega Dropdown Menü
Keine Verwässerung des internen Linkprofils Umfangreiche Darstellung der Website-Inhalte möglich
Thematische Relevanz einer Seite ist für Suchmaschinen gegeben Zusammengehörige Inhalte können gruppiert werden
Definierte Klickpfade mindern Unentschlossenheit der Nutzer Spielraum beim Design (Typografie, Farbe, Zusatz-Inhalte)
Sehr gute Crawlbarkeit für Suchmaschinen Technisch komplex: Accessibility für Mobile phones gewährleisten
Hohe Accessibility und Nutzbarkeit mit textbasierten Browsern Barrierefreiheit: Nutzung mit Tastatur nicht möglich
Geringer Einfluss auf Seiten-PageSpeed Content im sofort-sichtbaren Bereich wird überdeckt
Inhaltliche Gruppierungen sind schwer darstellbar Verwässerung des internen Linkprofils (First link priority)
Einfaches (langweiliges) Menü-Design Erzeugen seltsame und unverständliche Verlinkungsmuster
Inhalte werden nur bergrenzt dargestellt, da nur eine Ebene sichtbar Gefahr einer „Überforderung der Nutzer“ durch zu viele Links
Lange Listen und häufig langes Scrolling Verwirren und verzerren die thematische Relevanz einer Seite

Mega Dropdown Menüs bieten zwar Vorteile für Nutzer, erzeugen allerdings aus Accessibility- und SEO-Gesichtspunkten (noch) schwerwiegende Probleme.

Abschlussbemerkungen

Mega Dropdown Menüs stellen für Nutzer hilfreiche Direkteinstiege auf relevante Seiten einer Website dar. Zusätzlich erhält der Nutzer bei Betrachtung des Menüs eine gute Zusammenfassung über den Inhalt einer Website. Allerdings ist ein Mega Menü keine Ideallösung für alle Websites. Auch aus SEO-Sicht bestehen technische Fallstricke, die man beachten sollte. Denn die Parallelen zwischen dem was Suchmaschinen benötigen und dem, was Designer für Nutzer kreiern, ist grundsätzlich unterschiedlich. Suchmaschinenoptimierer sind bestrebt, Inhalte eindeutig bereitzustellen und zu verlinken, damit Suchmaschinen-Crawler diese richtig verarbeiten können, um Suchmaschinen-Nutzern optimale Suchergebnisse anbieten zu können. Nutzer benötigen hingegen einfache Möglichkeiten, um schnell einen Website-Überblick zu erhalten und in tiefliegende Seiten einsteigen zu können. Der Kompromiss aus SEO + Accessibility versus Nutzerführung könnte nicht größer sein.

In der Praxis versuche ich auf die Verwendung von Mega Menüs zu verzichten. Ich bevorzuge besser flache Seitenarchitekturen, wo Seiten eindeutig und für Nutzer sinnvoll verlinkt werden. Vor allem achte ich darauf, die Seiten miteinander zu verlinken, die thematisch zueinander relevant sind. Und das ist bei Verwendung eines Mega Menüs (noch) unmöglich.

Quellen/Weiterführende Literatur

Kommentare(10)

  • Stefan
    5. April 2016, 12:59  Antworten

    Super Artikel von dir und ich kann das wirklich bestätigen mit dem Megamenu. Betreue einen großen Shop und als wir das Megamenu deaktiviert hatten, gingen die Rankings hoch und die Sichtbarkeit stieg. Hat aber paar Wochen gedauert. Megemenüs sind für die Suchmaschinenoptimierung wirklich Schrott.

    Stefan

  • Dirk
    6. April 2016, 08:47  Antworten

    Sehr guter Artikel, allerdings hast du die Möglichkeit einer Maskierung nicht bedacht. Damit lässt sich die Menge an Links sehr genau steuern um „Themencluster“ zu bilden. Fahren wir aktuell sehr gut mit 🙂

    • Jens Fröhlich
      6. April 2016, 09:58

      Hallo Dirk,

      besten Dank für deinen Kommentar. Das Thema Maskierung habe ich beabsichtigt nicht aufgegriffen, weil wir nicht wissen, wie gut diese Methode in Zukunft funktionieren wird. Google ist ja daran interessiert, eine Seite so zu sehen, wie der Nutzer. Ich kenne bereits einen großen Online Shop der die Maskierung dieses Jahr komplett entfernt hat. Aber trotzdem vielen Dank für deine konstruktive Kritik und weiterhin viel Erfolg.

  • 31. Mai 2016, 16:48  Antworten

    Hi,

    Otto (dein Screen) ist doch maskiert und ein gutes Beispiel dafür, wie gut es funktioniert.

    Gruß
    Jan

    • Jens Fröhlich
      31. Mai 2016, 16:51

      Hallo Jan,

      was genau meinst du mit „maskiert“?
      Prüfe doch mal die Startseite im Google Cache und du wirst feststellen, dass alle Links des Dropdown Menüs verarbeitet worden sind. Das ist nicht gut.

      Viele Grüße
      Jens

  • Stefan
    4. August 2016, 11:15  Antworten

    Hallo Jens, schau doch z.B. mal auf https://www.otto.de/herrenmode/kategorien/hemden/ im Seitenquelltext nach und analysiere parallel die interne Verlinkung von dieser Seite. Dann stellst du fest, dass hier mit iFrames gearbeitet wurde und nur die erste Ebene des Megamenüs verlinkt wird, nicht aber die gesamten Unter-Menü-Bereiche.

  • Chriss Leiblich
    6. September 2016, 16:56  Antworten

    Hallo Jens, reicht es wenn man im Mega Menü einfach die Links auf nofollow setzt?

    • Jens Fröhlich
      7. September 2016, 16:16

      Hallo Chriss,

      probiere es aus: Erstelle eine crawlbare und indexierbare HTML Seite die du nur über das Dropdown Menü mittels rel=“nofollow“ verlinkst und schaue mal nach ein paar Tagen, ob du die URL im Google Index findest. 🙂

      Beste Grüße
      Jens

Komentar verfassen