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

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.

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.

A better user experience starts with a better website host. Try Kinsta for Free.

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“.

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.

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