Ankerlinks sind kein Thema, das viel diskutiert wird, aber wir haben ausgezeichnete Ergebnisse mit ihnen erzielt! Heute werden wir uns damit befassen, wie man Ankerlinks in WordPress erstellt und warum du sie vielleicht verwenden möchtest. Aus unserer Erfahrung heraus können Ankerlinks dazu beitragen, die Benutzerfreundlichkeit zu verbessern, die Navigation durch lang gestreckte Inhalte zu erleichtern und dir sogar einen kleinen Vorteil in Google zu verschaffen. Wer will keinen kostenlosen Vorteil in Google? 😉

Beispiel für einen Ankerlink

Wenn du immer noch ein wenig verwirrt bist, was Ankerlinks sind, mache dir keine Sorgen. Siehe das Beispielbild unten. Wir verwenden Ankerlinks für jedes dieser aufzählenden Listenelemente. Wenn du auf sie klickst, kommst du direkt zum H2-Header, der diesen Inhalt enthält. Diese kannst du dir weiter unten im Beitrag selbst ansehen. Ankerlinks können für alles verwendet werden, wie z.B. Text, Bilder und H1-H6-Header.

Anker Links

Anker Links

Auf vielen Seiten werden Ankerlinks lediglich verwendet, um ein Inhaltsverzeichnis am Anfang von langen Beiträgen zu erstellen. Wenn du ein wenig CSS kennst, kannst du kreativ werden und sie ein wenig stilvoller aussehen lassen, wie wir es auf unseren Zielseiten getan haben.

Ankerlinks auf einem Langartikel

Ankerlinks auf einem Langartikel

Auf anderen Seiten sieht man den Ankerlink vielleicht nicht, stattdessen werden sie in Überschriften verwendet, damit sie Links direkt zu den einzelnen Abschnitten teilen können.

Vor- und Nachteile von Ankerlinks

Nur weil wir etwas tun, bedeutet das nicht immer, dass du es solltest. Hier sind ein paar Vor- und Nachteile, die bei der Verwendung von Ankerlinks auf deiner WordPress-Seite zu beachten sind.

Vorteile

  • Einer der größten Vorteile von Ankerlinks ist die Schaffung eines besseren Benutzererlebnisses beim Durchsuchen deiner Website. Dies gilt insbesondere für Langformatartikel. Wir veröffentlichen viele detaillierte Inhalte (mehr als 4.000 Wörter) und das Scrollen kann zu einem Problem werden. Die Verwendung von Ankerlinks ermöglicht es dem Benutzer, sofort zu dem Abschnitt zu springen, der ihn interessiert. Lasse deine Benutzer schneller finden, was sie brauchen.
  • Mit der Verwendung von Ankerlinks in Kopfzeilen kann man Direktlinks zu verschiedenen Abschnitten innerhalb eines Artikels teilen. Das ist fantastisch für Social Media und sogar für Support-Teams. Beispielsweise ist unser Support-Team bei Kinsta stark auf Ankerlinks in unseren Knowledge Base-Artikeln angewiesen, so dass wir den Benutzer genau zu dem Schritt zur Fehlerbehebung schicken können, dem er folgen muss. Unser Vertriebsteam nutzt diese auch, um Kinsta-bezogene Fragen schneller zu beantworten.
  • Wenn es um Suchmaschinen-Ergebnisseiten (SERPs) geht, können die Ergebnisse immer variieren, je nachdem, was angezeigt wird. Wir haben jedoch immer wieder gesehen, dass die Ankerlinks (Sprungmenüs) auf unserer SERP-Liste erscheinen, weil wir sie in unseren Artikeln verwendet haben. Diese sind fantastisch, weil sie dir im Wesentlichen eine weitere Zeile Text für deine organische Auflistung geben. Sie können auch helfen, die CTR zu erhöhen, da der Benutzer möglicherweise etwas im Zusammenhang mit seiner Anfrage sieht, das du nicht in der Metabeschreibung oder im Titel angegeben hast.

    Ankerlinks in Google-Beispiel

    Ankerlinks in Google-Beispiel

  • • Ankerlinks können auch für andere Dinge verwendet werden, wie z.B. den „Return to Top“-Link, den Wikipedia zusammen mit seinen Zitaten ^ oder Fußnoten verwendet. [1]

Nachteile

Während wir denken, dass die Vorteile definitiv die Nachteile überwiegen, hier sind ein paar Rückschläge, die du vielleicht in Betracht ziehen solltest.

  • Ankerlinks oder ein Inhaltsverzeichnis können die durchschnittliche Verweildauer auf der Website pro Besucher verringern. Warum? Weil sie direkt zum gewünschten Inhalt springen, anstatt deinen gesamten Artikel zu lesen. Wenn du jedoch deinen Besucher sofort glücklich machst, könnte dies dazu führen, dass er sich für deinen Newsletter anmeldet oder mehr darüber recherchiert, was du verkaufst. Das könnte also als Vor- oder Nachteil angesehen werden.
  • Direkt mit dem obigen Thema verbunden, können Ankerlinks möglicherweise deine Werbeeinnahmen beeinflussen. Besucher, die direkt zu einem bestimmten Abschnitt springen, können Eindrücke und Klicks verringern. Sites, die stark auf Werbung angewiesen sind, können mit Ankerlinks und Inhaltsverzeichnis einen A/B-Test durchführen wollen.
  • Wenn du Domänen wechselst oder 301 Redirects hinzufügen musst, ist es wichtig zu beachten, dass die Fragment-Kennung (#) nie an den Server gesendet wird. Das kann die Dinge verkomplizieren, wenn du mit der Zeit mit deinen Ankerverbindungen Änderungen vornimmst. Es gibt Möglichkeiten, dies mit JavaScript zu umgehen, aber das ist keineswegs eine einfache Aufgabe.

Ankerlink-Übergang

Du solltest auch darüber nachdenken, den Ankerlinkübergang zu ändern. Standardmäßig springen Ankerlinks plötzlich zur ID weiter unten auf der Seite. Das kann für einige Leute ruckartig wirken. Du kannst dies ändern, so dass der Übergang fließend verläuft. So machen wir es auch auf dem Kinsta-Blog. Du kannst ein kostenloses Plugin wie Page scroll to id verwenden oder CSS zu deiner Seite hinzufügen, wie z.B. scroll-behavior: smooth;. Dieser Stack Overflow Beitrag hat einige zusätzliche Tipps für Entwickler.

Wie bei den meisten WordPress-Tipps gibt es ein paar verschiedene Möglichkeiten, wie du Ankerlinks in WordPress hinzufügen kannst. Schaue dir diese vier verschiedenen einfachen Methoden an. Und ja, diese Links direkt darunter verwenden Anker-Text. 😁

Der erste Weg, Ankerlinks in WordPress zu erstellen, ist, es sie einfach manuell mit HTML in jedem deiner Beiträge zu erstellen. Lass uns einen erstellen, damit du sehen kannst, wie sie funktionieren.

Schritt 1

Erstelle den Text für deinen Link und füge einen Hyperlink hinzu, wie du es normalerweise für jeden anderen Link tun würdest.

Erstellen eines Ankerlinks mit HTML

Erstellen eines Ankerlinks mit HTML

Schritt 2

Anstatt es mit einer URL, einem Beitrag oder einer Seite zu verlinken, weist du ihm einen Ankernamen zu. URIs, die Anker bezeichnen, enthalten ein „#“-Zeichen gefolgt vom Ankernamen. Du kannst diese benennen, wie du willst, obwohl wir normalerweise empfehlen, sie kurz zu halten und dich auf den tatsächlichen Namen der Überschrift zu beziehen.

Wenn du dir die Textansicht (HTML) ansiehst, sieht es so aus:

How to Manually Create Anchor Links in WordPress

Hier ist ein Beispiel für alle Ankerlinks, die wir in diesem Beitrag verwenden:

<ul>
<li><a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a></li>
<li><a href="#anchor-links-wordpress-plugin">How to Create Anchor Links in WordPress with a Plugin</a></li>
<li><a href="#anchor-links-wordpress-gutenberg">How to Create Anchor Links in WordPress with Gutenberg</a></li>
</ul>

Schritt 3

Als nächstes musst du eine ID in der Kopfzeile hinzufügen, zu der dein Ankerlink springen soll. Dazu musst du im WordPress-Editor in die Textansicht (HTML) wechseln. Füge auf dem Header, in diesem Fall einem H2-Header, die ID zusammen mit dem Ankernamen hinzu, den du in Schritt 2 gewählt hast. Der Ankername und das ID-Attribut müssen exakt gleich sein, damit der Link funktioniert.

<h2 id="manually-create-anchor-links-wordpress">How to Manually Create Anchors Link in WordPress</h2>

Du willst dich nicht jedes Mal mit HTML-Code beschäftigen? Keine Sorge, es gibt einige fantastische kostenlose WordPress-Plugins, die du verwenden kannst, um einfach Ankerlinks und sogar ein Inhaltsverzeichnis zu jedem Beitrag hinzuzufügen.

Ankerlink mit einem Plugin hinzufügen

Eine der einfachsten Möglichkeiten, einen Ankerlink hinzuzufügen, ist das kostenlose TinyMCE Advanced Plugin. Dieses Plugin erweitert den Editor im Wesentlichen um zusätzliche Funktionen mit Schnellzugriffstasten. Zum Zeitpunkt des Schreibens dieses Artikels hat das Plugin über 2 Millionen aktive Installationen mit einer Bewertung von 4,5 von 5 Sternen.

TinyMCE Advanced WordPress Plugin

TinyMCE Advanced WordPress Plugin

Schritt 1

Nachdem du das Plugin installiert und aktiviert hast, gehe in deinen Beitrag und erstelle einen Hyperlink auf deinen Ankertext. Anstatt es mit einer URL, einem Beitrag oder einer Seite zu verlinken, weise ihm einen Ankernamen mit einem # vorangestellt zu.

Ankernamen hinzufügen

Ankernamen hinzufügen

Schritt 2

Markiere die Überschrift, mit der du ihn verknüpfen möchtest. Klicke dann auf „Einfügen“ in der oberen Schaltfläche und wähle „Anker“. Dieser Button erscheint im Editor wegen des TinyMCE Advanced Plugins.

Add anchor

Add anchor

Schritt 3

Gib den Ankernamen ein, den du in Schritt 1 angegeben hast, und klicke auf „OK“. Dieses Plugin spart dir Zeit, da du die Ansicht des visuellen Editors nie verlassen musst. Wenn du es manuell mit HTML machst, musst du zwischen den Ansichten des visuellen Editors und des Texteditors (HTML) wechseln.

Anker-ID

Anker-ID

Inhaltsverzeichnis mit einem Plugin hinzufügen

Möglicherweise willst du den Prozess noch mehr beschleunigen. Wenn du viele tiefgründige Inhalte schreiben und immer ein Inhaltsverzeichnis (Ankerlinklisten/Sprung-Menü) in deine Beiträge aufnehmen möchtest, dann solltest du ein Inhaltsverzeichnis-Plugin nutzen.

Eines der besten kostenlosen Plugins ist Easy Table of Contents. Dieses Plugin generiert automatisch Ankerlinks für deine Header und ermöglicht es dir, dein Inhaltsverzeichnis mit einem einfachen Shortcode an beliebiger Stelle in deinen Beitrag einzufügen. Zum Zeitpunkt des Schreibens dieses Artikels hat das Plugin über 30.000 aktive Installationen mit einer Bewertung von 4,5 von 5 Sternen.

Easy Table of Contents WordPress Plugin

Easy Table of Contents WordPress Plugin

Schritt 1

Nachdem du das Plugin installiert und aktiviert hast, gibt es einige Einstellungen, die du wahrscheinlich ändern möchtest. Diese findest du unter „Einstellungen → Inhaltsverzeichnis“.

  • Mit der Option „Support aktivieren“ kannst du wählen, für welche Posttypen du das Inhaltsverzeichnis verwenden möchtest. Höchstwahrscheinlich ist dies dein „Posts“-Typ.
  • Du kannst dann wählen, ob du ein Inhaltsverzeichnis automatisch einfügen möchtest oder nicht oder ob du es manuell einfügen möchtest. Wir würden wahrscheinlich empfehlen, es manuell zu erstellen, wenn sich deine Beiträge ein wenig ändern.
  • Mit der Option „Show when“ kannst du festlegen, wie viele Überschriften der Beitrag haben soll, bevor ein Inhaltsverzeichnis erscheint. Zum Beispiel möchtest du wahrscheinlich nicht, dass ein Inhaltsverzeichnis in einem kurzen Blogbeitrag angezeigt wird, also ist es wahrscheinlich am besten, mindestens vier oder mehr Überschriften einzustellen.
Easy Table of Contents Einstellungen

Easy Table of Contents Einstellungen

Schritt 2

Um das Inhaltsverzeichnis manuell einzufügen, füge einfach den Shortcode [ez-toc] ein, an der Stelle, an der es im Beitrag erscheinen soll.

EZ-TOC shortcode

EZ-TOC Shortcode

Das Inhaltsverzeichnis wird dann automatisch für alle Überschriften des Beitrags generiert. Wie fantastisch ist das?

WordPress Inhaltsverzeichnis

WordPress Inhaltsverzeichnis

Du kannst auch weitere Änderungen in den Einstellungen vornehmen, was angezeigt werden soll, Ausschlüsse, Aussehen, etc. Zum Beispiel hast du vielleicht immer eine „Zusammenfassung“-Überschrift am Ende deiner Beiträge. Du kannst diese Überschrift in die Liste der Ausschlüsse in den Einstellungen eingeben, so dass sie nicht im Inhaltsverzeichnis enthalten ist.

Haben Sie mit Ausfallzeiten und WordPress-Problemen zu kämpfen? Kinsta ist die Hosting-Lösung, die Ihnen Zeit spart! Sieh dir unsere Features an

Ein weiteres Inhaltsverzeichnis-Plugin, das du vielleicht ausprobieren möchtest, ist Shortcode Table of Contents. Dies ist ein neueres Plugin auf dem Markt, aber es wurde von James Kemp entwickelt, den wir interviewen durften.

Automatische Hinzufügung von Ankerlinks zu Überschriften mit einem Plugin

Möchtest du einfach automatisch Ankerlinks zu allen deinen Überschriften hinzufügen? Dann solltest du dir das kostenlose WP Anchor Header Plugin ansehen. Dadurch werden Ankerlinks zu allen deinen H1-H6-Headern hinzugefügt.

WP Anchor Header Plugin

WP Anchor Header Plugin

Dies ist ein sehr einfaches Plugin und es gibt keine Einstellungen. Installiere es einfach, aktiviere es und schon kann es losgehen. Jede Überschrift erhält automatisch einen Ankernamen (abgeleitet vom Namen der Überschrift), und sie erhalten sogar ein cooles kleines Ankersymbol, das angezeigt wird, wenn man mit der Maus über die Überschrift fährt. Dies ermöglicht es den Besuchern, leicht zu sehen, dass es dort einen Link gibt, den sie kopieren können, wenn sie wollen.

Automatische Ankerglieder an den Überschriften

Automatische Ankerglieder an den Überschriften

Der neue Gutenberg-Editor steht vor der Tür und wird voraussichtlich mit WordPress 5.0 geliefert. Damit wird die Unterstützung für das Hinzufügen von Anker-IDs zu Überschriften verbessert und integriert.

Schritt 1

Markiere die Kopfzeile im Gutenberg-Block und klicke auf „Erweitert“ auf der rechten Seite. Du siehst dann eine Option, um einen HTML-Anker hinzuzufügen.

HTML-Anker im Gutenberg-Editor hinzufügen

HTML-Anker im Gutenberg-Editor hinzufügen

Schritt 2

Wenn du darauf verlinken möchtest, erstelle einfach einen Hyperlink auf deinen Ankertext. Anstatt es mit einer URL, einem Beitrag oder einer Seite zu verlinken, weise ihm einen Ankernamen mit einem # vorangestellt zu.

Ankerlink in Gutenberg hinzufügen

Ankerlink in Gutenberg hinzufügen

Du willst keine Ankerlinks mit HTML erstellen oder ein Plugin installieren? Dann solltest du dir die kostenlose Anchor Links Chrome Erweiterung ansehen. Dies ist voll kompatibel mit selbst gehostetem WordPress, WordPress.com und Medium.

Schritt 1

Nachdem du die Chrome-Erweiterung installiert hast, markiere einfach die Überschrift, auf der du den Ankerlink hinzufügen möchtest. Klicke dann auf das kleine Anchor Link Chrome Erweiterungssymbol in der Symbolleiste deines Browsers.

Chromerweiterung Ankerlink hinzufügen

Chromerweiterung Ankerlink hinzufügen

Hinter den Kulissen erzeugt es die Anker-ID (abgeleitet aus dem Überschriftennamen). In diesem Beispiel: #Header_1. Wenn du auf das Symbol klickst, wird es automatisch in deine Zwischenablage kopiert.

Kopiert in die Zwischenablage

Kopiert in die Zwischenablage

Schritt 2

Gehe dann zu dem Text, dem du den Ankerlink hinzufügen möchtest, erstelle einen Hyperlink wie gewohnt und drücke „Einfügen“.

Ankerlink hinzufügen

Ankerlink hinzufügen

Und das ist es! Die Chrome-Erweiterung macht es schnell und einfach, ohne auf Plugins von Drittanbietern angewiesen zu sein.

Zusammenfassung

Wie du sehen kannst, gibt es viele kreative Möglichkeiten, Ankerlinks in WordPress hinzuzufügen. Einige sind einfacher als andere. Wenn du viele längere Inhalte veröffentlichst, hilft dies deinen Besuchern, sofort zu den gewünschten Inhalten zu gelangen. Wir haben auch gesehen, dass Ankerlinks helfen, „zu den Menüs zu springen“ auf SERPs, was die CTR auf de organischen Eintrag erhöhen hilft.

Verwendest du Ankerlinks schon auf deiner WordPress-Seite? Wenn ja, würden wir uns über deine Erfahrungen oder Gedanken freuen.


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an