Aufbau einer SEO optimierten Website: Struktur und Navigation
Bei der Optimierung einer Website nach SEO-Kriterien wird der Fokus meist auf den Content gelegt – insbesondere wird auf die Platzierung der relevanten Keywords geachtet. Dass jedoch auch die Seitenstruktur und die Navigation eine wichtige Rolle bei der Onpage-Optimierung spielen, wird häufig vergessen. Wir zeigen, worauf es beim Aufbau einer strukturierten Website ankommt.
Grundsätzlicher Aufbau
In der Regel beinhalten die einzelnen Seiten einer Website einen Kopfbereich, direkt darunter eine Navigation, oft auch einen vertikalen Navigationsbereich am linken Seitenrand, den Content-Bereich mit dem eigentlichen Inhalt sowie einen Footer. Der Header wird von den Suchmaschinen besonders gewichtet, enthält er doch den Seitentitel und meist auch noch eine sprechende Subheadline mit wesentlichen Schlüsselwörtern. Daher ist es wichtig, diese nicht (nur) in einer Bannergrafik zu zeigen, sondern auch als Textelement einzubinden. Bei den Navigationsbestandteilen sollte man daran denken, keine Flash- oder AJAX-Elemente zu verwenden. Diese können von Suchmaschinen-Bots nur schwer oder gar nicht gefunden werden und sollten daher zur besseren Indexierbarkeit textbasiert und frei von JavaScript sein. Dies gilt natürlich auch für eine eventuell vorhandene Sidebar. Im Contentbereich werden die eigentlichen Inhalte der Website präsentiert. Last but not least sollte in jeder einzelnen Page auch ein Footer vorhanden sein, in welchem Links zum Impressum, zu einer Kontaktseite oder auch zu Social-Media-Kanälen zu finden sind.
Optimierte Navigation
Die Navigation ist das zentrale Control-Element einer Website. Natürlich soll in erster Linie eine sinnvolle Menüführung für eine gute Usability und somit für ein gutes Gefühl beim Besucher einer optimierten Website sorgen. Aber auch den Suchmaschinen wird damit ein Mittel angeboten, möglichst alle Kategorien und Seiten der gesamten Website zu finden. Gerade in den Navigationslinks findet Google wertvolle Keywords (SEO!). Am Beispiel eines Onlineshops für Schuhe werden in der Hauptnavigation nur die wesentlichen „main keywords“ gezeigt wie z. B. Damenschuhe, Herrenschuhe, Kinderschuhe usw. Diese Elemente sollten in einer horizontalen Navigationsleiste unterhalb des Headers zu sehen sein. Werden diese einzelnen Links angeklickt oder auch nur mit dem Mauszeiger überfahren, können weitere Untermenüs aufklappen, die den Besucher direkt zu Unterkategorie-Seiten führen. Des Weiteren sollte ein Klick auf eine Hauptkategorie zu einer neuen Seite führen, auf welcher im Contentbereich die Unterkategorien zu sehen sind. Diese können gerne mit zusätzlichen kleinen Grafiken versehen werden; eine kurze Kategoriebeschreibung zeigt dem Besucher, wo er sich gerade befindet. Einen weiteren Navigationsbereich sehen manche Usability-Forscher eher kritisch: die Sidebar. Hier gilt die Webdesigner-Regel: Nutze das aside-Element entweder richtig – oder gar nicht! Eine sinnvolle Anwendung ist in unserem Beispiel eines Onlineshops für Schuhe folgendes Verfahren: Man klickt in der Horizontal-Navigation auf „Kinderschuhe“ und sieht danach in der vertikalen Navigation die einzelnen Markenhersteller. An diesem Beispiel sieht man deutlich, dass ein vertikaler Navigationsbereich auf jeder einzelnen Page durchaus unterschiedliche Inhalte haben kann. Es sollte sich übrigens von selbst verstehen, dieses Element am linken Rand zu platzieren, damit sie in jedem Falle sichtbar ist. Am rechten Rand läuft man Gefahr, dass hier platzierte Navigationsbereiche nicht von allen Usern gesehen werden können, insbesondere von Webseitenbesuchern mit kleinen Bildschirmen. Da wird dann lästiges horizontales Scrollen unumgänglich.
Mobile Nutzung nicht vergessen!
Besuchen Sie Ihre eigene Website unbedingt auch mit einem mobilen Browser, um zu testen, ob sie dann auch noch benutzbar ist. Schon allein deshalb sollten Sie auf JavaScript-Elemente in den Navigationsbestandteilen verzichten, damit die Website auch mit Smartphones und Tablet-PCs barrierefrei bedient werden kann. Das bedeutet für den Entwickler, dass z. B. Dropdown-Menüs zwingend in den HTML-Code eingebunden werden müssen. Allgemein gilt, dass keine Dropdown-Menüs verwenden werden sollten, wenn man keine separaten Mobil-Seiten zur Verfügung hat.
Weitere Optimierung
Denken Sie daran, dass der Mensch ein Gewohnheitstier ist. Viele Surfer erwarten bestimmte Links und Navigationsbereiche an immer den gleichen Stellen. Daher sollte man unkonventionelle Navigationsideen eher vorsichtig einsetzen. Binden Sie auf jeden Fall eine Sitemap ein, die Ihr gesamtes Webangebot strukturiert darstellt. Insbesondere Suchmaschinen-Bots ziehen gerne die Sitemap-Page (vorzugsweise im XML-Format) heran, um eine komplette Website zu indexieren. Abschließend sei noch darauf hingewiesen, dass weiteres Optimierungs- und Strukturierungspotential darin besteht, die neuen Tags von HTML5 zu verwenden, die es ermöglichen, Inhalte strukturiert im HTML-Code zu platzieren – genannt seien hier Tags wie article, section, nav, aside, footer usw. Wie man diese Elemente sinnvoll einsetzt, beschreiben wir demnächst in einem weiteren Beitrag.
Wenn Sie mehr über dieses Thema erfahren möchten oder wir Ihnen beim erstellen einer optimierten Website helfen dürfen, kontaktieren Sie uns unter 0951/ 700 990 oder schreiben Sie uns direkt unter info@webda.de.