Tutorials

Richtig verlinken: Die ultimative Schritt-für-Schritt-Anleitung

Melden

Hyperlinks (oder einfach „Links“) sind das Rückgrat des Internets. Sie verbinden Webseiten miteinander, leiten Leser zu weiterführenden Informationen und verbessern die Benutzerfreundlichkeit sowie das SEO-Ranking.

In diesem Tutorial lernst du, wie du Links in den gängigsten Formaten erstellst: in HTML, in Markdown und in Textverarbeitungsprogrammen.

1. Links in HTML (für Webseiten & Blogs)

HTML ist die Standard-Sprache des Internets. Um hier einen Link zu setzen, nutzt man das sogenannte Anker-Tag (<a>).

Der Grundaufbau

<a href="ZIEL-URL">Sichtbarer Linktext</a>
  • href: Steht für „Hypertext Reference“. Hier kommt die Webadresse (URL) rein.
  • Linktext: Das ist der Text, den der Nutzer sieht und anklicken kann.

Beispiel:

<a href="https://www.beispiel.de">Besuche unsere Webseite</a>

Link in einem neuen Tab öffnen

Wenn du verhindern möchtest, dass Besucher deine Seite verlassen, kannst du den Link in einem neuen Browsertab öffnen lassen. Dazu fügst du das Attribut target="_blank" hinzu:

<a href="https://www.beispiel.de" target="_blank" rel="noopener noreferrer">Besuche unsere Webseite</a>

(Hinweis: rel="noopener noreferrer" ist wichtig für die Sicherheit und Performance.)

2. Links in Markdown (für Notion, GitHub, Reddit, Messenger)

Markdown ist eine vereinfachte Formatierungssprache, die auf vielen modernen Plattformen genutzt wird.

Die Formel: Eckige Klammern + Runde Klammern

Erst kommt der Text in eckigen Klammern, direkt danach die URL in runden Klammern (ohne Leerzeichen dazwischen).

[Sichtbarer Linktext](https://www.ziel-url.de)

Beispiel:

Hier geht es zu [Wikipedia](https://www.wikipedia.org).

3. Links in Programmen (Word, Google Docs, E-Mails, CMS)

Wenn du visuelle Editoren (wie Microsoft Word, Google Docs, Outlook oder WordPress) nutzt, brauchst du keinen Code schreiben.

Hier hilft fast immer ein universeller Tastatur-Kurzbefehl:

  1. Markiere das Wort oder den Satz, der verlinkt werden soll.
  2. Drücke:
    • Windows: Strg + K
    • Mac: Cmd + K
  3. Es öffnet sich ein kleines Fenster. Füge dort deine URL ein.
  4. Drücke die Enter-Taste (oder klicke auf „Übernehmen“).

4. Spezielle Link-Arten

Manchmal möchtest du nicht auf eine Webseite verlinken, sondern eine andere Aktion auslösen.

E-Mail-Link (öffnet das Mailprogramm)

  • HTML: <a href="mailto:kontakt@beispiel.de">Schreib uns eine E-Mail</a>
  • Markdown: [Schreib uns eine E-Mail](mailto:kontakt@beispiel.de)

Telefonnummer-Link (wählt die Nummer auf dem Smartphone)

  • HTML: <a href="tel:+49123456789">Jetzt anrufen</a>
  • Markdown: [Jetzt anrufen](tel:+49123456789)

Sprungmarken / Anker-Links (zu einem Abschnitt auf derselben Seite)

  • Gib dem Ziel-Abschnitt eine ID (z. B. <h2 id="kontakt">Kontakt</h2>).
  • Verlinke darauf mit einem Raute-Zeichen (#):
    • HTML: <a href="#kontakt">Zum Kontakt springen</a>
    • Markdown: [Zum Kontakt springen](#kontakt)

5. Best Practices: Wie man gut verlinkt

  • Vermeide „Hier klicken“: Der Linktext (Ankertext) sollte beschreiben, was den Nutzer erwartet.
    • Schlecht: Um mehr über Hunde zu erfahren, klicke [hier].
    • Besser: Erfahre mehr in unserem [Ratgeber über Hunde].
  • Keine reinen URLs als Text anzeigen: https://www.beispiel.de/kategorie/unterseite/artikel-1234 sieht unschön aus. Bette den Link immer in lesbaren Text ein.
  • Prüfe deine Links: Teste nach dem Veröffentlichen immer kurz, ob der Link wirklich funktioniert und kein Tippfehler (z. B. htpp:// statt https://) vorliegt.
0