Was ist ein Anker in einer URL?
Ein Anker in einer URL ist ein sogenanntes Fragment. Dieses Fragment steht am Ende einer Webadresse und beginnt mit einem Rautezeichen. Es verweist auf einen bestimmten Abschnitt innerhalb eines Dokuments. Wird eine URL mit einem solchen Fragment geöffnet, lädt der Browser die Seite und scrollt automatisch zu dem Element, dessen ID mit dem Fragment übereinstimmt. In der URL https://www.beispiel.de/seite/#kontakt ist #kontakt der Anker. Die dazugehörige Stelle auf der Seite benötigt ein HTML-Element mit id="kontakt".
Der technische Gedanke dahinter ist einfach: Eine lange Webseite wird nicht nur als Gesamtseite adressierbar, sondern auch in einzelne Abschnitte aufgeteilt. Dadurch kann ein bestimmter Bereich direkt aufgerufen werden. Das ist besonders hilfreich bei umfangreichen Ratgebern, langen Produktseiten, Lexikonartikeln, FAQ-Seiten oder Landingpages. Statt nur auf den Anfang einer Seite zu verlinken, führt der Link direkt zur relevanten Information.
Ein praktisches Beispiel ist ein langer SEO-Ratgeber mit mehreren Bereichen. Der Abschnitt „FAQ“ kann die ID faq erhalten. Der interne Link im Inhaltsverzeichnis lautet dann #faq. Ein externer Link von einer anderen Seite kann dagegen die vollständige Adresse verwenden: https://www.beispiel.de/seo-ratgeber/#faq. Beide Varianten führen zum gleichen Abschnitt, aber die kurze Variante funktioniert nur innerhalb derselben Seite.
Der URL-Anker ist also ein präzises Navigationswerkzeug. Er verbessert die Nutzerführung, erleichtert das Verlinken einzelner Abschnitte und kann die Verständlichkeit langer Inhalte erhöhen. Besonders bei SEO-Inhalten ist das sinnvoll, weil umfangreiche Ratgeber dadurch nicht unübersichtlich wirken. Der Nutzer landet direkt bei der gesuchten Antwort, ohne lange scrollen zu müssen.
Unterschied zwischen URL-Anker und Ankertext
Der Begriff „Anker“ führt häufig zu Verwechslungen, weil er in mehreren Zusammenhängen verwendet wird. Ein URL-Anker ist die technische Sprungmarke am Ende einer URL, zum Beispiel #preise, #faq oder #kontakt. Ein Ankertext ist dagegen der sichtbare Text, auf den geklickt wird, zum Beispiel „Preise vergleichen“, „häufige Fragen“ oder „Kontakt aufnehmen“. Beide Elemente gehören zu Links, erfüllen aber unterschiedliche Aufgaben.
Ein Beispiel zeigt den Unterschied deutlich:
<a href="#faq">Häufige Fragen</a>
In diesem Code ist #faq der URL-Anker. Der sichtbare Text „Häufige Fragen“ ist der Ankertext. Wird auf den Link geklickt, springt der Browser zum Element mit der ID faq. Damit ein solcher Link funktioniert, muss es auf der Seite ein passendes Element geben, zum Beispiel:
<h2 id="faq">Häufige Fragen</h2>
Der Ankertext ist besonders wichtig für Verständlichkeit und SEO. Er sollte klar beschreiben, wohin der Link führt. Allgemeine Texte wie „hier klicken“ sind weniger hilfreich, weil sie den Zielinhalt nicht erklären. Besser sind beschreibende Formulierungen wie „zum FAQ-Bereich“, „zur Kostenübersicht“ oder „zur Schritt-für-Schritt-Anleitung“. Google weist in seinen Link-Best-Practices darauf hin, dass Linktexte hilfreich und beschreibend sein sollten.
Der URL-Anker sorgt dagegen für die technische Zielgenauigkeit. Er bestimmt, welcher Abschnitt geöffnet wird. Für eine saubere Umsetzung müssen beide Ebenen stimmen: Die Sprungmarke muss technisch korrekt sein, und der sichtbare Linktext sollte verständlich formuliert werden. Nur dann entsteht eine gute Nutzerführung.
Wie funktioniert ein URL-Anker technisch?
Technisch besteht ein URL-Anker aus zwei Bestandteilen: dem Ziel auf der Seite und dem Link, der auf dieses Ziel verweist. Das Ziel wird mit einem id-Attribut definiert. Dieses Attribut kann an vielen HTML-Elementen gesetzt werden, etwa an Überschriften, Abschnitten, Containern oder Formularbereichen. Der Link verwendet anschließend das Rautezeichen und den ID-Namen.
Ein einfaches Beispiel:
<h2 id="kosten">Kosten im Überblick</h2>
Der passende Link dazu lautet:
<a href="#kosten">Zu den Kosten springen</a>
Wird dieser Link angeklickt, sucht der Browser auf derselben Seite nach einem Element mit id="kosten" und scrollt dorthin. Die vollständige URL kann anschließend so aussehen:
https://www.beispiel.de/ratgeber/#kosten
Das Rautezeichen ist dabei der technische Trenner zwischen der eigentlichen URL und dem Fragment. Das Fragment wird typischerweise verwendet, um eine bestimmte Stelle innerhalb eines HTML-Dokuments anzusteuern. Browser scrollen dann zum passenden Element, wenn eine entsprechende ID vorhanden ist.
Wichtig ist, dass die ID eindeutig ist. Auf einer Seite sollte dieselbe ID nicht mehrfach vorkommen. Wenn mehrere Elemente dieselbe ID besitzen, kann der Browser nicht sauber zuordnen, welche Stelle gemeint ist. Außerdem sollten IDs möglichst einfach, lesbar und stabil sein. Empfehlenswert sind kurze Begriffe mit Kleinbuchstaben und Bindestrichen, etwa #technische-pruefung, #faq, #vorteile oder #kontaktformular.
Schritt-für-Schritt: Einen Anker in HTML einfügen
Die klassische Methode erfolgt direkt im HTML-Code. Zuerst wird der Zielabschnitt ausgewählt. Das kann eine Überschrift, ein Absatz, ein Formular oder ein ganzer Abschnitt sein. Danach erhält dieses Element eine eindeutige ID. Anschließend wird ein Link erstellt, der mit dem Rautezeichen auf diese ID verweist.
Schritt 1: Zielabschnitt bestimmen.
Beispiel:
<h2>Vorteile einer Backlink-Analyse</h2>
Schritt 2: ID hinzufügen.
<h2 id="vorteile">Vorteile einer Backlink-Analyse</h2>
Schritt 3: Link zur Sprungmarke erstellen.
<a href="#vorteile">Zu den Vorteilen springen</a>
Schritt 4: Vollständige URL verwenden, wenn von außen verlinkt werden soll.
https://www.beispiel.de/backlink-analyse/#vorteile
Diese einfache Struktur reicht in den meisten Fällen aus. Wichtig ist, dass im Link nur der ID-Name nach dem Rautezeichen steht. Das id-Attribut selbst enthält kein Rautezeichen. Der Fehler id="#vorteile" wäre daher falsch. Richtig ist id="vorteile" und im Link href="#vorteile".
Bei langen Seiten kann ein Inhaltsverzeichnis aus mehreren Ankerlinks aufgebaut werden. Jeder Abschnitt erhält eine eigene ID. Das Inhaltsverzeichnis verweist dann mit kurzen Links auf diese IDs. Dadurch entsteht eine klare Seitenstruktur, die sowohl Nutzern als auch Suchmaschinen hilft, den Inhalt besser zu erfassen.
Einen Anker in WordPress einfügen
In WordPress lassen sich Anker auf unterschiedliche Weise einfügen. Im Block-Editor kann vielen Blöcken ein HTML-Anker zugewiesen werden. Besonders häufig wird diese Funktion bei Überschriften genutzt. Der Ankername wird ohne Rautezeichen eingetragen. WordPress erzeugt daraus automatisch eine ID im HTML-Code. Der Link zum Abschnitt verwendet anschließend das Rautezeichen.
Ein typisches Beispiel: Eine H2-Überschrift lautet „Kosten im Überblick“. Im erweiterten Blockbereich wird als HTML-Anker kosten eingetragen. Der passende Link innerhalb derselben Seite lautet dann #kosten. Wird von einer anderen Seite auf diesen Abschnitt verwiesen, lautet die vollständige Adresse beispielsweise https://www.beispiel.de/ratgeber/#kosten.
Bei WordPress ist besonders wichtig, keine Leerzeichen im Anker zu verwenden. Statt kosten im überblick sollte besser kosten-im-ueberblick genutzt werden. Umlaute können technisch funktionieren, sind aber aus praktischen Gründen weniger ideal. Stabiler sind Schreibweisen wie ue, ae und oe. Dadurch entstehen lesbare, robuste und leicht teilbare URLs.
Auch Plugins für Inhaltsverzeichnisse arbeiten mit solchen Ankern. Sie erzeugen oft automatisch IDs aus Überschriften. Das ist bequem, kann aber bei späteren Überschriftenänderungen problematisch werden. Wenn eine Überschrift umbenannt wird, kann sich auch der automatische Anker ändern. Deshalb sind manuell gesetzte, stabile Anker für wichtige Abschnitte oft die bessere Lösung.
Einen Anker mit vollständiger URL verwenden
Ein Anker kann entweder als kurzer interner Link oder als vollständige URL verwendet werden. Der kurze Link funktioniert innerhalb derselben Seite. Beispiel: #faq. Die vollständige URL funktioniert auch von anderen Seiten, E-Mails, Social-Media-Beiträgen oder externen Websites aus. Beispiel: https://www.beispiel.de/ratgeber/#faq.
Diese Unterscheidung ist wichtig. Ein Link im Inhaltsverzeichnis einer Seite braucht meist nur die Kurzform. Ein Link aus einem anderen Artikel benötigt die vollständige URL, wenn er direkt zu einem bestimmten Abschnitt führen soll. Wird nur #faq auf einer anderen Seite eingefügt, versucht der Browser, auf der aktuellen Seite zum Element faq zu springen. Existiert dort keine passende ID, passiert nichts oder der Link führt nicht zum gewünschten Ziel.
Bei URLs mit Parametern steht der Anker ganz am Ende. Beispiel:
https://www.beispiel.de/ratgeber/?quelle=newsletter#faq
Die Reihenfolge ist entscheidend: Zuerst kommt die normale URL, dann mögliche Parameter mit Fragezeichen, danach das Fragment mit Rautezeichen. Falsch wäre:
https://www.beispiel.de/ratgeber/#faq?quelle=newsletter
In diesem Fall würde der Parameter nicht korrekt zur URL gehören, sondern Teil des Fragments werden. Besonders bei Tracking-Parametern, Kampagnenlinks oder Shopfiltern ist diese Reihenfolge wichtig.
Gute Namen für URL-Anker wählen
Ein guter Ankername ist kurz, verständlich und dauerhaft. Er sollte den Zielabschnitt beschreiben, ohne zu lang oder kompliziert zu sein. Gute Beispiele sind #faq, #preise, #kontakt, #vorteile, #anleitung, #technische-pruefung oder #vergleich. Weniger geeignet sind lange, unklare oder automatisch erzeugte IDs wie #section-4872, #block-abc123 oder #neuer-abschnitt-2.
Stabile Ankernamen sind besonders wichtig, wenn Links langfristig genutzt werden. Wird ein Anker später geändert, funktionieren alte Links nicht mehr richtig. Das kann interne Links, externe Verweise, Newsletter-Links und gespeicherte Browser-Lesezeichen betreffen. Deshalb sollten wichtige Sprungmarken nicht ständig umbenannt werden.
Für SEO und Nutzerführung sind sprechende Ankernamen sinnvoll. Sie machen die URL verständlicher und erleichtern die Pflege. Eine Adresse wie https://www.beispiel.de/ratgeber/#kosten wirkt klarer als https://www.beispiel.de/ratgeber/#abschnitt-7. Der sichtbare Linktext bleibt dennoch wichtiger als der technische Ankername. Der Ankername dient vor allem der Navigation.
Empfehlenswert sind Kleinbuchstaben, Bindestriche statt Leerzeichen und der Verzicht auf Sonderzeichen. Dadurch bleiben URLs sauber und weniger fehleranfällig. Bei deutschen Begriffen ist eine einfache Umschreibung oft sinnvoll: #loesung statt #lösung, #haeufige-fragen statt #häufige-fragen.
Typische Fehler bei URL-Ankern
Ein häufiger Fehler besteht darin, das Rautezeichen an der falschen Stelle zu verwenden. Im Link gehört die Raute dazu, im ID-Attribut nicht. Richtig ist id="faq" und href="#faq". Falsch ist id="#faq". Dieser kleine Unterschied entscheidet darüber, ob der Sprunglink funktioniert.
Ein weiterer Fehler sind doppelte IDs. Jede ID sollte auf einer Seite nur einmal vorkommen. Wenn mehrere Elemente dieselbe ID besitzen, kann der Browser nicht zuverlässig zum richtigen Abschnitt springen. Besonders bei kopierten Blöcken in WordPress oder Page Buildern entstehen solche Dopplungen schnell.
Auch Leerzeichen, Sonderzeichen und wechselnde Groß-/Kleinschreibung können Probleme verursachen. Anker sollten möglichst einfach geschrieben werden. Statt #FAQ Bereich ist #faq-bereich deutlich besser. Einheitliche Schreibweise verhindert Fehler bei internen Links und extern geteilten URLs.
Ein weiteres Problem entsteht durch fixe Header. Viele Websites haben eine sticky Navigation am oberen Rand. Beim Sprung zu einem Anker kann die Überschrift dann hinter dem Header verschwinden. Dieses Problem lässt sich mit CSS lösen, etwa durch scroll-margin-top. Dadurch bleibt oberhalb des Zielabschnitts genügend Abstand.
SEO-Bedeutung von URL-Ankern
URL-Anker verbessern vor allem Struktur, Nutzerführung und interne Verlinkung. Sie ermöglichen es, lange Inhalte präzise zu erschließen. Besonders bei umfangreichen Ratgebern kann ein Inhaltsverzeichnis mit Sprungmarken die Nutzbarkeit deutlich verbessern. Der Inhalt wirkt weniger unübersichtlich, weil einzelne Abschnitte direkt erreichbar sind.
Für Suchmaschinen sind crawlbare Links und verständliche Linktexte wichtig. Google empfiehlt, Links so umzusetzen, dass sie technisch auffindbar sind, und den Linktext aussagekräftig zu formulieren. URL-Anker ersetzen keine vollständige Seitenstruktur, können aber die Navigation innerhalb einer Seite verbessern.
Wichtig ist, Anker nicht künstlich mit Keywords zu überladen. Ein Anker wie #beste-guenstige-seo-agentur-backlinks-kaufen wirkt unnatürlich und ist unnötig lang. Besser sind sachliche, kurze Anker wie #leistungen, #analyse, #kosten oder #faq. Der sichtbare Linktext kann den Abschnitt verständlich beschreiben, ohne überoptimiert zu wirken.
Aus SEO-Sicht sind Anker besonders nützlich, wenn sie in einem klaren Inhaltsverzeichnis, in FAQ-Bereichen oder in internen Verweisen zwischen Abschnitten eingesetzt werden. Sie unterstützen nicht automatisch Rankings, können aber die Nutzererfahrung verbessern. Eine bessere Nutzerführung kann indirekt dazu beitragen, dass Inhalte verständlicher, zugänglicher und verlinkungswürdiger werden.
Praxisbeispiele für URL-Anker
Ein klassisches Beispiel ist ein Inhaltsverzeichnis am Anfang eines langen Ratgebers. Dort werden mehrere Abschnitte verlinkt:
<a href="#grundlagen">Grundlagen</a><a href="#anleitung">Anleitung</a><a href="#fehler">Typische Fehler</a><a href="#faq">FAQ</a>
Die passenden Überschriften lauten dann:
<h2 id="grundlagen">Grundlagen</h2><h2 id="anleitung">Anleitung</h2><h2 id="fehler">Typische Fehler</h2><h2 id="faq">FAQ</h2>
Ein weiteres Beispiel ist ein Kontaktlink auf einer Landingpage. Statt nur auf die Seite zu verweisen, kann direkt zum Formular gesprungen werden:
https://www.beispiel.de/beratung/#kontaktformular
Für FAQ-Seiten ist diese Technik besonders nützlich. Einzelne Fragen können direkt geteilt werden. Beispiel:
https://www.beispiel.de/hilfe/#rechnung-aendern
Auch Produktseiten profitieren davon. Ein Link kann direkt zu technischen Daten, Bewertungen, Lieferinformationen oder Zubehör führen:
https://www.beispiel.de/produkt/#technische-daten
Solche Links sparen Zeit, verbessern Orientierung und machen Inhalte gezielter nutzbar.
Fazit zu URL-Ankern
Ein Anker wird in eine URL eingefügt, indem ein Abschnitt auf der Seite eine eindeutige ID erhält und die URL anschließend mit #id-name auf diesen Abschnitt verweist. Die technische Umsetzung ist einfach, erfordert aber saubere Benennung und korrekte Schreibweise. Richtig umgesetzt, verbessern URL-Anker die Navigation, die interne Verlinkung und die Nutzerfreundlichkeit langer Inhalte.
Besonders wichtig ist die Unterscheidung zwischen URL-Anker und Ankertext. Der URL-Anker ist die technische Sprungmarke. Der Ankertext ist der sichtbare Linktext. Beide sollten sauber umgesetzt werden: Der Anker muss funktionieren, der Linktext muss verständlich beschreiben, wohin der Link führt.
Für professionelle Websites sind URL-Anker ein kleines, aber sehr wirkungsvolles Strukturwerkzeug. Sie machen lange Seiten übersichtlicher, erleichtern direkte Verlinkungen und helfen dabei, relevante Abschnitte schneller erreichbar zu machen. Entscheidend sind kurze, stabile, eindeutige und beschreibende Ankernamen.
FAQ
Wie fügt man einen Anker in eine URL ein?
Ein Anker wird am Ende einer URL mit einem Rautezeichen eingefügt. Beispiel: https://www.beispiel.de/ratgeber/#faq. Damit dieser Link funktioniert, muss auf der Zielseite ein Element mit der passenden ID vorhanden sein, zum Beispiel <h2 id="faq">FAQ</h2>.
Ohne passende ID kann der Browser nicht zum gewünschten Abschnitt springen. Deshalb besteht ein funktionierender URL-Anker immer aus zwei Teilen: dem Ziel auf der Seite und dem Link mit Rautezeichen.
Was ist der Unterschied zwischen id und #?
Das id-Attribut steht im HTML-Code am Zielabschnitt. Es wird ohne Rautezeichen geschrieben, zum Beispiel id="kontakt". Das Rautezeichen wird nur im Link verwendet, also href="#kontakt" oder in der vollständigen URL https://www.beispiel.de/#kontakt.
Dieser Unterschied ist wichtig. Wird das Rautezeichen versehentlich in die ID geschrieben, funktioniert der Link meist nicht korrekt.
Funktionieren Anker auch in WordPress?
Ja, WordPress unterstützt HTML-Anker. Im Block-Editor kann vielen Blöcken unter den erweiterten Einstellungen ein HTML-Anker zugewiesen werden. Der Anker wird ohne Raute eingetragen. Danach kann mit #ankername auf diesen Abschnitt verlinkt werden.
Bei wichtigen Abschnitten sind manuell vergebene Anker sinnvoll, weil automatisch erzeugte Anker sich ändern können, wenn Überschriften angepasst werden.
Können URL-Anker für SEO hilfreich sein?
URL-Anker können SEO indirekt unterstützen, weil sie lange Inhalte besser strukturieren und die Nutzerführung verbessern. Sie helfen dabei, bestimmte Abschnitte direkt erreichbar zu machen. Besonders bei Ratgebern, FAQ-Seiten und Inhaltsverzeichnissen ist das sinnvoll.
Wichtig bleibt ein beschreibender Linktext. Ein technisch funktionierender Anker allein reicht nicht aus. Der sichtbare Link sollte verständlich zeigen, welcher Abschnitt geöffnet wird.
Warum springt der Ankerlink nicht zur richtigen Stelle?
Häufige Ursachen sind eine fehlende oder falsch geschriebene ID, doppelte IDs, Sonderzeichen, Leerzeichen oder ein fester Header, der den Zielbereich verdeckt. Auch JavaScript, verzögert ladende Inhalte oder Page-Builder-Strukturen können Sprungmarken beeinflussen.
Die Lösung besteht darin, die ID zu prüfen, eindeutige Ankernamen zu verwenden und bei verdeckten Überschriften CSS-Abstände wie scroll-margin-top einzusetzen.
Darf ein Anker Leerzeichen enthalten?
Leerzeichen sollten vermieden werden. Technisch können bestimmte Zeichen kodiert werden, in der Praxis entstehen dadurch jedoch häufiger Fehler. Besser sind kurze Ankernamen mit Kleinbuchstaben und Bindestrichen, zum Beispiel #haeufige-fragen statt #häufige Fragen.
Diese Schreibweise ist stabiler, leichter zu teilen und besser zu pflegen.
Wo steht der Anker bei URLs mit Parametern?
Der Anker steht immer am Ende der URL. Wenn eine URL Parameter enthält, kommen zuerst die Parameter und danach das Fragment. Richtig ist: https://www.beispiel.de/seite/?quelle=newsletter#faq.
Falsch wäre: https://www.beispiel.de/seite/#faq?quelle=newsletter, weil der Parameter dann nicht korrekt als URL-Parameter verarbeitet wird.