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.