Was ist der Unterschied zwischen nofollow und sponsored?

nofollow ist der generische Marker, der Suchmaschinen sagt: Diesen Link nicht für SEO werten. sponsored ist seit Google 2019 spezifisch für bezahlte Links (Werbung, Affiliate, Sponsoring) gedacht und sollte dort statt nofollow verwendet werden. Google empfiehlt: das spezifischste passende Attribut nutzen, also lieber sponsored als nofollow bei bezahlten Links.

Warum brauche ich rel="noopener" bei target="_blank"?

Aus Sicherheitsgründen. Ohne noopener kann das geöffnete Fenster über window.opener auf das ursprüngliche Tab zugreifen und es z.B. auf eine Phishing-Seite umleiten – das nennt sich Tabnabbing. Moderne Browser setzen noopener inzwischen automatisch, aber die explizite Angabe ist die saubere und browserübergreifend zuverlässige Lösung.

Wann sollte ich rel="ugc" nutzen?

Bei nutzergenerierten Inhalten – also überall dort, wo User selbst Links posten können: Forum-Beiträge, Blog-Kommentare, Gästebücher, Q&A-Plattformen. Das schützt deine Domain vor schlechtem SEO-Ruf, falls User auf Spam- oder Low-Quality-Seiten verlinken. Kombinierbar mit nofollow für maximale Vorsicht.

Funktioniert das download-Attribut bei externen Links?

Nein, aus Sicherheitsgründen funktioniert das download-Attribut nur bei same-origin URLs (also Dateien auf derselben Domain). Externe Links werden trotz download-Attribut normal navigiert. Für externe Downloads musst du die Datei zunächst auf den eigenen Server spiegeln.

Welche rel-Attribute kombiniere ich für einen Affiliate-Link?

Empfohlen ist rel="sponsored noopener" – sponsored macht Google die bezahlte Beziehung klar (seit 2019 Pflicht), noopener ist die Sicherheits-Best-Practice für target=_blank. Optional kann auch nofollow ergänzt werden, ist aber mit sponsored eigentlich redundant.

Sollte ich bei jedem externen Link nofollow setzen?

Nein. nofollow signalisiert Misstrauen gegenüber dem Linkziel und gibt keine SEO-Power weiter. Bei vertrauenswürdigen externen Links (Quellen, Studien, Tool-Empfehlungen) lieber ohne nofollow verlinken – das stärkt das offene Web. Pflicht ist nofollow oder sponsored nur bei bezahlten Links und ratsam bei UGC.

Hyperlink HTML Generator

HTML-Hyperlinks visuell zusammenstellen – mit target, rel-Attributen wie nofollow, sponsored, ugc und Live-Vorschau.

Quick-Presets

URL / Ziel-Adresse

Linktext

target

rel-Attribute

nofollowSuchmaschinen sollen Link nicht für SEO werten.sponsoredBezahlter / gekaufter Link (seit 2019 Google-Standard).ugcUser-Generated Content (Forum, Kommentare).noopenerSicherheit bei _blank gegen Tabnabbing (empfohlen).noreferrerKein Referrer-Header wird an die Zielseite gesendet.

Vorschau

Mehr erfahren

Klick öffnet ggf. einen neuen Tab je nach gewähltem target.

HTML-Code

<a href="https://example.com">Mehr erfahren</a>

Das Wichtigste auf einen Blick

HTML-Links bestehen aus dem <a>-Tag mit href-Attribut für die Ziel-URL.
target="_blank" öffnet im neuen Tab – immer mit rel="noopener" kombinieren (Sicherheit).
rel="nofollow" sagt Suchmaschinen: „Folge diesem Link nicht für SEO“.
rel="sponsored" und rel="ugc" sind seit 2019 die Standard-Markierungen für gesponserte / nutzergenerierte Links.
download-Attribut macht aus einem Link einen Datei-Download (nur same-origin).

Ein HTML-Hyperlink ist das Element, mit dem das Web verknüpft wird: Das <a>-Tag (kurz für „anchor“) mit seinem Pflicht-Attribut href definiert Klicks, die User von einer Seite zur nächsten führen. href akzeptiert dabei nicht nur klassische URLs, sondern auch Anker auf derselben Seite (#abschnitt), E-Mail-Links (mailto:), Telefonnummern (tel:) und Datei-Downloads. Dazu gibt es eine Reihe wichtiger Zusatzattribute – target steuert, ob der Link im aktuellen oder neuen Tab öffnet, rel signalisiert Suchmaschinen und Browsern den Linktyp, download macht aus dem Link einen direkten Datei-Download und title setzt einen Tooltip.

Was unser Tool besonders macht: Du siehst sofort eine klickbare Live-Vorschau und den fertigen HTML-Code, der sich beim Tippen aktualisiert. Alle modernen rel-Attribute – nofollow, sponsored, ugc, noopener, noreferrer – sind direkt als Toggles verfügbar, jeweils mit kurzer deutscher Erklärung der SEO- und Sicherheits-Implikationen. Quick-Presets für die häufigsten Use-Cases (externer Link, Affiliate, gesponsert, E-Mail, PDF-Download) sparen dir den Standard-Boilerplate. Bei target=_blank schlägt das Tool automatisch noopener vor – die seit Jahren empfohlene Sicherheits-Best-Practice gegen Tabnabbing.

Hintergrund & Anwendungen

Die Hyperlink-Anatomie

<a>: Das HTML-Element für Hyperlinks (a steht für „anchor“).
href: Die Ziel-Adresse: URL, Anker (#section), mailto:, tel: oder Datei.
Linktext: Der sichtbare, klickbare Text zwischen <a> und </a>.
Attribute: Optionale Parameter wie target, rel, download, title, id, class.

target-Attribute

_self: Standard – Link öffnet im aktuellen Tab/Fenster.
_blank: Link öffnet in neuem Tab oder Fenster (immer mit noopener kombinieren).
_parent: Öffnet im Parent-Frame (bei iframe-Verschachtelung).
_top: Öffnet im obersten Frame und ersetzt die komplette Seite.

rel-Attribute (SEO-relevant)

nofollow: Suchmaschine soll Link nicht für Ranking werten – generischer Marker.
sponsored: Bezahlter Link – seit Google 2019 für Affiliate und Werbung Pflicht.
ugc: User-Generated Content – Forum-Beiträge, Kommentare, Gästebücher.
noopener noreferrer: Sicherheits-Attribute bei target=_blank gegen Tabnabbing.

Spezielle Link-Typen

mailto:: E-Mail-Link öffnet das Mail-Programm des Users.
tel:: Telefon-Link öffnet das Wahlprogramm auf Mobilgeräten.
Anker (#): Sprungmarke innerhalb derselben Seite (z.B. href="#kontakt").
download: Datei-Download statt Navigation – funktioniert nur same-origin.

Wie ein Hyperlink korrekt gebaut wird

Der HTML-Link-Aufbau in seiner Reihenfolge – jedes Attribut hat einen klar definierten Zweck.

1<a-Tag öffnen mit href als Pflicht-Attribut.
2URL als Wert für href setzen (mit Anführungszeichen).
3Optional: target für Öffnungs-Verhalten festlegen.
4Optional: rel-Attribute für SEO und Sicherheit setzen.
5Optional: download für Datei-Downloads (nur same-origin).
6Optional: title für Tooltip-Text bei Hover.
7Linktext zwischen <a> und </a> einfügen.
8Tag mit </a> schließen.

Häufige Hyperlink-Beispiele

Typische Konstruktionen mit ihrem Code.

Use-Case	URL	Wichtige Attribute	Beispiel-Code
Externer Link	https://example.com	target="_blank" rel="noopener"	<a href="..." target="_blank" rel="noopener">Text</a>
Interner Link	/seite	(keine)	<a href="/seite">Text</a>
Anker (Sprungmarke)	#abschnitt	(keine)	<a href="#abschnitt">Text</a>
E-Mail	mailto:test@example.de	(keine)	<a href="mailto:...">Text</a>
Telefon (Mobile)	tel:+4915123456789	(keine)	<a href="tel:...">Anrufen</a>
Affiliate-Link	https://shop.com/...	rel="sponsored noopener"	<a href="..." rel="sponsored noopener">Produkt</a>
Forum-Link (UGC)	https://...	rel="ugc nofollow"	<a href="..." rel="ugc nofollow">Quelle</a>
PDF-Download	/dokument.pdf	download	<a href="..." download>Download</a>

Häufig gestellte Fragen

Anleitung

1
URL eingeben
Trage die Ziel-Adresse ein – eine Webseite, mailto:-E-Mail, tel:-Telefon oder einen Anker.
2
Linktext festlegen
Was soll der User sehen und anklicken? Beschreibender Text statt „Hier klicken“ – das hilft auch der SEO.
3
Attribute wählen
target für das Tab-Verhalten, rel für SEO und Sicherheit. Bei _blank automatisch noopener vorgeschlagen.
4
Code kopieren
Der HTML-Code aktualisiert sich live. Mit einem Klick in die Zwischenablage übernehmen.

Über Selbststarter

Selbststarter ist deine Sammlung kostenloser Online-Tools – aktuell Generatoren, bald auch Konverter und mehr. Alle Tools laufen im Browser, ohne Anmeldung, ohne Tracking.

#html
#frontend
#seo
#links
#webentwicklung