Praxistipp: Links mit HTML, CSS und jQuery zusammenfassen

Links zusammenfassen

Links zusammenfassen mit HTML, CSS und jQuery

In meinem Artikel 5 Tipps zur Optimierung der internen Verlinkung empfehle ich, das Setzen mehrerer Links auf ein und dasselbe Linkziel zu vermeiden. Und wurde natürlich gefragt, wie das gerade bei Teasern gehen soll.

Nun, das erkläre ich gerne!

Gemeint sind damit insbesondere Links auf Kategorie- oder Übersichtsseiten, die Produkte oder Beiträge anteasern. Häufig erhält jedes dieser Produkte gleich vier oder mehr Links. Aus Sicht eines Usability- oder Conversion Rate-Optimierers macht es natürlich durchaus Sinn, wenn alle Elemente die zum Teaser gehören (Produktbild, Headline, Text und „weiterlesen“ bzw. „mehr“) jeweils mit einem Link versehen sind. Denn so erhält der Benutzer die größtmögliche Chance ohne Hindernisse zur entsprechenden Detailseite zu gelangen. Aus SEO-Sicht machen vier Links auf ein und dasselbe Ziel jedoch wenig Sinn.

Einerseits weil sich bei entsprechender Anzahl angeteaserter Produkte bzw. Beiträge schnell die Anzahl der ausgehenden Links auf eine dreistellige Zahl erhöht, andererseits weil verlinkter Text immer zum Text der jeweils verlinkten Seite und nicht zum Text der linkgebenden Seite gezählt wird. Doch wie können solche Links nun sinnvoll zusammengefasst werden? Diese Frage wurde uns in den vergangenen Tagen gleich mehrmals gestellt. Aus diesem Grund möchte ich in diesem Artikel kurz vorstellen, wie sich Links mit Hilfe von HTML, CSS und JavaScript zusammenfassen lassen.

Wann macht es Sinn Links zusammenzufassen?

Links lassen sich immer dann zusammenfassen, wenn sich die verlinkten (HTML-)Elemente relativ nahe beieinander befinden. Teaser eignen sich also besonders gut dafür. Unser Beispiel zeigt einen Ausschnitt der Startseite von chip.de (siehe Screenshot). Jeder Teaser auf chip.de besteht im Grunde aus genau vier Elementen: Der Überschrift des entsprechenden Artikels, einem Teaser-Text, einem Beitragsbild und einer Aufforderung zum Weiterlesen („…mehr“).

Aus Usability-Gründen sollte jedes dieser vier Elemente mit einem Link auf die jeweilige Beitragsdetailseite versehen werden, damit der User ohne groß darüber nachdenken zu müssen, möglichst schnell auf die Produktseite gelangt – getreu dem Motto: „Don’t make me think!“.

Beispiel-Teaser auf chip.de

Beispiel-Teaser auf chip.de

Wer sich den Quellcode der Seite genauer ansieht, dem wird auffallen, dass die Techniker von chip.de sich hier etwas sehr Cleveres ausgedacht haben. Denn in Wirklichkeit wird jeweils nur ein Link pro Produkt bzw. Beitrag verwendet. Wie das geht? – Mit HTML, CSS und jQuery/JavaScript.

Links mit Hilfe von HTML, CSS und jQuery zusammenfassen

Wie auf dem zweiten Screenshot zu sehen, enthält jeder div-Container nur genau einen Link. Als Linktext wird die Headline (und die Subheadline) des Artikels verwendet. Somit wird gleichzeitig sichergestellt, dass der Linktext – und damit logischerweise auch der erste Linktext, denn nur dieser wird wohl von Google ausgewertet – das Keyword der jeweiligen Detailseite enthält. Das Artikelbild, der Teaser-Text und der „mehr-Link“ werden in einem eigenen div-Container untergebracht. Dieser div-Container erhält ein title-Attribut, welches exakt den gleichen Inhalt wie das title-Attribut des Links enthält (im Beispiel „Grafikkarten bei Amazon: Einschätzung und bessere Alternativen“). Das Title-Attribut dient somit als eindeutige ID, um den div-Container später via jQuery ansprechen zu können.

Links mit HTML, CSS und jQuery zusammenfassen am Beispiel von chip.de

Links mit HTML, CSS und jQuery zusammenfassen am Beispiel von chip.de

Formatierung via CSS und JavaScript/jQuery

Sobald der Benutzer mit der Maus über eines der vier Elemente (Headline, Teaser-Text, Bild oder „mehr“-Link) fährt, wird dem gesamten div-Container zusätzlich die CSS-Klasse „mouseover“ übergeben. Aus <div class=“mi-teaser-le chipTeaser“> wird somit <div class=“mi-teaser-le chipTeaser mouseover“>. Die CSS-Klasse mouseover sorgt dann dafür, dass der Text unterstrichen wird (text-decoration: underline;) und der Maus-Zeiger sich von einem Pfeil in eine Hand verwandelt (cursor: pointer;). Außerdem wird via jQuery das title-Attribut und das Linkziel desjenigen Links ausgelesen, der im entsprechenden div-Container enthalten ist. Das Linkziel wird dann ebenfalls via jQuery an den div-Container übergeben. Somit lässt sich der komplette div-Container anklicken und führt auf die jeweilige Produktdetailseite.

Was passiert wenn der User JavaScript deaktiviert hat?

Das Tolle an dieser Lösung ist, dass bei deaktiviertem JavaScript zwar die Usability etwas eingeschränkt ist, da nicht mehr alle vier Elemente angeklickt werden können, sondern nur noch die Headline. Dennoch wird sowohl dem User als auch dem Crawler ein Link auf die Produktdetailseite gezeigt – und zwar mit dem jeweils besten Linktext, nämlich der Headline des jeweils angeteaserten Beitrags.

Funktioniert auch ohne jQuery

Selbstverständlich funktioniert der vorgestellte Trick mehrere Links zusammenzufassen auch ohne jQuery. Wer die Technik auf einer kleinen Seite einsetzen möchte und dabei aus Performance-Gründen auf den Einsatz der verhältnismäßig umfangreichen jQuery-Bibliothek verzichten möchte, kann die Funktion natürlich auch in JavaScript umsetzen.

Christoph Baur

Ich bin Gründer und Geschäftsführer der Bits & Passion GmbH und Lehrbeauftragter für Suchmaschinenmarketing und Unternehmensführung an der Hochschule Augsburg. Zuvor war ich Head of SEO bei Catbird Seat und bei der CONTENTmanufaktur. Wer mich erreichen möchte, kann dies per E-Mail (christoph.baur@bitsandpassion.com) oder über mein Xing-Profil tun.

More Posts - Website - Twitter - Google Plus

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen