Zum Inhalt springen
Der Guide für ein smartes Leben.
Perfekt vernetzte Website

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

Autoren: Redaktion pcmagazin und Andreas Hitzig • 7.11.2009 • ca. 2:45 Min

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

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
Mithilfe von ein wenig CSS wird aus der Liste eine einfache Navigation.
© Archiv

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
Der Aufbau der zweistufigen Navigation erfolgt über eine formatierte Liste.
© Archiv

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.