Der Behauptung, dass SEO und Design sich nicht (immer) vertragen und sich mitunter sogar aufgrund widersprüchlicher Visionen das Leben schwer machen, begegnet man zum Glück immer seltener. Denn tatsächlich ist es so, dass beide Parteien - im Rahmen der technisch zur Verfügung stehenden Möglichkeiten - eine tolle Website kreieren wollen. Primär für Menschen und somit indirekt auch für Maschinen.
Daher freut sich das SEO-Herz, wenn ein Designer im Smashing Magazin über bessere Links schreibt, wie es Slava Shestopalov jüngst getan hat.
Seine Ausführungen umfassen ein paar wertvolle Reminder an Punkte, die wir SEO-mäßig in der Regel schon auf dem Schirm haben, ergänzt um einige weitere Gedanken und Themen, die den Blick vervollständigen - und unsere Argumente stützen.
Gut klickbar und verständlich
So sollten Links sinnvollerweise gut klickbar und verständlich sein. Also dass sich aufgrund des Linktextes eine ausreichend große Linkfläche ergibt, die zudem sowohl Thema als auch Format der Zielseite benennt. So ist auch ohne Kontext klar, was einen erwartet und man muss den Satz nicht nochmal ganz lesen.
"Moreover, a well-composed link makes sense out of context and typically combines a topic (e.g. security, brand, marketing) and format (questionnaire, request form, guideline, policy, and so on)."
Da gehe ich voll mit!
Sprechende URLs und URL Shortener
Bei kurzen, sprechenden URLs ist es laut Slava in Ordnung, diese direkt zu nutzen. Gerade in einem Kontext, in dem sie kopiert und anderswo eingefügt werden, macht es das für Nutzer einfacher. Lange URLs kann man mit einem URL Shortener verkürzen. Am besten solche, die customizable sind. Aus SEO-Sicht sei hier einmal Achtung geboten: Ein URL Shortener bedeutet auch immer, dass es zu Weiterleitungen kommt. Gerade für interne Verlinkungen wollen wir das eher vermeiden.
Download Links mit Extra-Infos
Wertvoll ist die Empfehlung hinsichtlich Links, die zu Downloads führen: Sowohl das Format und die Größe der Ressource sollten genannt werden, damit man vor dem Klick einordnen kann, ob man die Datei öffnen kann und möchte.
Buttons vs Textlinks
Slava hebt außerdem hervor, wie wichtig die Darstellung ist - ein normaler Textlink ist deutlich unauffälliger als ein Button. Wenn Buttons nicht ohne weiteres möglich sind, kann der Standard-Textlink auch durch eine besondere Formatierung - in einer eigenen Zeile, zentriert, durch Farbe oder Fettung hervorgehoben - etwas mehr herausgestellt werden.
Eine kleine Ergänzung von mir an diese Stelle: Achtung bei Buttons! Denn es gibt solche und solche Exemplare. Und je nachdem, für welches Element sie zum Einsatz kommen, ist mal die eine, mal die andere Variante aus SEO-Sicht die sinnvollere. Da, wo es für uns essentiell ist, Google den Verweis auf einen anderen Inhalt mitzugeben, sollte - unabhängig von der Darstellung - im Quellcode auch tatsächlich ein a href Link zu finden sein. Da, wo wir es vielleicht gerade vermeiden wollen, massig Links zu erzeugen und so den internen Linkgraphen zu verzerren, ist es manchmal besser, die Sache technisch so zu lösen, dass für Google & Co gar kein Link da ist.
Der Button-Text sollte nicht zu lang sein. Meist sind 4 bis 5 Wörter eine gute Menge. Außerdem gibt Slava den Tipp, mit einem Verb zu starten:
Ideally, start with a verb (e.g. "get", "buy", "download", "apply for", and so on);
1 Absatz und viele Links
Wenn Du mehr als einen Link in einem Satz oder Absatz unterbringen möchtest, kann es sinnvoll sein, diese
-
Entweder möglichst weit über den Text zu verteilen, also einen am Anfang, einen in der Mitte, einem am Ende, anstatt hintereinander weg
-
Oder zu gruppieren und als Liste am Ende des Textes zu platzieren.
Accessibility
Natürlich sollten die Links auch accessible sein. Das fängt damit an, dass ein Link sich nicht nur farblich vom normalen Text unterscheidet, sondern auch optisch betont ist, beispielsweise durch Unterstreichung oder Fettung. Der farbliche Kontrast zum Hintergrund muss bestimmte Vorgaben erfüllen. Für Screenreader gegebenenfalls nicht ganz eindeutige Linktexte können mittels aria-label konkretisiert werden.
<h4>News</h4>
<p>Eleks Design Team will participate in the Space Hackathon.
<a href=\"aerospace-hackathon.html\" aria-label=\"Read more about Eleks participation in the Space Hackathon\">Read more...</a>
</p>
<p>Projector Tech and Creative Institute launches five courses on web accessibility this year.
<a href=\"new-courses.html\" aria-label=\"Read more about new courses on accessibility by Projector Institute\">Read more...</a>
</p>
Ein weiterer Punkt: 1 Link ist auch aus Accessibility-Sicht besser als 3. Beispielsweise ein Teaser, der aus Bild, Überschrift, kurzem Text, eventuell noch einem Call to Action besteht. Wenn hier jedes Element ein einzelner Links ist, bekommen Personen, die Screenreader nutzen, diesen mehrmals nacheinander vorgelesen. Das ist natürlich nicht so sinnvoll. Von daher: In einem Element zusammenfassen!
Mit diesen Punkten lassen sich bestehende Verlinkungs-Checklisten sicher nochmal um den ein oder anderen Aspekt ergänzen.
Podcast-Empfehlung
Ach ja, apropos (interne) Verlinkung: Johan war bei Björn Darko im Podcast zu Besuch. Die beiden haben unter anderem darüber gesprochen, wie sich interne Verlinkung je nach Seitengröße unterscheiden kann, was Google bei Quelle und Ziel beachtet, wie wichtig Linktexte sind und wie man die interne Verlinkung gezielt optimieren kann. Auf Spotify kannst Du Dir SEOPRESSO Ausgabe 62: Interne Verlinkung mit Johan anhören.