Hyperlink erstellen: Unterschiedliche Arten um Links auf einer Website einzubinden!

OnPage SEO Buch

In diesem Artikel zeige ich anhand von konkreten Beispielen, wie sich Hyperlinks auf Webseiten zeigen und was es dabei üblicherweise zu beachten gibt.

Im Beispiel „Textlink als Keyword“ erfährst du außerdem, was du tunlichst beim Anlegen von Hyperlinks vermeiden solltest oder auch, wie du anderen Websites sogar helfen kannst, mit bestimmten Keyword-Kombinationen in den Ergebnislisten der Suchmaschinen besser positioniert zu werden.

Unter dem Punkt „Textlink als URL“ erfährst du, warum es sinnvoll oder auch nicht sinnvoll sein kann, ausgehende Hyperlinks als URL anzuzeigen und unter dem Punkt „Textlink mit Anker“ zeige ich dir, wie du deine Leser gezielt zu einer ganz bestimmten Textstelle leiten kannst.

Zum Abschluss erkläre ich dir, warum gerade Grafiken auf Webseiten so häufig eingesetzt werden und was du beim Einsatz von Grafiken in Kombination mit Hyperlinks zu beachten hast. Außerdem erfährst du, warum viele Webmaster ihre Textlinks gegen Grafik-Links ausgetauscht haben und zum Abschluss erkläre ich, wie man auf einer Grafik sogar mehrere Hyperlinks einbinden kann.

Obwohl ich einige Bereiche sehr ausführlich beschrieben habe, hätte man doch noch weitere Bereiche zu diesen Themen abhandeln können. Diese Seite soll dir lediglich einige Anregungen für die suchmaschinenfreundliche Gestaltung von Hyperlinks auf einer Website geben; wie man Hyperlinks für Suchmaschinen optimieren kann, werden Profis sicherlich noch besser erklären können.

Textlink als Keyword

Nachfolgend zeig ich dir, wie Hyperlinks mit sichtbaren Keywords üblicherweise eingesetzt werden. Das Online-Lexikon „at-mix.de“ hat seine Hyperlinks dabei für den User sogar noch unterschiedlich gestaltet.

Hyperlinks, die auf interne Seiten des Projektes verlinken, sind in der grünlichen Farbe etwas dezenter als andere Links und zusätzlich mit einer Strichellinie gekennzeichnet. Hyperlinks die auf andere Projekte verweisen, in diesem Fall „Echtzeit Webanalyse“ auf www.etracker.de oder auch „www.kammerer-electronic.de“ auf www.kammerer-electronic.de zeigen sich fett in einer etwas dunkleren Farbe.

Hyperlink sollte als Link deutlich sichtbar sein

Eine Vorschrift wie man Hyperlinks gestalten sollte gibt es nicht. Ich empfehle dir aber, sämtliche Hyperlinks deutlich als Verweis zu kennzeichnen.

Hyperlinks die als Verweise nicht deutlich zu erkennen sind erwecken bei einem Analysten gleich den Eindruck, der Webmaster habe etwas zu verbergen und wer etwas zu verbergen hat gerät leicht in den Verdacht etwas manipulieren zu wollen.

„Versteckte“ Hyperlinks

Um dir zu zeigen was ich meine, zeig ich dir einmal zwei versteckte Hyperlinks. Ein „versteckter“ Hyperlink befindet sich direkt im Anschluss an diesen Absatz und trägt das Wort „Beispiel“. Dieser Link wurde von mir einfach mit der Hintergrundfarbe versehen und schon ist der Link für das menschliche Auge nicht mehr sichtbar.

Der zweite unsichtbare Hyperlink befindet sich in der ersten Zeile dieses Absatzes in den Wörtern „versteckte Hyperlinks“. Dieser Link wurde mit einem Stylesheet versehen. Der Link trägt die gleiche Farbe des Textes und beim Überfahren des Wortes zeigt sich ein Pfeil anstatt der sonst üblichen Hand für Hyperlinks. Beispiel

Hyperlinks als Keyword haben Vorteile

Hyperlinks mit sinnvollen Keyword-Beschreibungen haben zwei Vorteile:

  1. Der Leser weiß, welche Informationen er beim Anklicken des Links in etwa zu erwarten hat
  2. Textlinks stärken die empfohlene Website in den Rankings der Suchergebnislisten.

Im Link-TAG ist die vollständige URL nicht immer notwendig

Bei Hyperlinks die auf interne Seiten der Website verlinken ist es nicht notwendig, im „a“-TAG die komplette URL zu hinterlegen. Im Fall-Beispiel at-mix zeigt sich der Hyperlink für „Webmaster“ im Quelltext wie folgt: <a href=“webmaster.htm“>Webmaster</a>. Bei Hyperlinks die auf andere Websites verweisen musst du im „a“-TAG die komplette URL hinterlegen.

Im Beispiel des Hyperlinks mit der Beschreibung „Echtzeit Webanalyse“ zeigt sich der Link im Quelltext wie folgt: <a href=“http://www.etracker.de“ target=“_blank“>Echtzeit Webanalyse</a>. Das Attribut target=“_blank“ ist in diesem Fall dafür verantwortlich, dass sich die etracker-Website in einem neuen Browser-Fenster öffnet.

AAWP Banner
AAWP mobiler Banner

Textlink als URL

Eine Website die sehr viele Hyperlinks als direkte URLs gekennzeichnet hat, ist die Website www.www-kurs.de von Bernd Zimmermann. Unter normalen Umständen würde Google eine derartige Website mit derart vielen ausgehenden Links sofort abstrafen.

Auf dieser Website zeigen sich jedoch einige Besonderheiten: Die Tatsache, dass der Webmaster die Links als reine URLs ausweist zeigt, dass die Site offensichtlich nicht erstellt wurde um andere Websites mit Keyword-Kombinationen in den Suchergebnislisten zu stärken. Außerdem zeigt der Webmaster mit seinen Beschreibungen, dass er die Verweise durchaus ernst meint und sich offensichtlich nicht hat kaufen lassen.

URL als Link-Text macht wenig Sinn

Das Anzeigen einer reinen URL als Link-Text hat normalerweise wenig Sinn. Die URL zeigt sich sowieso beim Überfahren der Maus unten im Browser-Fenster. Besser wäre eine aussagefähige Linkbeschreibung als Hyperlink.

In diesem Fall jedoch ist ein erklärender Link-Text nicht notwendig, weil jedem ausgehenden Hyperlink bereits ein Erklärungstext vorangestellt wurde.

Das Beispiel zeigt, wie Hyperlinks richtig eingebunden werden

Verweise innerhalb der Website (wie im Beispiel „verlinkt“ bei der Google-Beschreibung) hat der Webmaster als Keyword-Text gekennzeichnet und leitet im Fall „verlinkt“ auf den Erklärungstext, mit dem ein Link (Hyperlink) erklärt wird. Insoweit zeigt diese Seite, wie man schulmäßig mit Hyperlinks umgehen sollte. Im Quelltext zeigt sich der Hyperlink zu Google wie folgt:

Auf das Attribut target=“_blank“ hat der Webmaster verzichtet, die Google-Startseite öffnet sich im gleichen Browser-Fenster.

Im Beispiel des internen Verweises „verlinkt“ zeigt sich der Hyperlink im Quelltext wie folgt:
<a href=“gloss_l.htm#Link“>verlinkt</a>. Die Ausschreibung der vollen URL ist nicht notwendig. Die Raute und der Text „Link“ besagt, dass der Hyperlink in Kombination mit einem „Anker“ direkt zu der Beschreibung „Hyperlink“ führt.

Textlink mit Anker

Hyperlinks mit einem „Anker“ werden immer dann eingesetzt, wenn der Webmaster seinen Leser mit seinem Verweis direkt zu einer ganz bestimmten Textstelle leiten möchte. Hierbei benötigt man zwei „a“-TAGs, nämlich einen TAG als „Anker“ (auf der Webseite zumeist nicht sichtbar) und den dazugehörigen Hyperlink der zu diesem „Anker“ weiterleitet. Im Quelltext zeigen sich die TAGs wie folgt:

Anker:

Der zum Anker gehörende Hyperlink:

Hyperlinks in Verbindung mit einem „Anker“ kannst du sowohl innerhalb einer Webseite einsetzen, als auch für Verweise innerhalb einer Homepage und auch für Verweise zu anderen Webseiten. Der (zumeist unsichtbare) Anker-TAG wird direkt dort positioniert, zu deren Stelle der auslösende Hyperlink „springen“ soll.

Anker innerhalb einer Webseite

„Anker“ innerhalb einer Webseite machen nur dann Sinn, wenn sich auf dieser Webseite ein sehr langer Beschreibungstext befindet und zu erwarten ist, dass der User längere Zeit suchen müsste, um die besagte Stelle zu finden. Ein sehr anschauliches Beispiel wie „Anker“ innerhalb einer Seite eingesetzt werden, findest du auf vielen Wikipedia-Seiten (Schau einfach mal in einem Artikel unter „Inhaltsverzeichnis“ und klick dann auf einzelne Hyperlinks).

Was Wikipedia in diesem Fall allerdings vermissen lässt ist die Tatsache, dass der User nicht wieder nach „oben“ springen kann. Er wird zwar zu der jeweiligen Textpassage geleitet, muss dann aber nach oben scrollen um die Navigation wieder zu finden.

Anker auf anderen Seiten innerhalb der eigenen Homepage

Möchtest du Leser zu einer ganz bestimmten Stelle auf einer anderen Webseite deiner Homepage leiten, so funktioniert die Weiterleitung in gleicher Weise. Im eigentlichen Hyperlink fügst du dabei lediglich zusätzlich den Namen der betreffenden Webseite ein.

In diesem Artikel hab ich dir die Attribute eines Hyperlinks erklärt. Hierbei habe ich dir auch das Attribut „name“ erklärt und hierbei geht es um Anker-Hyperlinks. Der hierzu gehörende Quelltext des Ankers und des Hyperlinks zeigen sich wie folgt:

Anker:

Hyperlink:

Anker innerhalb einer fremden Website

Du kannst auch zu einer ganz bestimmten Stelle auf einer komplett anderen Website leiten. Hierzu benötigst du allerdings einen Anker auf der besagten Webseite. Eine Website die sehr oft mit Anker-TAGs arbeitet ist beispielsweise www-kurs.de und zu dieser Seite möchte ich dich zum Beschreibungstext „Hyperlink“ leiten. Die TAGs zeigen sich im Quelltext wie folgt:

Anker:

Hyperlink:

In diesem Fall ist nicht nur der Name der jeweiligen HTML-Seite im „a“-TAG anzugeben, sondern die komplette URL.

Affiliate School Banner
https://www.rankwatcher.de/zu/affiliateschool

Hyperlink als Grafik

Auf sicherlich mehr als 90 Prozent aller Websites findest du Grafiken die mit einem Hyperlink unterlegt sind. Die wohl häufigste Form eine Grafik mit einem Hyperlink zu unterlegen ist die Logo-Grafik einer Website.

Es ist egal, ob du die Website von dem Nachrichten-Magazin „Spiegel„, die Tageszeitung „Welt„, „Wikipedia“ oder die Site von „Computerbild“ aufrufst, so gut wie jedes Logo trägt ein Hyperlink, und zwar mit Ziel zur jeweiligen Startseite. Man könnte diesen Link auch als „Zurück-Button zur Startseite“ definieren.

Man kann die Grafik sehr auffällig darstellen oder auch sehr unauffällig. Einige Blogs sind ausschließlich textbasierte Websites. Bei diesen besteht selbst das „Logo“ aus Text und ist mit einem Hyperlink zur Startseite unterlegt.

Gib Grafiken einen Namen

Ganz egal welche Grafiken du auf deiner Website einbindest und mit einem Hyperlink unterlegst, auf eines solltest du dabei unbedingt achten: Gib der Grafik unbedingt einen „Namen“ mit. Viele sehbehinderte Menschen orientieren sich am Quelltext einer Seite und wenn du den Grafiken keinen Namen mitgegeben hast, dann stolpert der Sehbehinderte durch eine Grafik-Wüste und kann sich nicht orientieren.

Außerdem kann der Name einer Grafik unter Umständen eine Webseite in den Ergebnislisten der Suchmaschinen weiter nach vorne bringen. Um sehbehinderte Menschen zu helfen ist es auch sinnvoll, der jeweiligen Grafik bereits einen sinnvollen Namen zu geben (wie beispielsweise „logo.gif“). Im Quelltext sieht der Hyperlink mit der Grafik wie folgt aus:

Grafiken für die Navigation

Die wohl zweithäufigste Form Grafiken als Hyperlinks einzusetzen, findet man immer noch in den Navigations-Button vieler Websites (die Website des Privatsenders Sat.1 ist ein derartiger Kandidat). Häufig sind derartige Navigationen mit „Mouseover“-Effekten unterlegt, eine „Spielerei“ die heute allerdings immer weniger Webmaster für ihre Sites nutzen.

Viele Webmaster haben etwa in den Jahren 2003 und 2004 ihre Text-Navigation durch eine Grafik-Navigation ausgetauscht. Der Grund hierfür war, dass Google seine Filterregeln geändert hatte und plötzlich viele Navigationen als „Keyword-Spam“ gewertet wurden. Mit „Keyword-Spam“ bezeichnet man eine gehäufte Ansammlung gleicher Keywords auf einer Website. Dies wäre beispielsweise der Fall, wenn Sie eine folgende (textbasierte) Navigation auf einer Website finden:

  • DSL Anschluss
  • DSL Flatrates
  • DSL Volumentarife
  • DSL Zeittarife
  • DSL Hardware
  • DSL Verfügbarkeit
  • DSL Speedmeter

Die Ansammlung einer derartigen Liste wäre auf einer einzelnen Seite sicherlich kein Problem. Da es sich aber um die Navigation handelt, findet sich diese Liste unter Umständen auf hunderten von Seiten wieder und dies würde Google sicherlich als übertriebene Optimierung für „DSL“ werten. Diese Site hätte mit dem Keyword „DSL“ bei Google sicherlich keine Chance auf die vorderen Plätze der Ergebnisliste zu kommen.

Ein Bild sagt mehr als tausend Worte

Grafiken als Hyperlinks bieten dem Webmaster eine wunderbare Möglichkeit, den User mittels einfachen Symbolen zu zeigen, welche Seiten und Informationen sich hinter den Grafik-Hyperlinks verbergen. Ob nun ein kleiner Icon mit einem Brief-Symbol für E-Mail-Kontakt, ein Länderfähnchen für die Landessprache oder ein Symbol für die Version einer Software, der User weiß intuitiv was gemeint ist.

Image Maps

Du hast sogar die Möglichkeit innerhalb einer Grafik mehrere Hyperlinks zu hinterlegen. Derartige Grafiken nennen sich „Image Maps“ oder auch „Verweis-sensitive Grafiken“. Diese Form der Hyperlinks werden häufig bei Länderkarten oder auch Stadtplänen eingesetzt. Es wird eine Landkarte angezeigt und über den Namen der Stadt wirst du zur Website der jeweiligen Stadt geleitet.

Bewerte diesen Artikel
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

19 Bewertung(en), durchschnittlich: 5,00 von 5

Loading...

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.