Mit einem Ankerlink machst du einzelne Abschnitte deiner Seite direkt erreichbar. Das hilft beispielsweise Kund:innen, die in einer ausführlichen Produktbeschreibung gezielt nach den Maßen eines Produkts suchen.
Wie leicht sie diese Angaben finden, hängt davon ab, wo du sie platzierst und wie du darauf verweist. Gerade bei längeren Inhalten lohnt es sich deshalb, die Navigation genauer anzusehen: Sie beeinflusst, wie sich Kund:innen in deinem Onlineshop zurechtfinden.
In diesem Beitrag erfährst du, wann ein Ankerlink für deinen Onlineshop sinnvoll ist, wie du ihn einrichtest und worauf du achten solltest, um typische Fehler zu vermeiden.
Was ist ein Ankerlink?
Ein Ankerlink ist ein Link, der direkt zu einem bestimmten Abschnitt einer Webseite führt, etwa zu einer Zwischenüberschrift oder einer Größentabelle. Dafür verweist er auf eine dort gesetzte Sprungmarke, die du sowohl innerhalb derselben Seite als auch von einer anderen Seite aus ansteuern kannst.
Wie funktioniert ein Ankerlink?
Ein Ankerlink enthält das Sprungziel im sogenannten URL-Fragment, also im Teil der Adresse nach der Raute #. Auf der Zielseite kennzeichnet eine ID das dazugehörige HTML-Element, beispielsweise eine Überschrift.
Wenn Kund:innen auf den Link klicken, sucht der Browser nach dem Element mit der passenden ID und scrollt dorthin. Ein Link mit #materialpflege führt ihn beispielsweise zu einer Überschrift, die mit id="materialpflege" gekennzeichnet ist.
Welche Seite der Browser dabei durchsucht, bestimmt der Teil der Adresse vor der Raute. Besteht der Link nur aus #materialpflege, bleibt er auf der aktuell geöffneten Seite. Bei einer Adresse wie /pages/pflegeratgeber#materialpflege öffnet er zunächst den Pflegeratgeber und springt dort zum angegebenen Abschnitt.
Anker, Ankerlink oder Ankertext: Die Unterschiede auf einen Blick
Die Begriffe Anker, Ankerlink und Ankertext gehören zusammen, beschreiben aber unterschiedliche Teile einer Verlinkung:
| Begriff | Bedeutung | Beispiel |
|---|---|---|
| Anker oder Sprungmarke | Das gekennzeichnete Ziel auf der Seite | Eine Überschrift mit id="materialpflege"
|
| Ankerlink | Der Verweis auf dieses Ziel | Ein Link mit href="#materialpflege"
|
| Ankertext | Der sichtbare, klickbare Text des Links | „Zur Materialpflege“ |
Wann sind Ankerlinks in deinem Onlineshop sinnvoll?
Ankerlinks helfen bei der Orientierung, wenn eine Seite mehrere eigenständige Themen behandelt oder häufig gesuchte Angaben weiter unten stehen. In deinem Onlineshop kannst du sie beispielsweise an diesen Stellen einsetzen:
- Ausführlicher Blogbeitrag: Über ein Inhaltsverzeichnis verlinkst du die Hauptabschnitte, damit Leser:innen gezielt die Kapitel aufrufen können, die sie interessieren.
- Produktseite: Ein Link neben der Größenauswahl führt Kund:innen direkt zur Größentabelle und hilft ihnen, die passende Größe zu finden.
- Landingpage: Mit einem Button am Seitenanfang führst du Interessierte zu einem Anmeldeformular weiter unten.
- Service-Seite: Eine Themenübersicht erleichtert Kund:innen den Weg zu den Angaben über Versand oder Rückgabe.
Wichtige Produktangaben direkt zeigen
Preis und wesentliche Produkteigenschaften sollten so platziert sein, dass Kund:innen sie direkt sehen. Für ergänzende Informationen, etwa eine ausführliche Reinigungsanleitung, bietet sich dagegen ein Ankerlink an.
Setze den Verweis möglichst dort, wo die entsprechende Frage entsteht. Pflegehinweise passen beispielsweise zu einem Abschnitt über das Material, weil Kund:innen an dieser Stelle erfahren möchten, wie sie das Produkt reinigen können.
Den Bedarf auf kurzen Seiten prüfen
Auf einer kurzen Seite mit wenigen Absätzen ist eine zusätzliche Sprungnavigation oft überflüssig. Sind das Formular oder die gesuchten Angaben bereits direkt sichtbar, können Kund:innen sie ohne einen weiteren Link erreichen.
Ankerlink mit HTML erstellen: Schritt für Schritt
Ein Ankerlink besteht aus einer Sprungmarke am Ziel und einem Link, der darauf verweist. Im folgenden Beispiel richtest du beides in einem Pflegeratgeber ein, um den Abschnitt „Materialpflege“ direkt erreichbar zu machen.
1. Die Sprungmarke setzen
Suche im HTML-Code die Überschrift, zu der der Link führen soll, und ergänze das Attribut id:
<h2 id="materialpflege">Materialpflege</h2>Damit erhält die Überschrift die Sprungmarke materialpflege. Jede ID darf auf der Seite nur einmal vorkommen und keine Leerzeichen enthalten. Wähle deshalb einen eindeutigen Namen, der zum Abschnitt passt, und trenne mehrere Wörter mit Bindestrichen, etwa pflege-und-reinigung.
2. Den Ankerlink einfügen
Füge nun an der Stelle, von der Kund:innen zum Abschnitt springen sollen, den passenden Link ein:
<a href="#materialpflege">Zur Materialpflege</a>Der Name nach der Raute muss exakt mit der ID der Überschrift übereinstimmen, einschließlich der Groß- und Kleinschreibung. Den sichtbaren Text „Zur Materialpflege“ kannst du bei Bedarf anpassen, solange er das verlinkte Ziel beschreibt.
3. Von einer anderen Seite verlinken
Möchtest du den Abschnitt von einer anderen Seite aus verlinken, ergänze vor der Raute den Pfad der Zielseite. Für den Pflegeratgeber sieht das so aus:
<a href="/pages/pflegeratgeber#materialpflege">
Zur Materialpflege im Pflegeratgeber
</a>4. Den Ankerlink testen
Speichere deine Änderungen und klicke den Link auf der fertigen Seite an. Prüfe dabei, ob der Browser zur richtigen Überschrift springt und diese vollständig sichtbar bleibt. Wiederhole den Test auf dem Smartphone, da sich das Seitenlayout dort unterscheiden kann.
Einen Ankerlink in Shopify setzen
In Shopify kannst du Sprungmarken über die HTML-Ansicht des Rich-Text-Editors ergänzen. Du findest diesen Editor bei Seiten und Blogbeiträgen sowie in Produkt- und Kollektionsbeschreibungen.
Ankerlink auf einer Inhaltsseite einfügen
Um einen Ankerlink auf einer bestehenden Seite einzurichten, gehst du so vor:
- Öffne im Shopify-Adminbereich Onlineshop > Seiten und wähle die gewünschte Seite aus.
- Klicke im Inhaltsfeld auf „HTML anzeigen“.
- Ergänze die Zielüberschrift um eine eindeutige ID, wie im vorherigen HTML-Beispiel.
- Füge den passenden Ankerlink an der Stelle ein, von der Kund:innen zum Abschnitt springen sollen.
- Speichere die Seite und prüfe den Link in der Vorschau.
Verwende zum Einfügen des Codes die HTML-Ansicht. Gibst du ihn stattdessen als normalen Text in das Inhaltsfeld ein, erscheint er möglicherweise als sichtbarer Code auf deiner Seite.
Blogbeiträge und Produktbeschreibungen bearbeiten
Bei Blogbeiträgen funktioniert das Einrichten auf dieselbe Weise. Öffne dazu Inhalt > Blog-Beiträge, wähle den gewünschten Beitrag aus und ergänze Sprungmarke und Link in der HTML-Ansicht des Inhaltsfelds.
Für eine Produktbeschreibung öffnest du das betreffende Produkt. Dort wechselst du im Beschreibungsfeld zur HTML-Ansicht und fügst die beiden Elemente ein.
Ziele außerhalb des Inhaltsfelds berücksichtigen
Ein separater Bewertungsbereich oder ein anderer Theme-Abschnitt liegt häufig außerhalb des Textfelds, das du gerade bearbeitest. Möchtest du dorthin verlinken, muss die ID am tatsächlichen Zielelement stehen.
Prüfe in diesem Fall die Einstellungen deines Themes. Welche Möglichkeiten du dort findest und ob du den Theme-Code anpassen musst, hängt vom verwendeten Theme ab.
Welche Rolle spielen Ankerlinks für SEO?
Für die Suchmaschinenoptimierung kommt es bei Ankerlinks unter anderem auf beschreibende Linktexte an. Wähle kurze, aussagekräftige Formulierungen, die erkennen lassen, welcher Inhalt im verlinkten Abschnitt steht.
Linktexte am Inhalt ausrichten
Die Einträge in deinem Inhaltsverzeichnis sollten die tatsächlichen Themen der Abschnitte benennen. „Versandkosten“ beschreibt beispielsweise ein klares Ziel und weckt eine entsprechende Erwartung: Im zugehörigen Abschnitt sollten Leser:innen die Kosten und Bedingungen für den Versand finden.
Dein Hauptkeyword muss dafür nicht in jedem Eintrag vorkommen. Entscheidend ist, dass die Formulierung zum jeweiligen Inhalt passt.
Für eigenständige Inhalte eigene URLs verwenden
Ein Sprungziel wie #materialpflege bleibt Teil derselben Seite und erzeugt keine eigenständige Unterseite. Wenn du ausführliche Ratgeber zu verschiedenen Materialien jeweils als eigene Seite in der Suche auffindbar machen möchtest, brauchst du dafür separate URLs.
Innerhalb dieser Ratgeber kannst du anschließend Ankerlinks einsetzen, um die einzelnen Kapitel direkt erreichbar zu machen.
In diesem Video (auf Englisch) erfährst du, wie du mit deinem Shopify-Store ein hohes Ranking in Suchmaschinen erzielst.
Ankerlinks erstellen: Best Practices
Die folgenden Tipps helfen dir, deine Sprungnavigation übersichtlich zu gestalten und ihre Bedienung auf verschiedenen Geräten zu prüfen.
Inhaltsverzeichnis überschaubar halten
Verlinke die Hauptabschnitte, die Leser:innen gezielt aufrufen möchten. Kleinere Zwischenüberschriften innerhalb eines Kapitels brauchen meist keinen eigenen Eintrag.
Im selben Tab bleiben
Ankerlinks innerhalb einer Seite sollten sich im bestehenden Browser-Tab öffnen, damit Kund:innen im aktuellen Dokument weiterlesen können.
Tastaturbedienung prüfen
Rufe die Links mit der Tab-Taste auf und aktiviere sie mit der Eingabetaste. Achte dabei darauf, dass der Tastaturfokus sichtbar ist und du nach dem Sprung sinnvoll weiter navigieren kannst.
Links auf dem Smartphone testen
Lass genügend Abstand zwischen benachbarten Einträgen und teste die Bedienung auf einem echten Gerät. So erkennst du, ob sich der gewünschte Link mit dem Finger treffen lässt, ohne versehentlich einen anderen zu öffnen.
Mit einem Skip-Link zum Hauptinhalt führen
Ein Link wie „Zum Inhalt“ ermöglicht Tastaturnutzer:innen, die wiederkehrende Navigation am Seitenanfang zu überspringen. Prüfe, ob dein Theme einen solchen Skip-Link enthält und ob nach seiner Aktivierung auch der Tastaturfokus am Hauptinhalt liegt.
Typische Fehler bei Ankerlinks: So behebst du sie
Wenn ein Ankerlink nicht wie erwartet funktioniert, lohnt sich zuerst ein Blick auf seine Zieladresse und die ID auf der Zielseite. Je nachdem, was beim Anklicken passiert, kannst du die Ursache weiter eingrenzen.
Der Link führt auf einen falschen Seitenpfad
Fehlt die Raute, behandelt der Browser den Namen als Seitenpfad. Aus href="materialpflege" wird deshalb kein Sprung innerhalb der aktuellen Seite. Ergänze dafür die Raute vor dem Namen: href="#materialpflege".
Die Sprungmarke wird nicht erreicht
Vergleiche den Namen nach der Raute mit der ID des Zielelements. Beide müssen exakt übereinstimmen, auch bei der Groß- und Kleinschreibung: Ein Link mit href="#materialpflege" benötigt ein Ziel mit id="materialpflege".
Hat der Link zuvor funktioniert, kontrolliere außerdem, ob du die ID beim Bearbeiten versehentlich verändert oder entfernt hast.
Der Browser springt zum falschen Abschnitt
Eine mehrfach vergebene ID kann dazu führen, dass der Browser ein anderes Ziel als vorgesehen ansteuert. Suche deshalb im HTML-Code nach der verwendeten ID und prüfe, wie oft sie vorkommt.
Vergib bei mehrfacher Verwendung unterschiedliche Namen für die einzelnen Ziele und passe die zugehörigen Links an. Jede ID muss innerhalb einer Seite eindeutig sein.
Ein Link von einer anderen Seite funktioniert nicht
Öffne zunächst die Zieladresse ohne das Fragment, um den Seitenpfad zu prüfen. Ist die Seite nicht erreichbar, korrigiere den Teil der Adresse vor der Raute. Lädt sie problemlos, überprüfe dort die Ziel-ID.
Bei /pages/pflegeratgeber#materialpflege müssen beide Teile stimmen: Die Seite muss unter /pages/pflegeratgeber erreichbar sein und ein Element mit id="materialpflege" enthalten.
Eine fixierte Navigation verdeckt die Überschrift
Wenn deine Navigation beim Scrollen am oberen Bildschirmrand stehen bleibt, kann sie die Zielüberschrift nach dem Sprung verdecken. Mit der CSS-Eigenschaft scroll-margin-top legst du zusätzlichen Abstand für das Sprungziel fest:
#materialpflege {
scroll-margin-top: 100px;
}Die 100px dienen als Beispielwert. Passe den Abstand an die Höhe deiner Navigation an und prüfe auf Desktop und Smartphone, ob die Überschrift vollständig sichtbar bleibt.
In deinem Shopify-Store kannst du die Regel unter Onlineshop > Themes > Theme bearbeiten > Theme-Einstellungen > Benutzerdefiniertes CSS ergänzen und speichern.
Fazit: Ankerlinks gezielt in deinem Onlineshop einsetzen
Mit Ankerlinks führst du Kund:innen direkt zu den Abschnitten, die sie gerade benötigen, etwa zu einer Größentabelle oder einem Kapitel im Ratgeber. Technisch brauchst du dafür eine eindeutige ID am Ziel und einen Link, der auf diese ID verweist. In Shopify kannst du beides über die HTML-Ansicht des Rich-Text-Editors einfügen.
Damit sich Kund:innen gut orientieren können, sollten deine Linktexte erkennen lassen, welche Informationen sie am Ziel finden. Auch für die Struktur deiner Inhalte ist die Unterscheidung wichtig: Ein Abschnitt mit Sprungmarke gehört weiterhin zur bestehenden Seite. Sollen Inhalte als eigenständige Seiten in der Suche auffindbar sein, benötigen sie separate URLs.
Prüfe zum Abschluss, ob Link und Ziel übereinstimmen, die Überschrift nach dem Sprung sichtbar bleibt und sich die Navigation auf dem Smartphone sowie mit der Tastatur bedienen lässt. So erleichterst du Kund:innen den Zugang zu den verlinkten Inhalten.
