Online-Links bilden die Grundlage für einfache Interaktivität im Internet, egal ob sie Nutzer/innen zu Webseiten, herunterladbaren Dokumenten oder anderen Anwendungen weiterleiten.

Das Tolle ist, dass du in vielen Anwendungen klickbare Links erstellen kannst, z. B. in Content-Management-Systemen, Website-Ersteller, Textverarbeitungsprogrammen und E-Mail-Clients.

In diesem Leitfaden erfährst du alles, was du wissen musst, um einen Link klickbar zu machen. Außerdem erklären wir dir die Grundlagen eines Links und die Terminologie, die dir beim Erstellen eines Links begegnen kann

Hyperlink-Grundlagen

Es gibt verschiedene Bezeichnungen für Inhalte wie Text oder Bilder, die anklickbar sind, d. h., du kannst den Mauszeiger auf den Inhalt setzen und von dort aus weiter navigieren.

Einige dieser Begriffe sind:

  • Link
  • Hyperlink
  • Anklickbarer Link

Technisch gesehen haben alle diese Begriffe ihre eigene Definition, aber heutzutage werden sie austauschbar verwendet.

Die Interaktion der Nutzerinnen und Nutzer mit Online-Inhalten beruht auf diesen Hyperlinks, bei denen die Nutzerinnen und Nutzer über einen Text, ein Bild oder eine Schaltfläche scrollen und darauf klicken können, um zu einem anderen Inhalt (z. B. einer externen Webseite) zu gelangen oder eine Aktion auszuführen (z. B. eine Telefonnummer von deinem Smartphone aus anzurufen).

Ein einfacher HTML-Code für einen Hyperlink sieht so aus:

<a href="https://example.com/">the hyperlink text</a>

Es wird jedoch komplexer, wenn man optionale Elemente wie Ziele und nofollow-Elemente einbezieht:

 <a href="https://example.com/" target="_blank" rel="noreferrer noopener">the hyperlink text</a>

Hier sind die Elemente, aus denen ein Hyperlink besteht:

  1. Der Inhalt
  2. Die URL oder der Permalink
  3. Das Ziel
  4. Nofollow, noreferrer, und noopener
Teile eines Hyperlinks hervorgehoben und beschriftet
Die Elemente eines Hyperlinks

Lies weiter, um mehr über jedes dieser Elemente und ihre Funktionsweise zu erfahren.

Der Inhalt

Du kannst anklickbare Links mit zwei Arten von Inhalten erstellen:

  1. Text
  2. Grafiken

Das bedeutet, dass du jede Textzeile oder jedes Bild in deinem Inhalt in einen klickbaren Link verwandeln kannst, solange die App, die du verwendest, Hyperlinks unterstützt.

Mit Hyperlinks versehener Text

Text ist eine der Inhaltsoptionen, wenn du klickbare Links erstellen willst.

Wenn du einen Editor wie WordPress verwendest, kannst du den gewünschten Text im Editor-Bildschirm markieren und dann auf die Schaltfläche Link klicken.

Hinzufügen eines Links in WordPress
Hinzufügen eines Links in WordPress

Dadurch wird ein Link auf dem Frontend angezeigt, normalerweise mit farbigem, unterstrichenem Text.

ein Link zum Anzeigen eines Menüs
Ein klickbarer Link auf dem Frontend

Ein Text-Hyperlink verändert sich manchmal, wenn ein Nutzer mit der Maus darüberfährt. Oft ändert sich die Farbe oder die Unterstreichung wird ausgeblendet, um anzuzeigen, dass es sich um einen klickbaren Link handelt.

Wenn du mit der Maus über einen Textlink fährst, zeigen dir die Browser normalerweise eine Vorschau der verlinkten URL an, damit du sehen kannst, wohin sie führt.

Eine Vorschau der Ziel-URL
Eine Vorschau der Ziel-URL

Hyperlink zu Bildern

In vielen Programmen – auch in WordPress – kannst du Hyperlinks mit Online-Medien wie Bildern erstellen.

Dazu wählst du im Backend ein Bild aus (anstelle von Text) und fügst die gewünschte URL über die Link-Funktion hinzu.

Sandwich-Bild auf einer Website, die verlinkt wird
Ein Bild verlinken

Nach der Veröffentlichung verwandelt sich der Standardpfeil in einen Handcursor, wenn du mit dem Mauszeiger über das Bild fährst, und die Besucher sehen im Browser eine Vorschau der verlinkten URL.

Pfeil, der auf die Vorschau-URL des Browsers auf einer Potbelly-Produktseite zeigt
Eine Vorschau der Ziel-URL

Egal, ob es sich um einen Bild- oder einen Textlink handelt, wenn du darauf klickst, wird eine Aktion ausgelöst, z. B. die Weiterleitung zu einer anderen URL.

eine Potbelly-Sandwich-Seite
Eine externe Zielseite

Wie die Kodierung aussieht

Der Text- oder Bildinhalt in einem Hyperlink wird im folgenden Beispiel durch den „Linktext“ dargestellt:

<a href="https://example.com/" target="_blank" rel="noreferrer noopener">The Link Text</a>

Wenn du lernst, wie man einen klickbaren Link erstellt, musst du diesen Text durch deinen eigenen Inhalt ersetzen.

Bei einem Textlink steht der klickbare Text direkt vor der schließenden Klammer </a>.

Linktext im Linkcode hervorgehoben
Der Linktext

Bildlinks sind etwas anders, da sie die URL des Bildes enthalten müssen (am besten, wenn es in die Mediendatenbank deiner Website hochgeladen wurde).

Diese Medien-URL steht zwischen den Anführungszeichen im Abschnitt img src=““.

Bild-URL hervorgehoben
Die URL der Bildquelle

Es gibt noch weitere Elemente, die du bei Bildlinks hinzufügen kannst, wie z. B:

  • Ein alt-Tag (alt=““): Text, der das Bild für Suchmaschinen-Crawler und sehbehinderte Nutzer beschreibt.
  • Eine Klasse (class=““): Ein kodierter Name für die Verwendung des Bildes an anderer Stelle in deinem Code oder in den Dateien deiner Website.

Die URL

Als Teil eines Hyperlinks dient die URL als Ziel oder Aktion, die stattfindet, wenn jemand auf den Link klickt.

Eine URL innerhalb eines klickbaren Links
Eine URL innerhalb eines klickbaren Links

Aber nicht alle URLs sind Webseiten-URLs. Du wirst feststellen, dass einige Hyperlinks eine „Click to Call“-Funktion haben, die es den Nutzern ermöglicht, mit einem Klick eine Telefonnummer direkt von ihrem Smartphone aus anzurufen.

eine Telefonnummer im URL-Feld
Ein Beispiel für eine Click-to-Call-Funktion

Eine andere Möglichkeit ist die Anzeige einer Karte, die die Karten-App auf dem Smartphone des Nutzers öffnet.

ein Kartenlink zu Google Maps, der in einem URL-Feld platziert wird
Ein Link, der zu einer Karten-App führt

So sieht die Codierung aus

URLs in klickbaren Links werden zwischen den Anführungszeichen im <a href=““ Teil des Hyperlinks platziert.

Der https://www.example.com Teil des folgenden Hyperlink-Codes ist zum Beispiel die URL:

<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">View the entire menu.</a> 
Die URL, die in einem Hyperlink-HTML-Code dargestellt wird
Die URL, die in einem Hyperlink-HTML-Code dargestellt wird

Einige URLs führen zu herunterladbaren Dokumenten, während andere eine besondere Kodierung erfordern. Bei einem „Click to call“-Link musst du zum Beispiel tel: und eine Telefonnummer in die href=““ Anführungszeichen setzen.

Link mit Telefonnummer darin
Beispiel für einen tel: click to call Link

Zielfenster

Das Zielfenster ist ein optionaler Teil eines Hyperlinks. Es gibt an, ob der Inhalt im selben Browser-Tab oder in einem neuen Browser-Tab geöffnet wird.

Bei WordPress und vielen anderen Apps kannst du ein Zielfenster hinzufügen, ohne den Code zu berühren, indem du den visuellen Editor verwendest.

Deaktiviere einfach das Kontrollkästchen „In einem neuen Tab öffnen“, wenn du möchtest, dass der Link in demselben Tab geöffnet wird, den der Nutzer gerade sieht.

Schalter "In neuem Tab öffnen" ausgeschaltet
Schalter „In neuem Tab öffnen“ ausgeschaltet

Alternativ kannst du den Schalter „In einem neuen Tab öffnen“ aktivieren, der automatisch ein _blank-Attribut zum Hyperlink-Code hinzufügt und die URL in einem neuen Tab öffnet, wenn du darauf klickst.

Schalter "In neuem Tab öffnen" aktiviert
Schalter „In neuem Tab öffnen“ aktiviert

So sieht die Codierung aus

Diese Optionen werden durch das Hinzufügen und Bearbeiten des target=““- Elements in einem Hyperlink ausgelöst.

Obwohl das target-Attribut mehrere Werte hat, wie z.B. _blank, _parent, _self und _top, verwenden wir normalerweise nur den Wert _blank.

Ein Hyperlink ohne das _blank-Ziel sieht wie folgt aus:

Kein _blank-Ziel innerhalb eines Links
Kein _blank-Ziel innerhalb eines Links

Du wirst feststellen, dass er sich nicht von einem normalen Hyperlink unterscheidet. Das liegt daran, dass Hyperlinks standardmäßig nicht in einem neuen Tab geöffnet werden. Du musst also nichts an dem Link ändern, es sei denn, du möchtest, dass er in einem eigenen Browser-Tab geöffnet wird.

Ein Hyperlink mit dem _blank-Ziel, das bewirkt, dass die URL in einem neuen Tab geöffnet wird, sieht etwa so aus:

<a href="https://www.example.com" target="_blank">View the entire menu.</a>
Anklickbarer Link mit einem _blank-Ziel
Anklickbarer Link mit einem _blank-Ziel

nofollow, noreferrer, und noopener

Du kannst auch zusätzliche Elemente zu einem klickbaren Link hinzufügen, von denen die meisten für mehr Sicherheit oder Cloaking vor Suchmaschinen sorgen:

  • nofollow: Ein Attribut, das verhindert, dass „SEO-Linksaft“ auf die verlinkte Website gelangt. Dadurch wird deine Website geschützt und der Link kann vor Suchmaschinen verborgen werden.
  • noopener: Dies ist ein HTML-Attribut, das automatisch zu WordPress-Links hinzugefügt wird, die als „In einem neuen Tab öffnen“ gekennzeichnet sind Es wird mit noreferrer gepaart, um bestimmte Sicherheitsprobleme beim Öffnen von Links in neuen Tabs zu minimieren.
  • noreferrer: Das noreferrer-Attribut, das oft mit noopener kombiniert wird, verhindert, dass alle Referral-Informationen an die Zielseite weitergeleitet werden, und sorgt so für zusätzliche Sicherheit.

Du kannst keines dieser Link-Attribute erkennen, indem du dir einen Link auf der Live-Site ansiehst. Stattdessen musst du den HTML-Code anzapfen.

So sieht der Code aus

Alle diese Linkattribute befinden sich zwischen den Anführungszeichen im rel=““ -Teil des klickbaren Links.

Es ist möglich, alle diese Attribute in einem Link zu verwenden.

Link mit noreferrer, noopener und nofollow in einem Link
Link mit noreferrer, noopener und nofollow in einem Link

Es gibt aber auch Links, die nur das Attribut noreferrer, noopener oder nofollow ohne die beiden anderen enthalten. Das hängt ganz davon ab, was der Linkersteller erreichen will.

Gründe, warum du einen Link klickbar machen willst

Wenn du lernst, wie du einen Link anklickbar machst, ist es wichtig, alle Gründe für die Verlinkung zu kennen. Auf diese Weise kennst du die Funktionen und kannst sie in Zukunft nutzen.

Hier sind die wichtigsten Gründe, warum du einen Link klickbar machen solltest:

  1. Allgemeine interne/externe Hyperlinks zu URLs: Du kannst Textlinks setzen, die von deiner Website wegführen (z. B. um Quellen zu zitieren oder ein Argument mit einer Studie eines Dritten zu untermauern), oder zu anderen Seiten auf deiner Website (besonders nützlich, um Leser/innen zu relevanten Inhalten zu schicken und sie länger auf deiner Website zu halten).
  2. Bilder verlinken: Du kannst Hyperlinks zu URLs, Mediendateien oder Anhangsseiten zu jedem Bild in WordPress und vielen anderen Website-Buildern hinzufügen.
  3. Schaltflächen verlinken: CSS-Schaltflächen bieten Optionen für das Hinzufügen von Hyperlinks, die im Vergleich zu reinem Text ein ansprechenderes, visuelles Erlebnis für deinen klickbaren Link bieten.
  4. Telefonnummern: Hyperlinks, die zu Telefonnummern führen, öffnen Apps mit Anruffunktionen, z. B. die Telefon-App auf deinem Gerät oder Skype.
  5. Adressen: Ein Hyperlink zu bestimmten Koordinaten auf Google oder Apple Maps bedeutet, dass der Nutzer, der auf den Link klickt, diese Informationen automatisch in seiner GPS-/Karten-App zur Navigation angezeigt bekommt.
  6. E-Mail-Adressen: Das ist ähnlich wie bei „Click to call“-Links, aber mit E-Mail-Adressen. Er löst die E-Mail-App auf dem Telefon oder Computer aus und erstellt eine neue E-Mail mit einer bestimmten E-Mail-Adresse im Feld An.
  7. Um Ankerlinks zu erstellen: Mit Ankerlinks kannst du auf Inhalte auf der gleichen Seite verlinken; diese sind sehr beliebt, um ein Inhaltsverzeichnis am Anfang eines langen Blogbeitrags zu erstellen. Sie werden manchmal auch „Lesezeichen-Hyperlinks“ genannt
  8. Eine herunterladbare Datei anbieten: WordPress – und andere Website-Builder – bieten Tools zum Hochladen von SVG-Dateien, PDFs, HTML-Dateien und vielem mehr; du kannst sogar Elemente in großen Mengen hochladen. Danach ist es möglich, Hyperlinks in Beiträgen/Seiten zu erstellen, über die die Nutzer/innen die Dateien direkt auf ihre Geräte herunterladen können.

Nachdem wir nun die verschiedenen Arten von Hyperlinks und die Gründe, warum du einen Link erstellen möchtest, erläutert haben, erfährst du hier, wie du ihn erstellen kannst.

Wie du einen Link klickbar machst

Welche Methode du wählst, um einen Link zu erstellen, hängt von deiner Erfahrung ab. Du kannst dich für eine einfachere visuelle Methode entscheiden oder einen HTML-Code verwenden.

Es gibt vier Hauptmethoden, um einen Link klickbar zu machen:

  1. Mit dem klassischen WordPress-Editor
  2. Mit dem WordPress-Block-Editor (Gutenberg)
  3. HTML verwenden
  4. Verwendung einer grafischen Benutzeroberfläche (GUI)

Denke daran, dass alle diese Methoden für WordPress-Beiträge und -Seiten ähnlich funktionieren. Diese Anleitungen (insbesondere Methode 4) sind auch für andere Apps/Website-Builder hilfreich, aber einige Begriffe/Funktionen können abweichen.

Methode 1: Verwendung des klassischen WordPress-Editors

Wenn du mit dem klassischen WordPress-Editor arbeitest, ist es am einfachsten, einen klickbaren Link in einem Beitrag oder auf einer Seite über den Reiter Visueller Editor zu erstellen.

Gehe dazu in deinem WordPress-Dashboard in den Bereich Beiträge oder Seiten und wähle eine einzelne Seite oder einen Beitrag aus, den du bearbeiten möchtest, indem du die Registerkarte Visuell verwendest.

Schritt 1: Markiere den Text, den du anklickbar machen möchtest

Für einen Textlink ist es am besten, wenn du den Text bereits in den visuellen Editor eingegeben hast. Dann markierst du den Text mit dem Cursor.

Hervorheben eines Textabschnitts im WordPress-Editor
Text markieren

Wenn du ein Bild in einen klickbaren Link umwandelst:

Wähle das Bild so aus, dass du eine Editor-Symbolleiste und einen Umriss um das Bild herum sehen kannst.

Klicke im WordPress-Editor auf ein Bild und wähle es aus
Wähle das Bild aus

Schritt 2: Klicke auf die Schaltfläche Link einfügen/bearbeiten

Während der Text noch markiert ist, fahre mit dem Mauszeiger über die Schaltfläche Link einfügen/bearbeiten in der Symbolleiste des visuellen Editors. Das Symbol der Schaltfläche sieht aus wie ein Kettenglied.

Klicke auf die Schaltfläche Link einfügen/bearbeiten
Klicke auf die Schaltfläche Link einfügen/bearbeiten

Wenn du ein Bild in einen klickbaren Link umwandelst:

Klicke bei ausgewähltem Bild auf die Schaltfläche Link einfügen/bearbeiten (die Schaltfläche, die wie ein Kettenglied aussieht).

WordPress-Beitrag, in dem wir auf die Schaltfläche "Bearbeiten" klicken, um ein Bild zu verlinken
Wähle die Schaltfläche Bearbeiten

Schritt 3: Füge eine URL ein

Jetzt wird ein leeres URL-Feld angezeigt. Kopiere (Befehl + C oder Strg + C) die gewünschte Link-URL in die Zwischenablage deines Geräts. Dieser Link kann eine externe URL sein, die du irgendwo im Internet gefunden hast, oder eine URL von deiner eigenen Website.

Nach dem Kopieren fügst du ihn (Befehl + V oder Strg + V) in das Feld ein.

WordPress-Editor, wo wir eine URL in das Feld einfügen
Einfügen einer URL

Wenn du ein Bild in einen klickbaren Link verwandeln willst:

Füge die gewünschte URL in das angezeigte Feld ein und klicke dann auf die Schaltfläche Übernehmen, um den Link zu aktivieren.

WordPress-Beitragseditor mit einem Bild, klickst auf die Schaltfläche "Bearbeiten-Link einfügen"
Füge den Link ein und klicke auf die Schaltfläche Anwenden

Schritt 4: Den Link anwenden

Klicke auf die Schaltfläche „Anwenden„, um den Link zu aktivieren und den Text klickbar zu machen.

markierten Text in WordPress und klicke dann auf die blaue Schaltfläche "Anwenden", um einen Link hinzuzufügen
Klick auf die Schaltfläche „Anwenden“

Du solltest jetzt den Hyperlink-Teil deines Textes unterstrichen und möglicherweise in einer anderen Farbe sehen.

Ein Link, der unterstrichen ist, um zu zeigen, dass er im WordPress-Backend anklickbar ist
Der resultierende Link

Wenn du in deinem Editor auf den Hyperlink klickst, wird ein Live-Link zum Testen angezeigt, zusammen mit Bearbeitungswerkzeugen, falls du den Hyperlink ändern möchtest.

Zusätzliche Optionen

In den folgenden Abschnitten werden wir uns mit fortgeschrittenen klickbaren Links befassen, aber es lohnt sich, darauf hinzuweisen, dass jeder Link, den du im klassischen WordPress-Editor erstellst, eine Schaltfläche Linkoptionen für zusätzliche Einstellungen hat.

Klick auf die Schaltfläche Link-Optionen
Klick auf die Schaltfläche Link-Optionen

Hier kannst du:

  • Die URL anpassen
  • Den Linktext ändern
  • Den Link in einem neuen Tab öffnen
  • Nach bestehenden Inhalten auf deiner Website suchen und diese verlinken
Popup-Fenster mit URL-, Linktext- und Suchfeldern
Weitere Optionen

Wenn du ein Bild in einen klickbaren Link verwandeln willst:

Der klassische WordPress-Editor bietet eine weitere Möglichkeit, Bilder anklickbar zu machen. Dazu wählst du das Bild aus und klickst dann auf die Schaltfläche Bearbeiten (sieht aus wie ein Stift) in der Popup-Symbolleiste.

Bild in WordPress ausgewählt und auf die Schaltfläche "Bearbeiten" geklickt

Scrolle zum Feld Link zu, in dem du einen Link zu einer benutzerdefinierten URL erstellen kannst. Füge einfach die gewünschte URL in das Feld darunter ein und klicke auf Aktualisieren.

Finde und bearbeite das Feld Link zu
Finde und bearbeite das Feld Link zu

Du kannst auch das Dropdown-Menü Link zu auswählen, um einen Hyperlink zu erstellen:

  • Mediendateien
  • Seiten mit Anhängen
  • Benutzerdefinierte URLs
  • Keine
Dropdown-Menü im Feld "Link zu" zum Hinzufügen verschiedener Verlinkungsoptionen wie Anhangsseite und benutzerdefinierte URL
Wähle verschiedene Verlinkungsoptionen

Methode 2: Verwendung des WordPress-Blockeditors (Gutenberg)

Hyperlinks funktionieren im WordPress-Blockeditor sowohl in Beiträgen als auch auf Seiten gleich.

Um zu beginnen, gehst du zum Abschnitt Beiträge oder Seiten in deinem WordPress Dashboard. Wähle einen einzelnen Beitrag oder eine Seite aus, die du bearbeiten möchtest, und gehe dann zu den folgenden Schritten über.

Schritt 1: Markiere einen Text

Gib einen Text in den Editor ein. Markiere mit deinem Cursor den Teil des Textes, den du anklickbar machen willst. Klicke in der Popup-Symbolleiste auf die Schaltfläche Link.

Markiere den Text und klicke auf die Schaltfläche Link
Markiere den Text und klicke auf die Schaltfläche Link

Wenn du ein Bild in einen klickbaren Link umwandelst:

Um ein Bild im WordPress-Block-Editor klickbar zu machen, musst du zunächst ein Bild zum Editor hinzufügen.

Dazu klickst du auf die Schaltfläche Block hinzufügen und wählst dann den Block Bild. Lade das Bild hoch, das du verlinken möchtest.

In WordPress-Posts gibt es einen Block + Button zum Anklicken, dann kannst du nach dem Bildblock suchen

Klicke auf das Bild, um es zu markieren, und wähle dann die Schaltfläche Link einfügen im Popup-Fenster der Werkzeugleiste.

Klick auf das Bild und auf die Schaltfläche Link einfügen, die wie ein Link-Symbol aussieht
Bild auswählen und Link einfügen

Schritt 2: Füge die URL ein und sende den Link

Es wird ein Popup-Fenster mit einem leeren Feld angezeigt. Füge die URL ein, zu der du verlinken möchtest, und klicke dann auf die Eingabetaste oder auf die Schaltfläche Senden, um den Link zu aktivieren.

eine URL einfügen und auf die Schaltfläche Senden klicken, die wie ein gebogener Pfeil aussieht
URL einfügen und auf Absenden klicken

Als Ergebnis wird der verlinkte Text in einer anderen Farbe angezeigt, und du kannst auf den Link klicken, um eine Vorschau des Inhalts zu sehen und weitere Einstellungen für die Verlinkung vorzunehmen.

clicking on the new link shows a visual preview with the page's link, featured image, and more information
Eine Vorschau und erweiterte Linkeinstellungen anzeigen

Wenn du ein Bild in einen klickbaren Link umwandelst:

Es gibt Optionen, um Mediendateien und Anhänge zu verlinken, wenn du das möchtest.

das Link-Popup für Bilder hat Optionen, um Mediendateien und Anhangsseiten zu verlinken
Erwäge Links zu Mediendateien und Anhängen

Ansonsten füge eine URL in das leere Link-Feld ein. Klicke auf die Schaltfläche Übernehmen, um den Link zu aktivieren. Nach der Veröffentlichung wird jeder, der auf das Bild klickt, zu dem von dir angegebenen Link weitergeleitet.

Klicke auf die Schaltfläche Übernehmen, nachdem du eine URL eingefügt hast
Klicke auf die Schaltfläche Übernehmen, nachdem du eine URL eingefügt hast

Für weitere Optionen klickst du auf den Carrot-Button nach unten:

  • Den Link in einem neuen Tab öffnen
  • Link hinzufügen Rel
  • Link CSS-Klasse hinzufügen
Es gibt einen Carrot-Button, der die Felder "In neuem Tab öffnen", "Link rel" und "Link CSS-Klasse" anzeigt.
Klicke auf die nach unten zeigende Karotte für weitere Einstellungen

Zusätzliche Optionen

In den folgenden Abschnitten gehen wir näher auf erweiterte Hyperlink-Strukturen ein, aber du solltest wissen, dass eine Schaltfläche zum Bearbeiten verfügbar ist, wenn du mit dem Cursor auf den neu erstellten Link klickst.

es gibt eine Schaltfläche zum Bearbeiten, die wie ein Bleistift aussieht
Klick auf die Schaltfläche Bearbeiten

Auf der Seite Bearbeiten werden Felder angezeigt, die du bearbeiten kannst:

  • Ändern des Linktextes
  • Die URL zu ändern
  • Den Link in einem neuen Tab öffnen
die neue Popup-Seite hat Felder für Text, URL und zum Öffnen in einem neuen Tab
Die Seite Bearbeiten

Andere klickbare Links, die du im Block-Editor erstellen kannst

Der WordPress-Block-Editor erweitert die üblichen Verlinkungsmöglichkeiten. Dutzende von eingebauten Blöcken ermöglichen eine Art von klickbarer Linkstruktur, darunter:

  • Buttons: Eine elegante Art, Inhalte zu verlinken, im Vergleich zu einfachen Textlinks.
  • Dateien: Lade schnell Dateien hoch und füge eine Schaltfläche hinzu, auf die die Nutzer/innen klicken und sie herunterladen können.
  • Soziale Symbole: Füge soziale Symbole mit klickbaren Links ein.
  • Navigation: Platziere Navigationsschaltflächen mit anklickbaren Links überall auf deiner Website.
  • Mehr lesen: Kann verwendet werden, um deinen Inhalt zu kürzen und einen Link zu einer ausführlicheren Version anzubieten.
  • An-/Abmelden: Füge einen schnellen Link ein, mit dem sich die Nutzer/innen bei deiner Website anmelden können.
  • Nächster Beitrag: Füge einen klickbaren Link/Button zum nächsten Blogbeitrag auf deiner Seite hinzu.
  • Vorheriger Beitrag: Füge einen klickbaren Link/Button ein, der zum vorherigen Blogbeitrag auf deiner Website führt.
Es wurde eine Schaltfläche hinzugefügt, die du genau wie jeden anderen Text oder jedes Bild verlinken kannst
Eine Schaltfläche ist eine weitere Art von klickbarem Link, die im WordPress-Block-Editor verfügbar ist

Methode 3: HTML verwenden

Einen Link mit HTML klickbar zu machen, funktioniert unabhängig von der Oberfläche deines Editors auf die gleiche Weise.

Du kannst HTML mit bearbeiten:

Das Textfeld im klassischen WordPress-Editor

Klick auf die Registerkarte Text
Das Text-Panel des WordPress Classic Editors

Der Code-Editor im WordPress-Block-Editor

Klick auf die Code-Schaltfläche
Der Code-Editor im WordPress-Block-Editor

Ein HTML/Text-Editor auf deinem Gerät

Texteditoren wie Atom, Sublime Text und Coda bieten die nötige Oberfläche, um HTML zu schreiben und zu bearbeiten, insbesondere für klickbare Links. Es ist auch möglich, Markdown-Editoren zu verwenden.

Schwarzer Texteditor mit geöffneten Tabs mit Code darin
Der Atom-Texteditor

Nachdem du mit dem Texteditor gearbeitet hast, kannst du:

Wenn du einen Texteditor gefunden hast und weißt, wie du das HTML in WordPress hochlädst, gehe zu den folgenden Schritten über, um einen Link mit HTML klickbar zu machen.

Dieses Format wird für einfache Hyperlinks in HTML verwendet:

<a href="https://www.example.com">Link Text</a>

Texteditor in WordPress mit Code für einen Link

Anmerkungen:

  1. Ersetze „https://www.example.com“ durch deine gewünschte URL.
  2. Ersetze „Linktext“ durch den gewünschten Linktext.

Sobald du den Link fertig hast, kannst du den Beitrag/die Seite veröffentlichen oder den HTML-Code auf deine Website hochladen. Es ist auch möglich, eine visuelle Vorschau des Links zu erhalten, indem du in WordPress auf die Registerkarte „Visuell“ wechselst.

Eine veröffentlichte Version des HTML-Links zeigt den Link unterstrichen und manchmal in einer anderen Farbe an. Wenn du mit der Maus über den Link fährst, wird sein Ziel unten im Browser angezeigt.

Frontend-Post mit unterstrichenem Linktext
Link auf dem Frontend mit der Browser-Vorschau

Methode 4: Verwendung einer grafischen Benutzeroberfläche (GUI)

Auch wenn wir nicht jede erdenkliche grafische Benutzeroberfläche abdecken können, sieht das Lernen, wie man einen Link in etwas anderem als WordPress oder HTML anklickbar macht, meist ähnlich aus wie das, was wir gerade behandelt haben.

Jede grafische Benutzeroberfläche kann einen etwas anderen Namen oder ein anderes Symbol für die Erstellung eines Hyperlinks verwenden.

Dein allgemeiner Prozess sollte folgendermaßen ablaufen:

  1. Markiere den Text, den du verlinken willst.
  2. Klicke im Editor auf das Link-Symbol (kann einen anderen Namen haben).
  3. Füge die gewünschte URL ein.
  4. Klicke auf die Schaltfläche Link hinzufügen (kann auch einen anderen Namen haben).

Ein einfaches Beispiel: Mit einem Online-Shop-Builder wie Shopify kannst du auf jeder Seite oder in jedem Beitrag einen Link einfügen, indem du den Text markierst und auf die Schaltfläche Link einfügen klickst.

die Shopify-Benutzeroberfläche mit Text, der verlinkt ist
Einen Link in einer alternativen GUI einfügen

Dann fügst du die Ziel-URL ein und klickst auf die Schaltfläche „Link einfügen„.

ein Link wurde eingefügt, in einem neuen Fenster geöffnet und eingefügt
Füge die URL ein und klicke auf Link einfügen

Das erzeugt einen klickbaren Link.

den unterstrichenen Link im Shopify-Editor
Anklickbarer Link in einer anderen GUI

Wie man Links in einem neuen Tab öffnet

Wie bereits erwähnt, bieten WordPress und andere GUIs zusätzliche Anpassungsmöglichkeiten für anklickbare Links, wie z. B. das Erzwingen des Öffnens eines Links in einem anderen Tab.

Wie kannst du das machen? Schauen wir uns das mal an.

Link in einem neuen Tab mit dem klassischen WordPress-Editor öffnen

Sobald du einen klickbaren Link im WordPress Classic Editor hast, wähle die Schaltfläche Link-Optionen.

Klick auf die Schaltfläche "Link-Optionen"
Link-Optionen

Aktiviere das Kontrollkästchen Link in einem neuen Tab öffnen.

Klicke dann auf die Schaltfläche Aktualisieren.

Popup-Fenster mit der Option, den Link in einem neuen Tab zu öffnen
Link in einem neuen Tab öffnen

Link in einem neuen Tab mit dem WordPress-Block-Editor öffnen

Angenommen, du hast bereits einen Link im WordPress-Block-Editor hinzugefügt, dann öffnet ein Klick auf den Link eine Popup-Vorschau des Zielinhalts.

Über die Schaltfläche Bearbeiten hast du Zugriff auf weitere Einstellungen (einschließlich der Option In neuem Tab öffnen), aber es ist einfacher, den Schalter In neuem Tab öffnen > unten im Popup-Fenster umzulegen.

hervorgehobener Text mit einem Schalter zum Öffnen in einem neuen Tab
Schalter In neuem Tab öffnen

Link in einem neuen Tab mit HTML öffnen

Im WordPress Text-Editor, WordPress Code-Editor oder einem allgemeinen HTML-Editor kannst du den folgenden Code verwenden, damit dein klickbarer Link in einem neuen Tab geöffnet wird:

<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">Link Text</a>
  1. Ersetze „https://www.example.com“ durch deine gewünschte Ziel-URL
  2. Ersetze „Linktext“ durch den Text, den du verlinken möchtest.
  3. Das target=“_blank“ -Attribut ist der Teil des Codes, der den Link tatsächlich in einem neuen Tab öffnet. Es ist der einzige Teil, der für diese einfache Funktion wirklich notwendig ist.
  4. Wir empfehlen dringend, die rel=“noreferrer noopener“ Attribute und Werte hinzuzufügen, um häufige Sicherheitsprobleme beim Öffnen von Links in neuen Tabs zu verhindern. Du kannst sie aber auch einfach weglassen und den Link trotzdem in einem neuen Tab öffnen lassen.

Nach der Veröffentlichung sieht der Link genau so aus, aber wenn du darauf klickst, wird die Ziel-URL in einem neuen Tab geöffnet.

frontend web browser with a link that's opening in a new tabFrontend-Webbrowser mit einem Link, der in einem neuen Tab geöffnet wird
Ein Link, der sein Ziel in einem neuen Tab öffnet

Wie man Nofollow zu einem Hyperlink hinzufügt

Der HTML-Wert nofollow weist die Suchmaschinen an, einen anklickbaren Link zu ignorieren, und verhindert, dass Suchmaschinenguthaben (Link Juice) an die Zielwebsite weitergegeben wird. Der Hauptzweck von nofollow ist es, Spam-Links zu reduzieren, aber Inhaltsersteller nutzen es auch für bezahlte Links, Kommentare, nutzergenerierte Inhalte, Einbettungen oder immer dann, wenn du nicht möchtest, dass die Seite, auf die du verlinkst, als unterstützt gilt.

WordPress hat keine eingebaute Möglichkeit, einen Nofollow-Link hinzuzufügen, aber es ist möglich, indem du den HTML-Code eingibst.

Der folgende Code zeigt einen einfachen Link mit einem nofollow-Wert:

<a href="https://www.example.com" rel="nofollow">The Link Text.</a>
HTML-Code im klassischen WordPress-Texteditor
HTML-Linkcode mit nofollow

Was du siehst:

  1. Ersetze den Text „https://www.example.com“ durch deine gewünschte Ziel-URL.
  2. Ersetze den Teil „Der Linktext“ durch den gewünschten Linktext.
  3. Verwende das Attribut rel=“nofollow“ und den Wert im HTML-Link.

Bei der Veröffentlichung oder in der visuellen Ansicht sieht ein Nofollow-Link nicht anders aus als ein Standard-Hyperlink; die Nofollow-Funktion wird jedoch im Backend-Code gespeichert.

ein normaler unterstrichener Link im Texteditor
Ein Nofollow-Link sieht auf dem Frontend nicht anders aus

Wie man auf bestehende Inhalte verlinkt

Das Verknüpfen mit bestehenden Inhalten ist eine exklusive Funktion von WordPress, mit der du direkt im WordPress-Editor nach bereits erstellten Blogbeiträgen und Seiten suchen kannst. So musst du die URLs nicht mehr in einem anderen Browserfenster aufrufen, um sie zu kopieren und in einen klickbaren Link einzufügen.

Verlinkung zu bestehenden Inhalten im klassischen WordPress-Editor

Erstelle einen Link, indem du den gewünschten Text markierst und im Editor auf die Schaltfläche Link einfügen/bearbeiten (Kettenlink) klickst. Daraufhin öffnet sich ein Popup-Feld, in dem du auf die Schaltfläche Linkoptionen (Zahnradsymbol) klicken kannst.

hervorgehobenen Text und klicke auf die Registerkarte Link-Optionen
Gehe zur Schaltfläche Link-Optionen
  1. Gehe zu dem Abschnitt „Oder Link zu bestehendem Inhalt“
  2. Gib ein Stichwort in die Suchleiste ein und wähle dann eine bestehende Seite oder einen Beitrag aus den Ergebnissen aus.
  3. Beobachte, wie der Link für den bestehenden Inhalt automatisch in das URL-Feld eingefügt wird.

Klicke auf die Schaltfläche Link hinzufügen, wenn du fertig bist.

Popup-Fenster mit Suchbereich
Der Prozess der Suche nach bestehenden Inhalten

Das erzeugt einen direkten Link zu anderen Inhalten (auch bekannt als interner Link) im Editor.

den resultierenden Link, der im klassischen Editor unterstrichen ist
Die resultierende Ansicht eines internen Links

Verknüpfen mit bestehendem Inhalt im WordPress-Blockeditor

Markiere den Text/das Bild, den/das du verlinken möchtest, und klicke dann auf die Schaltfläche Link in der Popup-Symbolleiste.

hervorgehobener Text in WordPress und die Link-Schaltfläche
Klick auf die Schaltfläche Link

Das dafür vorgesehene Feld hat zwei Funktionen: Du kannst eine URL einfügen oder es als Suchleiste verwenden. Gib also ein beliebiges Stichwort ein, das sich auf einen deiner bestehenden Inhalte bezieht, um verwandte Ergebnisse zu erhalten.

Sobald du die gewünschte Seite oder den gewünschten Beitrag siehst, klickst du sie an.

ein Stichwort eingeben und Ergebnisse für verwandte Inhalte sehen
Suche nach früheren Inhalten

Dadurch wird automatisch ein Link zu dem vorhandenen Inhalt im WordPress-Blockeditor erstellt.

Wie man klickbare Telefon-, SMS- und E-Mail-Links erstellt

Es gibt einige Möglichkeiten, klickbaren Links besondere Aktionen hinzuzufügen, indem du die Standard-URL-Struktur auswechselst und auf etwas anderes verlinkst, wie z. B.:

  • Eine Telefonnummer, die die Telefon-App öffnet.
  • Eine Telefonnummer, die die Texting-App öffnet.
  • Eine E-Mail-Adresse, die automatisch die E-Mail-App des Nutzers öffnet.

Wie man einen klickbaren Telefon-Link erstellt

Ein „Klick zum Anrufen“ oder ein Telefon-Link fügt automatisch eine bestimmte Telefonnummer in die Telefon-App des Nutzers ein, oder sogar in eine App, die Telefonnummern unterstützt, wie Skype.

Anstatt eine URL zu verwenden, fügst du den tel: -Code in den HTML-Code ein, gefolgt von einer Telefonnummer, etwa so:

<a href="tel:555-555-5555">Click To Call</a>

Notizen:

  1. Ersetze die Telefonnummer durch die Nummer, die die Nutzer anrufen sollen.
  2. Ersetze den Text „Click To Call“ durch den Linktext, den du anzeigen möchtest.
Einfügen einer Telefonnummer in das URL-Feld in WordPress
Ein tel: Link im visuellen Editor

In visuellen Editoren wie WordPress Block und WordPress Classic gibst du einfach tel:555-555-5555 (mit der gewünschten Telefonnummer) in das URL-Feld für einen Link ein. Klicke auf die Eingabetaste, damit der Telefonlink automatisch für dich erstellt wird.

Wenn jemand auf diesen Link klickt, wird er entweder direkt zur entsprechenden App (die Telefon-App auf einem Smartphone) weitergeleitet oder er sieht eine Aufforderung, eine App wie Skype zu öffnen.

Browser-Fenster, das den Nutzer auffordert, eine Anwendung auf dem Telefon zu öffnen
Der tel: Link öffnet sich in Skype oder anderen Telefon-Apps

Wie man einen klickbaren SMS-Link erstellt

Klickbare SMS-Links funktionieren ähnlich wie Telefon-Links, aber sie öffnen automatisch Messaging-Apps statt Anruf-Apps.

Um einen SMS-Link hinzuzufügen, verwende sms:555-555-5555 statt einer URL.

<a href="sms:555-555-5555">Click To Text</a>

Hinweise:

  1. Ersetze „555-555-5555“ durch eine andere Telefonnummer.
  2. Ersetze „Click To Text“ durch den Text, den du für den Link möchtest.

Sowohl der klassische als auch der Block-WordPress-Editor unterstützen SMS-Links, wenn du den Wert sms:555-555-5555 in das URL-Feld für Links einträgst.

Wie versprochen, sehen die Nutzerinnen und Nutzer Messaging-Apps, wenn sie auf diese Art von Links klicken.

Browser mit Benachrichtigung zum Öffnen der Rufnummer in einer SMS Anwendung
Ein sms:-Link öffnet sich in der wichtigsten Messaging-App

Wie man einen klickbaren E-Mail-Link erstellt

Wenn du auf einen E-Mail-Hyperlink klickst, öffnet sich auf dem Gerät des/der Nutzers/in automatisch die wichtigste E-Mail-App und der Abschnitt „Verfassen“ wird an eine bestimmte E-Mail-Adresse gesendet.

Für diesen Link fügst du den mailto: Code ein, gefolgt von einer E-Mail-Adresse, wo du normalerweise eine Ziel-URL einfügen würdest.

<a href="mailto:[email protected]">Click To Email</a>

Hinweise:

  1. Ersetze die E-Mail-Adresse „[email protected]“ durch deine gewünschte Ziel-E-Mail-Adresse.
  2. Ersetze den Text „Click To Email“ durch den Linktext, den du anzeigen möchtest.

Wenn du den WordPress Classic- oder Block-Editor verwendest, gib einfach den Wert mailto:[email protected] in das URL-Feld ein, wenn du einen Link erstellst.

Ein mailto: Link in einem visuellen WordPress-Editor

Nachdem du den Link veröffentlicht hast, werden die Nutzer/innen, die darauf klicken, zu ihrer Mailing-App weitergeleitet, wobei die von dir angegebene E-Mail-Adresse im Feld An: enthalten ist.

E-Mail-Client mit der in das Feld An eingefügten E-Mail-Adresse
Mailto: Links öffnen E-Mail-Apps mit der angegebenen E-Mail-Adresse

Zusammenfassung

Anklickbare Links (auch Hyperlinks oder einfach nur Links genannt) können die Interaktivität auf deiner Website verbessern, die Besucher/innen zu weiteren Inhalten führen und auf wichtige Informationen aus anderen Bereichen des Internets verweisen. Zu lernen, wie man einen klickbaren Link erstellt, gehört daher zu den grundlegenden Lektionen der Website-Gestaltung und Inhaltserstellung.

Nach der Lektüre dieses Artikels solltest du in der Lage sein, das Aussehen eines klickbaren Links zu erkennen und genau zu wissen, wie man einen Link erstellt, egal ob es sich um einen Link zu Text oder Bildern handelt. Es ist auch gut zu wissen, dass es verschiedene Methoden gibt, um einen Link anklickbar zu machen, z. B. mit dem klassischen WordPress-Editor, dem Block-Editor, HTML oder einer anderen grafischen Benutzeroberfläche.

Und natürlich möchten wir dich ermutigen, auch die fortgeschrittenen Optionen für klickbare Links zu erkunden, wie z. B. Links für Telefonnummern, E-Mail-Adressen und solche mit nofollow-Tags.

Wenn du noch Fragen dazu hast, wie du einen Link anklickbar machst, schreibe uns deine Fragen und Bedenken in die Kommentare unten.

Jeremy Holcombe Kinsta

Content & Marketing Editor bei Kinsta, WordPress Web Developer und Content Writer. Außerhalb von WordPress genieße ich den Strand, Golf und Filme. Außerdem habe ich Probleme mit großen Menschen ;).