Was sind Anchor-Links (Ankerlinks)?
Anchor-Links – auch Sprungmarken genannt – verweisen per Hash-Zeichen (#) auf eine bestimmte Stelle innerhalb derselben Seite oder eines anderen HTML-Dokuments. Sie erleichtern besonders auf langen Seiten die Navigation, etwa bei Inhaltsverzeichnissen, FAQs oder AGBs.
Beispiel:
<!-- Ziel -->
<h2 id="faq">FAQ</h2>
<!-- Link -->
<a href="#faq">Zu den FAQ springen</a>Vorteile von Anchor-Links
- Schneller Seitenzugriff: Nutzer springen direkt zur gewünschten Information – ohne Scrollen.
- SEO-Bonus: Google kann bei strukturierten Seiten sogenannte „Jump Links“ in den Suchergebnissen anzeigen.
- Bessere UX bei langen Seiten: Ideal für Inhaltsverzeichnisse, How-To-Guides oder strukturierte Produkttexte.
- Barrierefreiheit: Richtig eingesetzt, unterstützen Anchor-Links auch Screenreader- und Tastatur-Nutzer*innen.
Smooth Scroll: So geht’s
Damit das Springen nicht „ruckelt“, sondern sanft scrollt, genügt 1 Zeile CSS:
html {
scroll-behavior: smooth;
}
Für ältere Browser kann JavaScript als Fallback dienen – aber native CSS reicht in modernen Umgebungen meist aus.
Anchor-Links barrierefrei einsetzen
- Verwende aussagekräftige Link-Texte wie „Zu den FAQ springen“ statt „Hier klicken“.
- Nutze für Ziel-Elemente Überschriften mit
idund bei Bedarftabindex="-1"– so können sie mit Tastatur und Screenreader fokussiert werden. - Ergänze bei Bedarf folgenden Fokus-Fix mit JavaScript:
document.getElementById('faq').focus();
Tipp: Achte auf ausreichend Kontrast bei Linkfarben und testbare Tastaturnavigation (Tabulator-Prüfung).
Offset bei Sticky-Headern
Wenn deine Website einen fixierten Header nutzt, kann der gesprungene Anker verdeckt sein. Löse das mit scroll-margin-top:
:target {
scroll-margin-top: 80px; /* Höhe deines Sticky-Headers */
}Anchor-Link zu anderer Seite?
Ja, das funktioniert ebenfalls:
<a href="https://deine-seite.de/lexikon/#svg">Zum SVG-Abschnitt</a>Wichtig: Die Zielseite muss ein passendes id-Attribut enthalten, sonst springt der Browser nicht.
Lange Seiten, aber keine Orientierung?
X-06 Designs baut dir eine suchmaschinenfreundliche Anchor-Navigation.
🕵️♂️ Geheimtipp: Anchor-Links in PDF-Dateien nutzen
Wusstest du, dass du auch innerhalb von PDF-Dateien zu bestimmten Seiten oder Abschnitten verlinken kannst? Das ist besonders nützlich, wenn du in einem Blogbeitrag oder einer E-Mail direkt auf eine relevante Stelle in einem umfangreichen PDF-Dokument verweisen möchtest.
Verlinkung auf eine bestimmte Seite
Um direkt auf eine bestimmte Seite in einem PDF-Dokument zu verlinken, füge einfach #page=[Seitenzahl] an die URL an.
Beispiel:
<a href="https://deine-seite.de/leitfaden.pdf#page=4">Zur Seite 4 des Leitfadens</a>Dieser Link öffnet die PDF-Datei direkt auf Seite 4. Beachte, dass diese Methode hauptsächlich in Browsern funktioniert, die PDF-Dateien mit einem integrierten Viewer anzeigen. Nicht alle PDF-Viewer unterstützen diese Funktion.
Verlinkung auf benannte Ziele (Named Destinations)
Für präzisere Verlinkungen innerhalb einer PDF-Datei kannst du sogenannte „Named Destinations“ verwenden. Diese ermöglichen es, direkt zu einem bestimmten Abschnitt oder einer Überschrift zu springen.
Schritte:
- Öffne die PDF-Datei in Adobe Acrobat.
- Navigiere zu der Stelle, die du als Ziel festlegen möchtest.
- Wähle im Menü Anzeige > Navigationsfenster > Ziele, um das Ziel-Fenster zu öffnen.
- Klicke auf Neues Ziel, gib einen Namen ein und speichere das Ziel.
- Verlinke von deiner Webseite mit
#nameddest=Zielname.
Beispiel:
<a href="https://deine-seite.de/leitfaden.pdf#nameddest=kapitel3">Direkt zu Kapitel 3</a>Diese Methode bietet mehr Flexibilität, insbesondere wenn sich die Seitenzahlen im PDF-Dokument ändern könnten.
Anchor-Links tracken (GA4 / Google Tag Manager)
Anchor-Klicks lassen sich in Google Analytics 4 oder per GTM tracken:
- Direkt per
data-ga-event-Attribut und Custom Event - Oder über den integrierten Auto-Event-Listener im Tag Manager, Filter: Link-Ziel beginnt mit #
Fakt am Rande: Laut Nielsen Norman Group (2024) senkten strukturierte Anchor-Navigationen in How-To-Artikeln die Scroll-Frustration um 45 %.
Häufige Fragen
Was ist ein Anchor-Link (Ankerlink) und wie funktioniert er?
Ein Anchor-Link – auch Sprungmarke genannt – ist ein Link, der innerhalb einer Seite zu einem bestimmten Abschnitt führt. Er nutzt ein Hash-Zeichen # plus eine eindeutige ID im HTML. Klickt ein Nutzer den Link, springt die Seite direkt zur passenden Überschrift oder Content-Sektion. Das ist besonders praktisch bei langen Seiten, Inhaltsverzeichnissen oder FAQ-Bereichen.
Wie setze ich Anchor-Links in HTML richtig?
Du brauchst zwei Dinge:
-
ein Ziel-Element mit id, z. B. eine Überschrift
-
einen Link, der auf diese ID verweist.Beispiel:
<h2 id="kontakt">Kontakt</h2>und<a href="#kontakt">Zum Kontakt</a>.Wichtig: IDs dürfen pro Seite nur einmal vorkommen und sollten sprechend benannt sein (z. B. #preise, #faq).
Sind Anchor-Links gut für SEO?
Ja – sinnvoll eingesetzt stärken Anchor-Links die interne Verlinkung und helfen Google, Inhalte besser zu verstehen. Bei sauber strukturierten Seiten kann Google sogar Jump-Links in den Suchergebnissen anzeigen, wodurch Nutzer direkt zu relevanten Abschnitten springen können. Das verbessert oft CTR und Nutzererfahrung.
Was ist der Unterschied zwischen Anchor-Link und Anchor-Text?
Ein Anchor-Link ist die Sprungmarke selbst (also der Link zu einem Seitenabschnitt). Der Anchor-Text ist dagegen der klickbare Linktext, den Nutzer sehen, z. B. „Zu den Öffnungszeiten“. Für SEO ist beides wichtig: Anchor-Links strukturieren Inhalte, Anchor-Texte sollten beschreibend und natürlich formuliert sein – nicht generisch wie „hier klicken“.
Wie nutze ich Anchor-Links barrierefrei und nutzerfreundlich?
Damit Anchor-Links nicht nur praktisch, sondern auch barrierefrei sind, sollten Linktexte klar sagen, wohin sie führen (z. B. „Zum FAQ-Bereich“). Für Tastatur- und Screenreader-Nutzung hilft es, das Ziel per id an Überschriften zu hängen und bei Bedarf tabindex=“-1″ zu ergänzen. Optional sorgt scroll-behavior: smooth; in CSS für sanftes Scrollen – ohne harte Sprünge.