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.

GD Star Rating
loading...
Praxistipp: Links mit HTML, CSS und jQuery zusammenfassen, 3.4 out of 5 based on 26 ratings

Christoph Baur

Ich bin Head of SEO Consulting bei der Catbird Seat GmbH und Lehrbeauftrager für das Fach Search Engine Marketing in der Hochschule Augsburg. Zuvor war ich Head of SEO bei der CONTENTmanufaktur GmbH. Wer mich erreichen will, kann dies per E-Mail (info@christoph-baur.de) oder über mein Google+-Profil tun.

More Posts - Website - Twitter - Google Plus

Kommentare (28)

  1. Noki

    Das Thema hatten wir ja nun nach der Campixx. Die Tests haben gezeigt, dass es vollkommen egal ist wie häufig das gleiche Linkziel angelinkt ist, solange das Text-to-Link Ratio nicht so ist, dass die Seite nur noch aus Links besteht.

  2. Der Stefan

    Schade, dass für das Beispiel – unabhängig von der Sinnhaftigkeit dieses Tuns – so völlig unsemantischer Code genommen wurde. Was spricht eigentlich dagegen, Überschriften als solche auszuzeichnen und dem darunterstehenden Absatz auch das Element P zu geben? So kann sich auch ein blinder Nutzer auf der Seite orientieren, nicht nur der Googlebot.

  3. vanSEO

    Noki Achja? Hatten wir? Sorry, aber von einer Diskussion oder ähnlichem habe ich ehrlich gesagt nichts mitbekommen. Oder ich habe das bereits wieder verdrängt. Jedenfalls kann ich mich an keine Tests oder ähnliches erinnern. Würde mich aber freuen, wenn du mir noch entsprechende Informationen bzw. Testergebnisse zukommen lassen könntest, damit ich mir das auch mal ansehen kann. Meiner Erfahrung nach macht das sehr wohl einen Unterschied. Aber ich lasse mich gerne vom Gegenteil überzeugen.
    Viele Grüße
    Christoph

  4. vanSEO

    Der Stefan Da muss ich dir leider Recht geben. Überschriften sollten generell als solche gekennzeichnet und mit den entsprechenden HTML-Tags ausgezeichnet werden. Das empfehlen wir selbstverständlich auch unseren Kunden. Ebenso das mit den Absätzen. Insofern also tatsächlich ein Beispiel mit gewissen Schwachpunkten. Soweit mir bekannt ist, war chip.de allerdings eine der ersten größeren/bekannteren Seiten in Deutschland, die Links auf diese Art und Weise zusammengefasst haben – und darum ging es ja in diesem Beitrag, um das Zusammenfassen von Links. Und naja… deshalb habe ich mir chip.de gegriffen und das anhand deren Code erklärt. Man muss aber ja auch nicht immer alles bis ins letzte Detail vorkauen. Es soll ein Lösungsansatz sein und letztlich ist es jedem gestattet selbst mitzudenken und vorgegebene Ansätze zu verbessern. 😉

  5. Der Stefan

    vanSEO Ich bin auch kein Freund davon, alles im Detail vorzubeten. Das Problem bei solchen Artikeln ist aber, dass sie ggf. 1:1 als Handlungsanweisung an die Entwickler gegeben wird und die sich aus Mangel an Interesse oder Kenntnissen sklavisch daran halten. Und der Ruf der SEOs als Zerstörer des Internets wird damit wieder ein Stück weiter gefestigt. Siehe dazu auch den Artikel plus Kommentare bei den Webkrauts: http://webkrauts.de/artikel/2012/seo-vs-usability-gemeinsam-klappt-es-besser

  6. michelb1

    Oder man nimmt HTML5, da kann ein <a> auch gerne als Block-Element genutzt werden: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-a-element

  7. Pschemi82

    vanSEO Noki 
    Gibt es dafür auch WordPress-Plugins?
    Könnte mir das auf Kategorie- und tag-Seiten als hilfreich vorstellen 
    VG.
    Adam

  8. eric108

    Der Stefan vanSEO Sehr schöner Beitrag, Stefan. Das mit dem Beispiel ist zwar richtig – aber ich verstehe Christoph, dass er das Beispiel genommen hat. Und es freut mich auch. Denn wir haben das bei CHIP vor, äh, echt vielen Jahren eingeführt und das hat promt ganz schön funktioniert. Und man sollte halt echt nur das anschauen, worum es in dem Artikel geht. 
    Wir werden eine Musterseite bauen, auf der dann alles perfekt ist. Aber das ist gar nicht so einfach – weil es so unterschiedliche Anforderungen gibt. Und, naja, das ist ja auch gut so. Standardisierter Code führt auch zu standardisierten Layouts – weil dann nur noch kopiert wird. 
    Es geht nur, das schreibst du ja auch, nur gemeinsam. Aber irgendwie jedes mal neu. Alles andere ist Murks 😉
    Oder was meinst du?

  9. eric108

    Pschemi82 vanSEO Noki Lieber, Pschemi82: Nicht alles lässt sich über Plugins klären. Das wäre dann eher eine Anforderung an den Code des Themes. Ich weiß nicht, ob es welche gibt, die das beherzigen. Vermutlich schon. Aber ob die dann so aussehen, wie DU es möchtest? Ich befürchte, da muss der Coder schon etwas selber coden 😉

  10. Noki

    vanSEO
    Wir zwei hatten das vielleicht nicht besprochen, aber generell war das schon ein Thema nachdem Holger sowas in die Richtung in seinem Vortrag hatte. Daraufhin habe ich einige Tests gemacht und das Ergebnis ist, dass es völlig egal ist ob man einen oder mehrere Links zum selben Ziel auf der Seite hat. Der Test wurde mit Hashwerten und einem syntetischen Setup durchgeführt. Der Linkjuice wurde ebenfalls syntetisch auf die Seite gebracht. Dazu wurde der Testcase über die Google-Webmastertools an Google übermittelt.
    Was die ganze Aktion aber auch gezeigt hat ist, dass das Text to Link Ratio sehr wohl ein großes Thema ist. Wenn alles verlinkt ist, so ist dieses sehr schlecht. Und genau das hat dann ggf. große Auswirkungen.
    Gerne können wir das Thema auch am Telefon vertiefen, wenn du da noch mehr Infos zu haben willst.

  11. Der Stefan

    eric108  Auch, wenn es eine SEO-technische Pioniertat war, das bei CHIP vor langer Zeit einzuführen, zeigt es doch nur, dass ihr damals keinen Wert darauf gelegt habt, Semantik ins Spiel zu bringen.
    Offensichtlich habt ihr auch keinen fachlichen Rat von einem kompetenten Frontendler eingeholt oder ihn ignoriert. Beides würde ich nicht gerade als vorbildlich rausstellen. Dass der Code bei CHIP immer noch in gleicher Form Verwendung findet, macht es nur noch schlimmer.
    Wenn Webentwickler SEO-technische Grundlagen missachten, werden sie von uns SEOs gern virtuell gesteinigt. Wenn SEOs aber Grundlagen der Webentwicklung ignorieren, reicht es, wenn es schön funktioniert. Du plädierst zwar für das Gemeinsame, das scheint mir aber nicht ernst zu sein.
    Ich glaube übrigens gern, dass das damals super funktioniert hat. Daraus würde ich aber nicht ableiten, dass das heute noch der Fall ist. Sonst fangen wir gleich alle wieder an, Keyword-Metatags in die Seiten zu bauen.
    Dass standardisierter Code zu standardisierten Layouts führt ist – mit Verlaub – völliger Blödsinn. HTML hat nichts mit Layout zu tun. Den gleichen Zweck hätte man auch mit semantischem Code erzielen können. Wer Technik und Layout kopieren will, macht das in diesem Beispiel ebenso wie bei semantischem Code.
    Bei der angekündigten Musterseite solltet ihr vielleicht in Betracht ziehen, HTML5 zu verwenden oder zumindest eine HTML5-Alternative zu bauen. Dort sind solche Kunstgriffe gar nicht mehr nötig. Einfach das A um den ganzen Block legen und fertig. Alles andere ist dann nur noch ein Kunstgriff, um den Linktext besser steuern zu können und hat keine technische Notwendigkeit mehr. Das wäre zwar aus meiner Sicht legitim, sollte dann jedoch auch klar benannt werden.
    Vielleicht doch mal mit einem qualifizierten Entwickler sprechen und gemeinsam einen Weg finden? Soll doch kein Murks werden. 😉

  12. eric108

    Der Stefan eric108 Entspanne dich. Hier geht es nicht um semantischen Code sondern darum, was in der Überschrift steht. Du MUSST das hier nicht lesen. Und ich WILL deine Beschimpfungen („Blödsinn“) nicht mehr hier haben. 
    Ich würde sagen, du machst es – wo auch immer – besser als wir hier und meldest dich dann.

  13. vanSEO

    Also sorry, aber da kann ich dem Eric wirklich nur zustimmen: Erst mal Überschrift (übrigens bei uns als solche ausgezeichnet ;-)) und Artikel lesen und konstruktive Kommentare hinterlassen oder irgendwo selbst Mehrwert schaffen und selbst ein Blog schreiben und es besser machen, bevor man hier beleidigende Kommentare ablässt.
    Wir tragen hier mit verhältnismäßig hoher Frequenz dazu bei, dass diejenigen, die nicht auf jeder Konferenz zugegen sind und nicht bereits seit Jahren SEO betreiben regelmäßig mit Informationen, Tipps und aktuellen Geschehnissen aus der SEO Szene versorgt werden und sind über jede konstruktive Kritik und Gastbeiträge froh. Was wir aber nicht brauchen sind giftige, beleidigende Kommentare.

  14. Der Stefan

    vanSEO eric108 Entschuldigt, wenn ich euch hier auf die Füße getreten bin und ihr meine Kommentare giftig findet. Aber ich fand den Hinweis, das beschriebene Konstrukt mit Überschriften und Absätzen auszuzeichnen, durchaus konstruktiv. Und in den weiteren Beiträgen habe ich das auch begründet bzw. mit dem verlinkten Artikel erkärt.
    Ich will doch gar nicht eure Arbeit auf dieser Seite abwerten. Nicht umsonst gehöre ich zu den regelmäßigen Lesern. Aber das Beispiel in diesem Artikel war eben nur technisch OK, nicht aber inhaltlich. Schade, wenn man das nicht kommentieren darf.
    Es sollte übrigens keinesfalls beleidigend sein, als ich oben von „Blödsinn“ geschrieben habe. Aber die Aussage ist nun einmal völlig falsch. Dafür, dass meine Anmerkung dazu als Beleidigung wirken könnte, entschuldige ich mich gern. So war es nicht gemeint. Ich wollte nur die Falschheit der Aussage betonen.
    Ich bin dafür, wir entspannen uns alle wieder, wie Eric schon vorgeschlagen hat. Ich wollte hier auf keinen Fall böses Blut. Solltet ihr wirklich eine Musterseite bauen wollen, stehe ich gern mit Rat zur Seite, falls gewünscht. Es gibt in dem Bereich aber sicher kompetentere Leute. Die haben sich z. T. auch in den Kommentaren zu meinem Artikel damals geäußert.

  15. MarcelKollmar

    Noki vanSEO Interessant. 
    DIe Frage ist noch, ob nicht vier Links mehr Power (da auch höhere eine Wahrscheinlichkeit besteht, dass geklickt wird) durchreichen im Vergleich zu nur einem Link auf der Seite? 
    Und für Online Shops ist noch interessant, wie man vorgeht, da dort zu meist das Bild in einer Teaserbox an erster Stelle steht und dann Produktname, Preis, Farben, Größen folgen. Und zählt ein Imagelink genau soviel wie ein HTML-Link bzw. funktioniert die Anchor-Übergabe gleich gut?

  16. Pingback: Der SEO-Blog-Wochenrückblick KW 34

  17. angelmedia

    Um der Semantik im Code mal Aufmerksamkeit zu schenken, hab ich mal eine Variante gebaut, die komplett ohne Javascript auskommt, und dem W3C Test auch besteht: http://www.angelmedia.de/blog/seo-links-zusammenfassen-mit-html-und-css

  18. vanSEO

    Marcel+ das mit der höheren Power verstehe ich ehrlich gesagt nicht bzw. verstehe ich nicht, was das mit der Wahrscheinlichkeit zu tun hat, dass darauf geklickt wird. Die Wahrscheinlichkeit bleibt bei zusammengefassten Links ja die gleiche, da die Fläche, die angeklickt werden kann, ja gleich groß bleibt bzw. durch freie Flächen theoretisch sogar noch etwas größer wird. Das ist also kein Argument.
    Ob ein Bild, eine Headline oder sonst etwas an erster Stelle steht, spielt keine Rolle. Wichtig ist nur, dass alles in einem Div-Container liegt, dem bei Click eben das Linkziel übergeben wird. (Theoretisch sollte es auch möglich sein mehreren HTML-Elementen ein und dasselbe Linkziel zu übergeben, egal ob sie in ein und demselben Div-Container platziert sind oder nicht. Aber ich bin kein Entwickler… frag das am besten deinen Techniker. Sollte aber möglich sein.). Jedenfalls darf im Quellcode ruhig auch das Bild an erster Stelle stehen. Du kannst trotzdem den Link bei der Headline platzieren.
    Und ein Image-Link „zählt“ in der Regel nicht so viel wie ein Textlink, weshalb ich immer einem Textlink den Vorzug geben würde.
    Noki diese Diskussion bzw. diesen Workshop habe ich dann wohl verpasst. Das mit deinem Test klingt äußerst interessant! Wieso veröffentlichst du die Testergebnisse nicht in einem Blogbeitrag? Das wäre doch etwas für die gesamte SEO-Szene.
    Übrigens macht das Zusammenfassen von Links dann aber dennoch sehr viel Sinn, immerhin wird dadurch die von dir angesprochene Text-to-Link-Ratio deutlich verbessert, weil die ganzen Teaser-Texte somit zum Text der Seite gerechnet werden und nicht zu den Links. 😉
    Oder hab ich dich jetzt falsch verstanden?

  19. Noki

    Marcel+
    Der Test hat gezeigt, dass dies in einem syntetischen Modell ohne Traffic nicht der Fall ist.
     vanSEO
    Das zusammenlegen von Links ändert das Text to Link Ratio nicht.
    <a href=“…“>Phrase1</a> <a href=“…“>Phrase2</a> Phrase3
    und
    <a href=“…“>Phrase1 Phrase2</a> Phrase3
    haben genau das selbe Text to Link Ratio. Lediglich das to Code Ratio ist anders.
    Den Test bereite ich aus Zeitgründen nicht weiter auf. Mit meinem Anspruch an sowas müsste ich da mehrere Stunden Arbeit reinstecken.

  20. vanSEO

    Noki Marcel+ vanSEO Ähm… nein, das kommt nicht auf dasselbe raus. Weil ich ja nicht einfach sage: So, lieber Teaser-Text, du wirst jetzt einfach auch noch in das <a>-Tag mit eingeschlossen. Sondern ich weiße einem <div> oder einem <p> oder was auch immer via JavaScript ein Linkziel zu. Für Google ist das also reiner Text à la <p>Ich bin der Teaser-Text…</p>. Dieser Teaser-Text wird also nicht einfach innerhalb eines <a>-Tags geschachtelt, so wie du das gerade beschreibst, sondern ist und bleibt Text. Die „Link-Eigenschaft“ wird ihm doch nur via JavaScript zugeteilt bzw. dem übergeordneten <div>-Container. Folglich ändert sich die Code-to-Link-Ratio sehr wohl, weil ich auf einmal sehr viel mehr Text (in <p>-Tags) auf der Seite habe und pro Teaser einige (im Beispiel 3) Links weniger habe. Es ist also nur noch die Headline des Teasers verlinkt (und zählt bei der Berechnung der Code-to-Link-Ratio als Link) und der Rest ist Text bzw. Bild oder was auch immer.

  21. eric108

    Noki Marcel+ vanSEO Aber, sag mal, Noki: Würde das Aufbereiten nicht unser aller Leben leichter machen? Dann müsste man über so etwas nicht stundenlang streiten. Ich bin immer etwas misstrauisch, wenn mir jemand sagt: Wir haben das getestet, das ist so und so! Mehr aber nicht raus lässt. Dann kann ich einen Test nicht anders bewerten, als „nicht erfolgt“.  Dein Anspruch an dich selbst hin oder her…

    Und alle SEO-Freunde würden sich alle sehr freuen. 
    eric

  22. Noki

    vanSEO
    Google versteht inzwischen mehr Javascript als man denkt. Wenn das über ein externe JS maskiert ist mag das noch gehen. Bei Inline-Javascript versteht Google aber inzwischen sehr, sehr viel. Und das Code to Link Ratio ist an der Stelle uninteressant, die Frage ist ob Google den Text des Links zum Link oder zum Text zählt.

  23. Noki

    eric108
    Das mag durchaus sein, dass sowas das Leben anderer Leute leichter machen würde. Meines aber nicht unbedingt. Ich habe ehrlich gesagt inzwischen schon bereut mich dazu geäußert zu haben, da das Mitdiskutieren hier nur Zeit frisst und mich bisher nicht nach vorne bringt.
    Ich hab Christoph aber auch durchaus angeboten das mal alles mit ihm am Telefon durchzusprechen. Ich glaube, dass er den Beitrag etwas anders geschrieben hätte, wenn er etwas mehr Hintergrund zu der Thematik hätte.

  24. Pingback: SEO Jahresrückblick 2013 | 100grammseo.de

  25. Pingback: 18 aus 30+ Kriterien zur Bewertung eines Links - SEO Campixx 2014SEO Book

  26. tmapure

    Habe den Artikel eben erst entdeckt. Kann hier nicht einfach mit Nofollow gearbeitet werden. 1 Link Follow und die anderen zum gleichen Ziel mit Nofollow.

  27. SteffenProbst

    tmapure Aber dann hast du doch trotzdem 4 Links! Nur dass eben statt 100% auf einen Link, die 25% (1/4) auf den follow-Link gehen und die 75% (3/4) im nichts verpuffen.

  28. Pingback: clemsondeckbuilders.com/

Schreiben Sie einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *