Perfekt vernetzte Website

Teil 5: [Workshop] Bessere Web-Site mit CSS - Usability verbessern

Keine Experimente

Beim Thema interne Verlinkung sollten Sie auch nicht zu kreativ sein, sonst riskieren Sie unter Umständen einen Ausschluss aus den Trefferlisten der Suchmaschinen. Die Crawler erkennen häufig zuverlässig, wenn ein spezieller Pfad für sie eingerichtet wurde, der die Inhalte speziell aufbereitet. Dabei spielt es keine Rolle, ob Sie dies über Javascript oder Meta-Tags machen.Wirkungsvoll und von den Suchrobotern auch akzeptiert sind allerdings Navigationen, die auf CSS und Javascript aufbauen. Die Verlinkungen funktionieren auch bei ausgeschaltetem oder nicht vorhandenem Javascript, lediglich die Optik leidet stark darunter.Für einen Besucher aus Fleisch und Blut sicher nur schwer zu verkraften, ein Crawler schaut an dieser Ecke jedoch großzügig darüber hinweg. Das folgende Beispiel zeigt Ihnen, wie Sie mit einer normalen HTML-Liste und ein wenig CSS eine Navigation aufbauen und diese auch ohne großen Aufwand auf Ihre eigenen Bedürfnisse anpassen können.

SEO und Usability

© Archiv

Auch bei magnus.de werden interne Verlinkungen an verschiedenen Stellen eingesetzt, wie beispielsweise bei der Empfehlung verwandter Themen.

Einfache Navigation mit Tabelle

Stellen Sie sich als Erstes eine HTML-Liste mit den wichtigsten Navigationselementen zusammen und bilden Sie diese in HTML ab.

<ul><li><a href=
"#">Home</a></li><li><a href=
"#">Über</a><ul><li><a href=
"#">Team</a></li><li><a href="#">Niederlassung</a></li></ul></li><li><a href="#">Kontakt</a><ul><li><a href="#">München</a></li><li><a href="#">Berlin</a></li><li><a href="#">Stuttgart</a></li></ul></li></ul>

Da es eine zweistufige Navigation werden soll, haben wir die Liste als verschachteltes Element aufgebaut. Innerhalb der Rubrik Kontakt gibt es drei weitere Unterpunkte München, Stuttgart und Berlin, welche die Niederlassungen darstellen sollen.

ul { margin: 0; padding: 0;
list-style: none; width: 150px; }

Entfernen Sie nun als Erstes die einzelnen Aufzählungszeichen von der Liste und weisen Sie den Aufzählungspunkten eine feste Breite von 150 Pixeln zu. Alle Punkte erscheinen nun untereinander in einer Liste - nichts erinnert mehr an die zweistufige Aufzählung.

SEO und Usability

© Archiv

Mithilfe von CSS können Sie auch einfach Hitlisten aufbauen, die Sie als Ausgangspunkt für die interne Verlinkung hernehmen können.

Da wir ein mehrstufiges Menü darstellen wollen, müssen wir die zweite Navigationsebene versetzt darstellen und diese für entsprechend absolut positionieren. Für die Ausrichtung ist es notwendig, einen Bezugspunkt zu haben.

ul li { position:
relative; }

Auf Basis dieser Formatierung können Sie nun eine Anordnung der Unterelemente durchführen. Diese werden genau anschließend an das jeweilige Hauptmenü platziert. Der Abstand wurde bewusst um einen Pixel verringert. Somit überlappen die beiden Hierarchiestufen um einen Pixel und es scheint, als teilen Sie sich eine Außenwand.

li ul { position: absolute;
left: 149px; top: 0; display: none; }

Wenn Sie Ihre HTML-Seite in diesem Zustand aufrufen, werden Sie bemerken, dass die Elemente der zweiten Hierarchiestufe verschwunden sind und nur noch die Hauptpunkte Home, Über und Kontakt übrig geblieben sind.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…