Was sind Ankerlinks und wie werden sie in Squarespace erstellt?
Besonders in den beliebten One-Page-Websites und umfangreichen Landingpages spielen Ankerlinks für eine intuitive Navigation eine zentrale Rolle. Ankerlinks oder auch Jump-Links ermöglichen es Besuchern, direkt zu relevanten Abschnitten zu springen, ohne ewiges Scrollen und extra Klicks. Speziell auf Squarespace lassen sich Ankerlinks mittlerweile ohne großartige Codierung realisieren und bieten damit Designer ein effizientes Mittel, die Nutzerfreundlichkeit zu optimieren und die Konversionsraten zu steigern.
Warum Ankerlinks nutzen?
Effizienz & Nutzerzufriedenheit: Besucher finden gezielt Informationen, anstatt sich durch lange Seiten zu kämpfen, was Absprungraten reduziert und die Verweildauer erhöht.
Klar strukturierte Inhalte: Ein Inhaltsverzeichnis oder eine übersichtliche Sektionen-Navigation steigert den Eindruck von Professionalität und macht komplexe Inhalte leichter konsumierbar.
SEO-Potenzial: Suchmaschinen-Crawler erkennen interne Verlinkungen zu Seitenabschnitten, was zusätzliche Ranking-Chancen für relevante Keywords bietet und die Sichtbarkeit erhöht.
Barrierefreiheit: Gut implementierte Ankerlinks ermöglichen dem Besucher mit Screenreadern oder Tastaturnavigation schnellere Orientierung, wenn die Links korrekt beschriftet sind und auf sinnvolle IDs verweisen.
Voraussetzungen auf Squarespace
Squarespace 7.1 (und neuere Versionen) unterstützt nativ das Anlegen von Ankerlink-Slugs in der Sektionseinstellung, sodass keine Code-Blöcke nötig sind. Voraussetzung ist ein aktives Template, das Sections (Abschnitte) verwendet und die Bearbeitung von Section-Eigenschaften erlaubt. Für ältere Versionen oder spezielle Anpassungen kann ergänzender Custom CSS- oder Code-Block-Einsatz sinnvoll sein, doch im Kern bietet Squarespace inzwischen eine Low-Code-Lösung direkt im Editor.
Schritt-für-Schritt-Anleitung ohne Code
Abschnitt auswählen und bearbeiten
Im Seiten-Editor wähle die Ziel-Landingpage oder One-Page-Section aus und klicke auf Bearbeiten.
Fahre mit der Maus über den gewünschten Abschnitt und öffne die Section-Einstellungen.
Anchor Link-Slug festlegen
Im Einstellungsfenster findest du das Feld Ankerlink. Dort gibst du eine prägnante, keyword-orientierte Kennung ein, z. B. #leistungen
Verwende kurze, semantisch sinnvolle Slugs, die den Abschnitt treffend beschreiben und zugleich für SEO relevant sind.
Link kopieren
Über das Icon Link kopieren kopierst du die vollständige URL mit Anchor-Slug in die Zwischenablage. Diese URL enthält deine Hauptdomain plus das #slug-Fragment.
Navigations- oder Inhaltsverzeichnis-Element erstellen
Hauptnavigation: In der Seitenverwaltung unter Pages kannst du im Hauptmenü einen Link (Nicht-Pages-Eintrag) hinzufügen und als URL genau die kopierte Anker-URL einfügen. Damit springt der Menüpunkt direkt zum Zielabschnitt.
Inhaltsverzeichnis: Innerhalb eines Text- oder Button-Blocks markiere Text, klicke auf das Link-Icon und füge als Link die relative URL mit dem #slug-Fragment ein (z. B. /seitenname#slug). Dieser Link führt zur entsprechenden Sektion auf derselben Seite.
Smooth Scrolling prüfen
Nach dem Speichern und Veröffentlichen teste die Ankerlinks im Live-Modus. Standardmäßig scrollt Squarespace sanft zur Zielposition. Achte auf Performance und ladezeitenoptimierte Bilder, um Ruckeln zu vermeiden.
Fallback und Cross-Page-Links
Cross-Page-Nutzung: Möchtest du von einer anderen Seite verlinken, stelle sicher, dass du die vollständige URL plus #slug nutzt (z. B. https://domain.de/seitenname#leistungen). Beim Klick aus anderen Seiten springt es korrekt zum Anker.
Alternative für ältere Templates: Sollte dein Template das native Anker-Slug-Feld nicht unterstützen, kannst du in der betreffenden Position einen Code-Block mit <div id=”slug”></div>
Beispiele für Ankerlinks auf Squarespace
One-Page-Portfolios und Landingpages: Gliedere lange Seiten in klar benannte Sektionen (z. B. Über mich, Leistungen, Projekte, Testimonials, Kontakt) und ermögliche deinenBesuchern direkte Sprünge zu ihrem Interessensbereich.
Inhaltsverzeichnis in Blogposts: Bei ausführlichen Artikeln oder Tutorials kannst du am Anfang ein Inhaltsverzeichnis mit Anker-Links zu den jeweiligen Überschriften einfügen, um Lesende zielgerichtet navigieren zu lassen und die Übersicht zu wahren.
Produkt- oder Dienstleistungsseiten: Verteile mehrere CTAs auf der Seite (z. B. Angebotsanforderung, Demo, Newsletter), die alle zum jeweiligen Formularbereich springen, wodurch Conversions erleichtert werden.
FAQ-Sektionen: Verlinke in einer kompakten Übersicht jede Frage direkt zur ausführlichen Antwort weiter unten auf derselben Seite – Besucher finden schnell die passende Info und bleiben länger engagiert.
Scrollbasierte Storytelling-Seiten: Erzähle Geschichten oder Case Studies in sequenzieller Abfolge und ermögliche per Navigation gezielte Rück- und Vorwärts-Sprünge zu bestimmten Kapiteln.
Ankerlinks als Inhaltsverzeichnis für komplexere Seiten
Ankerlinks als Navigation für One-Pager
UX-Tipps und Best Practices
Klare Beschriftung: Wähle Linktexte und Slugs so, dass sie den Abschnitt eindeutig beschreiben. Unklare oder generische Begriffe wie „Hier klicken“ vermeiden, stattdessen „#Leistungen“, „#Kontakt“.
Visuelle Orientierung: Hebe aktive Navigationspunkte beim Scrollen hervor (z. B. mit leichtem Farbwechsel oder Underline), damit Nutzer immer wissen, wo sie sich befinden. Custom CSS kann hier hilfreich sein, sofern Squarespace das Template unterstützt.
Smooth Scrolling und Fokus: Achte darauf, dass nach dem Sprung der Fokus visuell deutlich wird (z. B. durch Überschrift größer oder durch leichte Animation), damit insbesondere Screenreader-Nutzer und Tastaturnutzer erkennen, dass sie im neuen Abschnitt angekommen sind.
Mobile Optimierung: Teste Ankerlinks auf mobilen Endgeräten; manchmal verschiebt eine feste Kopfzeile den Zielpunkt unter den Viewport. Gegebenenfalls kannst du zusätzlichen Padding-Top in der Zielsektion einfügen oder per CSS anpassen, damit der angezeigte Inhalt nicht abgeschnitten wird.
Performance beachten: Bei langen Seiten mit vielen Bildern und Sektionen sollte die Seite optimiert sein (Lazy Loading, komprimierte Assets), damit das Scrollen nicht ruckelt, wenn Ankerlinks genutzt werden.
SEO-Optimierung: In Linktexten Keywords verwenden, die zum Inhalt der Zielsektion passen. Gleichzeitig darauf achten, dass man nicht zu viele interne Sprünge auf einer Seite setzt, damit die Übersichtlichkeit erhalten bleibt und Suchmaschinen die Seite sinnvoll crawlen.
Analytik & A/B-Tests: Prüfe Klicks auf Ankerlinks (z. B. über Event-Tracking in Google Analytics) und evaluiere, welche Sprünge am häufigsten genutzt werden. Experimentiere mit alternativen Platzierungen oder Linktexten, um Nutzerflüsse zu optimieren.
Fazit
Ankerlinks sind ein kraftvolles Mittel, um die Navigation auf umfangreichen Squarespace-Seiten ohne aufwändige Codierung zu verbessern. Durch die einfache Unterstützung von Anker-Slugs in aktuellen Squarespace-Versionen lassen sie sich schnell und wartungsarm einsetzen. Die unmittelbaren Vorteile für UX, Engagement und SEO machen Ankerlinks zu einem unverzichtbaren Tool für moderne Webseiten. Indem man klare Slugs vergibt, visuelle Feedback-Mechanismen bereitstellt und mobile Besonderheiten berücksichtigt, lässt sich eine nahtlose, effiziente Nutzererfahrung schaffen.
