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:
- Der Inhalt
- Die URL oder der Permalink
- Das Ziel
- Nofollow, noreferrer, und noopener
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:
- Text
- 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.
Dadurch wird ein Link auf dem Frontend angezeigt, normalerweise mit farbigem, unterstrichenem Text.
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.
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.
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.
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.
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>.
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=““.
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.
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 andere Möglichkeit ist die Anzeige einer Karte, die die Karten-App auf dem Smartphone des Nutzers öffnet.
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> 
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.
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.
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.
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:
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>
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.
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:
- 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).
- Bilder verlinken: Du kannst Hyperlinks zu URLs, Mediendateien oder Anhangsseiten zu jedem Bild in WordPress und vielen anderen Website-Buildern hinzufügen.
- 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.
- Telefonnummern: Hyperlinks, die zu Telefonnummern führen, öffnen Apps mit Anruffunktionen, z. B. die Telefon-App auf deinem Gerät oder Skype.
- 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.
- 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.
- 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
- 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:
- Mit dem klassischen WordPress-Editor
- Mit dem WordPress-Block-Editor (Gutenberg)
- HTML verwenden
- 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.
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.
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.
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).
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.
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.
Schritt 4: Den Link anwenden
Klicke auf die Schaltfläche „Anwenden„, um den Link zu aktivieren und den Text klickbar zu machen.
Du solltest jetzt den Hyperlink-Teil deines Textes unterstrichen und möglicherweise in einer anderen Farbe sehen.
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.
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
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.
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.
Du kannst auch das Dropdown-Menü Link zu auswählen, um einen Hyperlink zu erstellen:
- Mediendateien
- Seiten mit Anhängen
- Benutzerdefinierte URLs
- Keine
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.
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.
Klicke auf das Bild, um es zu markieren, und wähle dann die Schaltfläche Link einfügen im Popup-Fenster der Werkzeugleiste.
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.
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.
Wenn du ein Bild in einen klickbaren Link umwandelst:
Es gibt Optionen, um Mediendateien und Anhänge zu verlinken, wenn du das möchtest.
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.
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
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.
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
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.
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
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.
Nachdem du mit dem Texteditor gearbeitet hast, kannst du:
- Deine Dateien zur Veröffentlichung im Internet hochladen, und zwar per FTP oder SFTP. Wir empfehlen die Verwendung von FileZilla, um einen möglichst reibungslosen Ablauf zu gewährleisten.
- HTML-Dateien als Massen-Upload in das WordPress-Dateiverzeichnishochladen.
- Einen der vielen anderen FTP-Clients für den Upload von HTML-Dateien in WordPress verwenden.
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>
Anmerkungen:
- Ersetze „https://www.example.com“ durch deine gewünschte URL.
- 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.
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:
- Markiere den Text, den du verlinken willst.
- Klicke im Editor auf das Link-Symbol (kann einen anderen Namen haben).
- Füge die gewünschte URL ein.
- 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.
Dann fügst du die Ziel-URL ein und klickst auf die Schaltfläche „Link einfügen„.
Das erzeugt einen klickbaren Link.
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.
Aktiviere das Kontrollkästchen Link in einem neuen Tab öffnen.
Klicke dann auf die Schaltfläche Aktualisieren.
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.
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>- Ersetze „https://www.example.com“ durch deine gewünschte Ziel-URL
- Ersetze „Linktext“ durch den Text, den du verlinken möchtest.
- 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.
- 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.
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>
Was du siehst:
- Ersetze den Text „https://www.example.com“ durch deine gewünschte Ziel-URL.
- Ersetze den Teil „Der Linktext“ durch den gewünschten Linktext.
- 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.
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.
- Gehe zu dem Abschnitt „Oder Link zu bestehendem Inhalt“
- Gib ein Stichwort in die Suchleiste ein und wähle dann eine bestehende Seite oder einen Beitrag aus den Ergebnissen aus.
- 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.
Das erzeugt einen direkten Link zu anderen Inhalten (auch bekannt als interner Link) im Editor.
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.
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.
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:
- Ersetze die Telefonnummer durch die Nummer, die die Nutzer anrufen sollen.
- Ersetze den Text „Click To Call“ durch den Linktext, den du anzeigen möchtest.
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.
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:
- Ersetze „555-555-5555“ durch eine andere Telefonnummer.
- 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.
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:[emailprotected]">Click To Email</a>Hinweise:
- Ersetze die E-Mail-Adresse „[emailprotected]“ durch deine gewünschte Ziel-E-Mail-Adresse.
- 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:[emailprotected] in das URL-Feld ein, wenn du einen Link erstellst.
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.
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.
