Perfekt vernetzte Website

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

Der Top10 Container umgibt schließlich die beide Hitlisten und sorgt für den Hintergrund, die Breite und die Umrahmung.

div#Top10Container { width: 300px;
border: 10px solid #666666;background: #aaaaaa; padding: 20px;position: relative; overflow: auto; }

Der Container besitzt eine Breite von 300 Pixeln (width: 300px;) und eine Umrandung von zehn Pixeln, die dunkelgrau dargestellt wird. Der Hintergrund ist in einem hellen Grau gehalten. Damit die Hitlisten im Anschluss nicht direkt am Rand des Containers kleben, wird ein Innenabstand von 20 Pixeln definiert.Im letzten Schritt können Sie die verschiedenen Hitlistenplätze mit internen Seiten verlinken und beispielsweise genauere Beschreibungen der Top-10-Bücher hinterlegen.

SEO und Usability

© Archiv

Mithilfe von ein wenig CSS wird aus der Liste eine einfache Navigation.

Suchmaschinen-Optimierung

Eine gut aufgebaute interne Verlinkung sorgt nicht nur dafür, dass Ihre Besucher schnell an die richtige Stelle gelangen und die gewünschten Inhalte lesen können, sie hat auch Einfluss auf Ihre Ergebnisliste einer Suchmaschine.

Wenn Sie Ihren Ranglistenplatz bei Google und Co. verbessern möchten, hilft Ihnen eine gut strukturierte interne Verlinkung. Die Basis bildet sicherlich eine gut aufgebaute Seitennavigation und eine vorhandene Sitemap, aber auch die interne Verlinkung kann die Gesamtsituation positiv beeinflussen.

Achten Sie darauf, dass Sie als Link möglichst keine grafischen Elemente verwenden, da diese nicht oder nur unzureichend durch die Suchmaschinen Crawler erkannt werden können. Besteht keine Alternative zur aktuellen Navigation, dann sollten Sie die Indizierung durch die Suchmaschinen durch die Nutzung des Alt- und des Title-Tags auf die richtige Spur bringen.

Wenn Sie für die Navigation auf Textlinks zurückgreifen, sollten Sie trotz allem das Title-Attribut als zusätzliche Verstärkung verwenden.

Versuchen Sie, innerhalb Ihrer Seiten eine Verlinkung auf weitere Inhalte innerhalb Ihrer Website zu integrieren. Bieten Sie Ihren Besuchern am Ende eines Artikels Empfehlungen auf ähnlich geartete Themen an und versehen Sie die Verlinkungen mit den richtigen Schlagworten.

Hat Ihre Website bereits einen gewissen Umfang erreicht, sollten Sie sich überlegen, themenbezogene Sitemaps zu entwickeln. Dies hilft nicht nur den Suchmaschinen, sondern natürlich auch den Usern, denn wenn diese ein interessantes Thema gefunden haben, können sie sich über die themenbezogene Sitemap auch gleich auf die Suche nach ähnlich gearteten Inhalten machen.

SEO und Usability

© Archiv

Der Aufbau der zweistufigen Navigation erfolgt über eine formatierte Liste.

Damit Ihre Besucher nicht den Überblick verlieren, sollten Sie diesen eine Positionsinformation zur Verfügung stellen, damit diese auch wissen, an welcher Stelle auf Ihrer Website Sie sich gerade befinden - auch große Websites, wie oder auch die Heimat des Internet Magazins () bedienen sich dieses Hilfsmittels. Damit kann Ihr Benutzer nicht nur Sie aktuelle Position feststellen, sondern sich auch schnell innerhalb der Website bewegen.

Eine wichtige Komponente der internen Verlinkung im Zusammenspiel mit SEO ist auch der Bereich am Ende einer Webseite - nutzen Sie diesen Footer am besten, um die wichtigsten Verlinkungen, wie Home, Kontakt oder Impressum dort zu hinterlegen und vergessen Sie auch nicht, diese mit passenden Linktexten zu versehen.

Sicht der Suchmaschine

Ein Crawler besitzt also eine komplett andere Sicht auf die Dinge und misst den Inhalten eine komplett andere Bedeutung zu als beispielsweise ein Entwickler. Damit Sie sich in die Situation eines solchen Informationssammlers versetzen können, sollten Sie sich Ihre Website am besten einmal aus dessen Blickwinkel ansehen.

Die SEO Tools () simulieren eindrucksvoll, welche Inhalte der Crawler komplett ausblendet.

Sie erkennen gleich auf den ersten Blick, dass Informationen, die durch Applets, Javascript und über Bilder zur Verfügung gestellt werden, keine Beachtung finden. Ein Crawler erkennt nur einfache Verlinkungen der Art <a href="...">.

Sind diese in Javascript eingebettet oder wird die Navigation dynamisch durch Javascript generiert, kann diese für den Crawler nicht als Wegweiser genutzt werden. In diesem Fall müssen Sie, wie oben beschrieben, auf alternative interne Verlinkungen zurückgreifen. Wie Sie an der Ergebnisliste erkennen, identifiziert der Crawler für eine weitere Suche auch alle internen und externen Verlinkungen.

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 Ergebnissen…
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 einspannen.…
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…