Anchor-Links, auf Deutsch oft als Sprungmarken bezeichnet, sind kleine, unscheinbare Helferlein im großen Getriebe des Internets. Sie führen uns – wie ein gut gesetzter Anker – direkt dorthin, wo wir hinwollen. In langen Texten und Blog-Artikeln wirken sie wie Wegweiser, die Leser*innen Orientierung bieten. Aber was genau steckt dahinter? Und wie lassen sich Anchor-Links gezielt einsetzen, um den eigenen Blog aufzuwerten?
🎯 Was ist ein Anchor-Link?
Ein Anchor-Link ist ein interner Link, der auf eine bestimmte Stelle innerhalb derselben Seite verweist. Man klickt – und wird elegant zu einem Abschnitt weiter unten (oder oben) auf der Seite gescrollt.
In HTML sieht das so aus:
<a href="#definition">Zur Definition springen</a>
...
<h2 id="definition">Was ist ein Anchor-Link?</h2>
Der Link href="#definition" verweist auf ein Element mit der ID definition. Voilà – der Sprung ist geglückt!
📌 Warum Anchor-Links in Blog-Artikeln sinnvoll sind
Gerade bei längeren Blog-Artikeln, Ratgebern oder Tutorials helfen Anchor-Links dabei, die Lesbarkeit und Benutzerführung zu verbessern. Hier ein paar konkrete Vorteile:
- Bessere Nutzererfahrung (UX): Leser*innen können gezielt zu dem Abschnitt springen, der sie interessiert.
- Übersichtlichkeit: Eine klickbare Inhaltsangabe am Anfang des Artikels wirkt wie ein Navigationsmenü.
- Zeitersparnis: Niemand muss ewig scrollen oder suchen.
- Teilen von Abschnitten: Einzelne Themenbereiche können direkt verlinkt werden – ideal für Social Media oder E-Mails.
- Barrierefreiheit: Screenreader können besser navigieren, wenn IDs und Überschriften korrekt verwendet werden.
🧭 So setzt man Anchor-Links richtig ein
1. Ziel definieren – ID setzen
Das Ziel eines Anchor-Links braucht eine eindeutige ID – meist bei einer Überschrift:
<h2 id="vorteile">Vorteile von Anchor-Links</h2>
2. Link erstellen
Nun brauchst du einen Link, der auf diese ID verweist:
<a href="#vorteile">Zu den Vorteilen</a>
3. Inhaltsverzeichnis erstellen (optional, aber sinnvoll)
Gerade bei längeren Texten lohnt sich eine kleine Navigation:
<h3>Inhalt</h3>
<ul>
<li><a href="#definition">Was ist ein Anchor-Link?</a></li>
<li><a href="#vorteile">Vorteile von Anchor-Links</a></li>
<li><a href="#umsetzung">So setzt man Anchor-Links ein</a></li>
</ul>
Ein bisschen CSS, und du hast ein schickes Mini-Menü.
⚠️ Dinge, die man vermeiden sollte
- Mehrere IDs mit gleichem Namen: Das kann zu Verwirrung oder fehlerhaftem Verhalten führen.
- Nichtssagende IDs: Verwende sprechende Namen wie
#kommentare, nicht#abschnitt1. - Vergessen, die Ziel-ID zu setzen: Dann klickt man ins Leere – Frustration garantiert.
🌐 Anchor-Links und SEO – eine kurze Einschätzung
Zwar haben Anchor-Links keinen direkten Einfluss auf das Google-Ranking, aber: Sie verbessern die Nutzererfahrung – und das wird von Suchmaschinen durchaus honoriert. Außerdem erhöhen sie die Chance, dass Inhalte geteilt oder gezielt zitiert werden – ein echter Pluspunkt für Reichweite und Sichtbarkeit.
✍️ Fazit: Kleine Links, große Wirkung
Anchor-Links sind mehr als nur technische Spielerei – sie sind Ausdruck von Struktur, Leserfreundlichkeit und redaktioneller Sorgfalt. In einer Zeit, in der viele Leser*innen Inhalte nur noch überfliegen, ist gute Navigation ein echter Bonus. Ein Blog, der Orientierung bietet, lädt ein, verweilen – und wiederzukommen.
🔧 Tipps für WordPress-Nutzer (Bonus)
Wenn du WordPress verwendest, kannst du Anchor-Links auch ohne HTML-Kenntnisse einsetzen:
- Mit Plugins wie Easy Table of Contents oder Kadence Blocks.
- Im Gutenberg-Editor kannst du jedem Block eine eigene HTML-Anker-ID zuweisen (unter „Erweitert“).
- Themes wie GeneratePress (das hier seit Jahren im Einsatz ist!) unterstützen Anchor-Links hervorragend – vor allem in Kombination mit GenerateBlocks.
Ich hatte zunächst ein Plug-in für diesen Zweck im Einsatz. Jetzt hat mir ChatGPT das hier nach meinen Vorgaben geliefert. Den Code – sofern GeneratePress und GenerateBlocks vorhanden) in einen Hook (Elemente) einfügen. Läuft…
Bitte im Hook WP-Footer aktivieren und die Anzeige-Regeln auf Beiträge — > alle setzen.
<style>
h2 {
position: relative;
}
h2:hover .gb-anchor-link {
opacity: 1;
}
.gb-anchor-link {
position: absolute;
left: -36px;
top: 0px;
height: 100%;
display: flex;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
text-decoration: none;
color: #1b2e53;
cursor: pointer;
}
.gb-anchor-link::before {
content: "🔗";
font-size: 22px;
}
.gb-anchor-link.copied::before {
content: "✅";
color: #d02437;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
function slugify(text) {
return text
.toString()
.toLowerCase()
.trim()
.replace(/[\s\W-]+/g, "-")
.replace(/^-+|-+$/g, "");
}
document.querySelectorAll("h2").forEach(function (heading, index) {
if (!heading.id || heading.id.trim() === "") {
const base = slugify(heading.textContent || "ueberschrift-" + index);
let uniqueId = base;
let counter = 1;
while (document.getElementById(uniqueId)) {
uniqueId = base + "-" + counter++;
}
heading.id = uniqueId;
}
const link = document.createElement("a");
link.href = "#" + heading.id;
link.className = "gb-anchor-link";
link.setAttribute("title", "Link kopieren");
// Copy on click
link.addEventListener("click", function (e) {
e.preventDefault();
const fullUrl = window.location.origin + window.location.pathname + "#" + heading.id;
navigator.clipboard.writeText(fullUrl).then(() => {
link.classList.add("copied");
setTimeout(() => {
link.classList.remove("copied");
}, 1500);
});
});
heading.prepend(link);
});
});
</script>
Ja, man braucht das nicht, um zu bloggen. Schon klar. Aber ich sage dann gern: Man gönnt sich ja sonst nichts.
