Logo von nextlevels
Hey!
Zurück zum Wiki

Anchor Tag

Das Anchor Tag ist das HTML-Element <a> — das Element, das einen Link erzeugt. Es ist der Baustein, der das Web überhaupt zum Web macht: Ohne anklickbare Verweise zwischen Dokumenten gäbe es kein Hypertext und kein Navigieren von Seite zu Seite. Das „a" steht für anchor, Anker, weil der Link einen Verweispunkt im Dokument verankert.

Technisch banal, in der Wirkung riesig. Für einen Online-Shop entscheidet das Anchor Tag mit darüber, ob ein Kunde von der Kategorieseite zum Produkt findet, ob Suchmaschinen Deinen Shop überhaupt vollständig erfassen, und ob die internen Verweise Ranking-Signale weitergeben oder verpuffen. Wer das <a>-Element nur als „der Ding zum Klicken" abtut, verschenkt SEO-Potenzial und Barrierefreiheit gleich mit.

Aufbau und Attribute des Anchor Tags

Ein Anchor Tag besteht aus dem öffnenden Tag, einem Linktext und dem schließenden Tag. Das wichtigste Attribut ist href (hypertext reference) — das Ziel des Links. Ein minimales Beispiel verlinkt auf eine Produktseite und nutzt „Wanderschuhe Modell X" als sichtbaren, klickbaren Linktext.

Der Linktext ist kein Beiwerk, sondern Inhalt. Er sagt Nutzern und Suchmaschinen, was sie hinter dem Link erwartet. „Hier klicken" sagt nichts. „Wanderschuhe Modell X ansehen" sagt alles. Diese Selbstverständlichkeit ist einer der meistübersehenen SEO-Hebel überhaupt.

Die wichtigsten Attribute auf einen Blick

Attribut Funktion Praxis-Hinweis
href Zieladresse des Links (URL, Anker, mailto, tel) Pflicht für einen echten Link
target wo das Ziel öffnet, z. B. _blank für neuen Tab bei _blank stets rel="noopener" ergänzen
rel Beziehung zum Ziel (nofollow, sponsored, ugc, noopener) steuert, ob Linkkraft weitergegeben wird
title Tooltip-Text beim Überfahren kein Ersatz für guten Linktext
download signalisiert Download statt Navigation z. B. für PDF-Datenblätter

Eine Eigenschaft sorgt regelmäßig für Verwirrung: Ein <a>-Tag ohne href ist kein Link, sondern nur ein Platzhalter-Anker. Solche „toten" Anchor Tags tauchen oft auf, wenn Entwickler einen Link per JavaScript steuern und das href vergessen — mit der Folge, dass die Tastatur-Navigation und Screenreader das Element nicht als Link erkennen.

Anchor Tags und SEO: Warum der Linktext zählt

Suchmaschinen lesen den Linktext — den sogenannten Anchor Text — als Hinweis darauf, worum es auf der verlinkten Seite geht. Verlinkst Du intern konsequent mit „Damen-Trekkingrucksäcke" auf Deine entsprechende Kategorie, verstärkst Du das thematische Signal für diese Seite. Verlinkst Du dagegen ständig mit „hier", „mehr" oder „weiterlesen", verschenkst Du dieses Signal komplett.

Das gilt für interne wie externe Links. Bei eingehenden Links von fremden Seiten ist der Anchor Text ein historisch starker Rankingfaktor — so stark, dass er in der Vergangenheit massiv manipuliert wurde, weshalb Suchmaschinen über-optimierte, exakt-passende Anchor-Texte heute eher skeptisch bewerten. Ein natürlicher Mix aus Marken-, URL- und beschreibenden Ankern wirkt glaubwürdiger als hundertmal dasselbe Money-Keyword.

Das rel-Attribut richtig einsetzen

Über das rel-Attribut steuerst Du, wie Suchmaschinen mit einem Link umgehen sollen. Die relevanten Werte im E-Commerce:

  • rel="nofollow": Sag der Suchmaschine, dass sie diesem Link nicht folgen und keine Linkkraft übertragen soll. Klassisch für Links, die Du nicht redaktionell verantwortest.
  • rel="sponsored": Für bezahlte Links und Werbung — etwa Affiliate-Links. Seit Google diese Unterscheidung eingeführt hat, ist sie die saubere Kennzeichnung für kommerzielle Verweise.
  • rel="ugc": Für nutzergenerierte Inhalte wie Links in Produktbewertungen oder Forenbeiträgen.
  • rel="noopener" / "noreferrer": Sicherheits- und Datenschutz-Attribute. Bei target="_blank" verhindert noopener, dass die Zielseite über das JavaScript-Objekt window.opener auf Deine Seite zugreifen kann.

Die offizielle Referenz zu allen Attributen und ihrem Verhalten pflegt das Mozilla Developer Network: MDN — das <a>-Element. Wer es ganz genau braucht, schaut dort nach, statt sich auf Halbwissen aus Foren zu verlassen.

Interne Verlinkung: Der unterschätzte Ranking-Hebel

Externe Links bekommen die ganze Aufmerksamkeit, aber der Bereich, den Du voll selbst kontrollierst, ist die interne Verlinkung — und genau die wird in den meisten Shops stiefmütterlich behandelt. Jedes interne Anchor Tag ist eine Aussage darüber, welche Seite wichtig ist und worum es dort geht. Setzt Du diese Aussagen bewusst, lenkst Du sowohl Nutzer als auch Suchmaschinen-Crawler gezielt durch Deinen Shop.

Suchmaschinen verteilen einen Teil der Autorität einer Seite über ihre ausgehenden Links auf die verlinkten Seiten weiter. Eine Produktseite, die von vielen relevanten internen Seiten mit sprechenden Ankern verlinkt wird, bekommt damit ein stärkeres Signal als eine, die nur über das Hauptmenü erreichbar ist. Deine wichtigsten Kategorie- und Produktseiten sollten deshalb intern gut verlinkt sein — aus Ratgeber-Artikeln, aus verwandten Produkten, aus dem Magazin.

Drei Prinzipien für interne Anchor Tags, die tatsächlich tragen:

  • Beschreibend statt generisch: Der Anchor Text benennt das Ziel, nicht die Handlung. „Wanderschuhe für Damen" statt „diese Kategorie".
  • Kontextuell statt willkürlich: Verlinke aus dem Fließtext heraus, wo der Link inhaltlich passt, nicht als loser Block am Seitenende.
  • Tief statt flach: Verlinke nicht nur die Startseite und Hauptkategorien, sondern auch tiefere Produkt- und Unterkategorieseiten, die sonst schwer auffindbar sind.

In Shopware lässt sich das teils automatisieren — etwa über Cross-Selling-Verknüpfungen und verwandte Produkte —, der redaktionelle Teil im Content bleibt aber Handarbeit. Genau diese Handarbeit trennt einen Shop, der seine Linkkraft sinnvoll verteilt, von einem, der sie im Footer verpuffen lässt.

Sprunganker innerhalb einer Seite

Das Anchor Tag verlinkt nicht nur auf andere Seiten, sondern auch auf Stellen innerhalb derselben Seite. Setzt Du als href ein Doppelkreuz gefolgt von einer ID (etwa #versand), springt der Browser zum Element mit genau dieser ID. Das ist der klassische „Zum Inhaltsverzeichnis"- oder „Nach oben"-Mechanismus.

Im Shop nützlich für lange Produktseiten: Ein Sprungmenü oben („Beschreibung", „Technische Daten", „Bewertungen", „Versand") lässt Kunden direkt zum gewünschten Abschnitt springen, ohne zu scrollen. Genau diese internen Sprunganker können in Suchergebnissen zusätzlich als Sitelinks auftauchen und Nutzer direkt an die passende Stelle leiten.

Ein konkretes Praxisbeispiel

Ein Shopware-Shop für Bürobedarf hat ein typisches Problem: Die Produktbeschreibungen verlinken querbeet auf verwandte Artikel, aber fast immer mit dem Linktext „mehr erfahren". Eine SEO-Analyse zeigt, dass die Kategorieseite „Höhenverstellbare Schreibtische" trotz gutem Sortiment schlecht rankt.

Die Korrektur ist unspektakulär, aber wirkungsvoll: Alle internen Links, die auf diese Kategorie zeigen, bekommen aussagekräftige Anchor Texte — statt „mehr erfahren" jetzt „höhenverstellbare Schreibtische im Vergleich" oder „elektrisch höhenverstellbare Schreibtische". Zusätzlich werden Affiliate- und Werbelinks im Magazin-Bereich korrekt mit rel="sponsored" ausgezeichnet, und drei externe Links, die versehentlich Linkkraft an einen Wettbewerber abgaben, auf nofollow gesetzt.

Das Ergebnis nach einigen Wochen: Die Kategorieseite klettert in den Rankings spürbar, weil die internen Anker jetzt ein klares thematisches Signal senden. Kein neues Tool, kein Budget — nur Anchor Tags, die ihren Job richtig machen. Genau solche Detailarbeit unterscheidet einen technisch sauberen Shop von einem, der Potenzial liegen lässt.

Eine der hartnäckigsten Fehlerquellen im Web ist die Verwechslung von Link und Button. Beide sehen oft gleich aus, tun aber Verschiedenes — und das Anchor Tag ist nur für eines davon gemacht. Die Faustregel ist klar: Ein Anchor Tag navigiert (es führt zu einer anderen Stelle, einer anderen Seite, einer Datei). Ein Button löst eine Aktion aus (Warenkorb aktualisieren, Formular abschicken, Menü öffnen).

Im Shop sieht man regelmäßig den umgekehrten Fall: Der „In den Warenkorb"-Button ist als <a> gebaut, mit href="#" und einem JavaScript-Handler obendrauf. Funktioniert mit der Maus, bricht aber bei Tastatur-Nutzung und Screenreadern, weil die Semantik nicht stimmt. Der Browser kündigt einen Link an, der nirgendwohin führt. Solche Konstruktionen wirken harmlos, summieren sich aber zu einem Shop, der für einen Teil der Nutzer schlicht nicht bedienbar ist.

Use Case Richtiges Element Begründung
Zur Produktseite wechseln <a href="..."> Navigation zu einer URL
In den Warenkorb legen <button> Aktion ohne Seitenwechsel
Datenblatt herunterladen <a href="..." download> Verweis auf eine Datei
Filter anwenden <button> (oder <a> mit echter URL) je nachdem, ob die URL sich ändert

Ein praktischer Test: Würde es Sinn ergeben, das Element in einem neuen Tab zu öffnen oder als Lesezeichen zu speichern? Wenn ja, ist es ein Link und gehört in ein Anchor Tag mit echtem href. Wenn nicht, ist es ein Button.

Barrierefreiheit: Das Anchor Tag und Screenreader

Ein oft übersehener Punkt: Anchor Tags sind ein Eckpfeiler der Barrierefreiheit. Screenreader-Nutzer navigieren häufig, indem sie sich alle Links einer Seite vorlesen lassen — ohne den umgebenden Kontext. Eine Liste aus zwanzigmal „hier klicken" ist für diese Nutzer wertlos. Beschreibende Linktexte sind also kein SEO-Luxus, sondern eine Frage der Zugänglichkeit.

Mit dem Barrierefreiheitsstärkungsgesetz, das für viele Online-Shops greift, wird das von der Kür zur Pflicht. Korrekte, beschreibende und per Tastatur erreichbare Anchor Tags gehören zum Grundgerüst eines barrierefreien Shops.

Typische Fehler beim Umgang mit Anchor Tags

  • Nichtssagende Linktexte: „hier", „mehr", „weiterlesen" — verschenken SEO-Signal und behindern Screenreader.
  • <a> ohne href für klickbare Buttons: Für reine Aktionen ohne Navigation gehört ein <button>, kein leeres Anchor Tag.
  • target="_blank" ohne rel="noopener": öffnet ein Sicherheitsleck und ein Performance-Problem.
  • Über-optimierte Money-Keyword-Anker bei Backlinks: wirkt unnatürlich und kann ins Gegenteil umschlagen.
  • Verschachtelte interaktive Elemente: ein Link im Link oder ein Button im Link ist ungültiges HTML und verwirrt assistive Technik.

Das Anchor Tag ist eines dieser Elemente, die jeder zu kennen glaubt und kaum jemand sauber einsetzt. Dabei ist der Hebel groß: Ein Shop mit durchdachten internen Verweisen, sprechenden Anker-Texten und korrekt gesetzten rel-Attributen navigiert besser, rankt besser und ist barrierefreier — allein durch das richtige Befüllen eines simplen HTML-Tags.

Anchor Tags pflegen, nicht nur setzen

Ein Punkt, der im Tagesgeschäft gern untergeht: Links altern. Produkte werden ausgelistet, Kategorien umbenannt, URLs umgestellt. Jedes Anchor Tag, das ins Leere zeigt, schickt Nutzer und Crawler auf eine 404-Seite — verschenkter Traffic und ein negatives Signal. Bei externen Links kommt hinzu, dass die Zielseite verschwinden oder ihren Inhalt komplett ändern kann, ohne dass Du es merkst.

Deshalb gehört eine regelmäßige Link-Prüfung zur Shop-Hygiene. Tools, die den gesamten Shop crawlen und kaputte interne wie externe Links auflisten, gibt es zuhauf — vom kostenlosen Browser-Plugin bis zur professionellen SEO-Suite. Wichtiger als das Tool ist die Routine: einmal im Quartal die Liste durchgehen, defekte Anchor Tags entweder auf ein neues Ziel umbiegen oder sauber entfernen. Ein Shop mit gepflegten Links wirkt auf Suchmaschinen wie auf Kunden vertrauenswürdiger als einer, der Besucher in Sackgassen schickt.

Unterm Strich: Das <a>-Element ist winzig, seine korrekte Verwendung aber eine Daueraufgabe. Wer Linktext, rel-Attribut, Element-Wahl und Link-Pflege ernst nimmt, holt aus einem der ältesten HTML-Tags überhaupt einen erstaunlich großen Mehrwert für Auffindbarkeit, Nutzerführung und Zugänglichkeit.