Auf einen Satz verlinken: Text-Fragment-URLs

Link zu markiertem Text

Auf Text verlinken: Text-Fragment-URLs und Link zur Markierung | We.Inc

Erstelle mit #:~:text= einen Link, der auf jeder Seite zu einem Satz scrollt und ihn markiert. Syntax, Kodierungsregeln, Browser-Unterstützung, Styling mit ::target-text und ein Link-Generator.

Ein Text-Fragment ist ein Zusatz zu einer Webadresse, #:~:text= gefolgt von Wörtern der Seite, der den Browser zu diesen Wörtern scrollen und sie markieren lässt. Der Menüpunkt Link zur Markierung kopieren in Chrome erstellt ihn für dich, und du kannst ihn auch von Hand bauen, mit optionalen Teilen für Anfang, Ende, Präfix und Suffix.

Erste Browserversionen mit Unterstützung für Text-Fragmente (caniuse, Oktober 2026)

Browser
Unterstützt ab

Chrome

Edge

Safari

Firefox

Einen Kunden direkt zur richtigen Zeile deiner Rückgaberichtlinie zu schicken oder einen Auftraggeber auf einen Absatz eines langen Angebots hinzuweisen, ist besser als "scroll ein bisschen nach unten". Text-Fragment-Links schaffen das mit nichts als einer längeren URL; der Seiteninhaber muss keine Anker setzen. Füge eine Seitenadresse und eine Textstelle in den Generator ein, um einen zu erstellen.

Kopiere die Adresse der Seite, auf die du verlinken willst.
Kopiere die genauen Wörter, die markiert werden sollen, von dieser Seite und halte jeden Teil innerhalb eines einzelnen Absatzes oder einer Überschrift.
Gib bei einer langen Passage nur die ersten Wörter als Anfang und die letzten als Ende an.
Ergänze ein Präfix oder Suffix nur, wenn dieselben Wörter mehr als einmal auf der Seite vorkommen.

Beim Abgleich wird Groß- und Kleinschreibung ignoriert, die Schreibweise deiner Wörter spielt also keine Rolle.
Wenn nichts passt, wird das Fragment laut MDN ignoriert und die Seite öffnet sich oben, ein kaputter Link scheitert also sanft.
Wird die Seite später bearbeitet, markiert der Link womöglich nichts mehr. Wähle Formulierungen, die sich wahrscheinlich nicht ändern.
Um zwei getrennte Passagen zu markieren, verbinde sie mit einem kaufmännischen Und: #:~:text=first&text=second.

Häufige Fragen

Wie kopiere ich in Chrome einen Link zu markiertem Text?

Markiere den Text auf der Seite, klicke mit der rechten Maustaste darauf und wähle Link zur Markierung kopieren. Die Chrome-Hilfe weist darauf hin, dass die Funktion für diesen Inhalt eventuell nicht funktioniert, wenn du diese Option nicht auswählen kannst.

Funktionieren Text-Fragment-Links in Firefox und Safari?

Ja, in aktuellen Versionen. caniuse nennt Unterstützung ab Safari 16.1 und Firefox 131, dazu Chrome 81 und Edge 83. Ältere Browser öffnen die Seite einfach oben.

Warum markiert mein Text-Fragment-Link nichts?

Die Wörter stehen vielleicht nicht genau so auf der Seite, ein Teil erstreckt sich über zwei Absätze, oder ein Bindestrich im Text wurde nicht prozentkodiert. Text innerhalb eines iframe wird laut MDN nie durchsucht.

Können meine eigenen Skripte das Text-Fragment lesen?

Nein. MDN erklärt, dass Browser die Direktive :~: beim Laden aus der URL entfernen, sodass Seitenskripte sie nicht lesen können. Unterstützung erkennst du mit document.fragmentDirective.

Kann ich verhindern, dass andere auf diese Weise auf Text meiner Website verlinken?

Laut MDN beachten Chromium-basierte Browser den Response-Header Document-Policy: force-load-at-top, mit dem eine Seite das Scrollen zu Text-Fragmenten abschaltet.

Die Teile der Syntax

Die vollständige Form lautet #:~:text=[prefix-,]textStart[,textEnd][,-suffix]. Nur textStart ist Pflicht. Mit textEnd markiert der Browser alles von den Anfangswörtern bis zu den Endwörtern.
Das Präfix endet mit einem Bindestrich und das Suffix beginnt mit einem. Sie werden nicht markiert; sie sagen dem Browser nur, welches Vorkommen einer wiederholten Formulierung gemeint ist.

Kodierungsregeln

Jeder Teil muss prozentkodiert werden, wodurch Leerzeichen zu %20 werden. MDN ergänzt, dass der Bindestrich selbst als %2D kodiert werden muss, weil ein nackter Bindestrich als Markierung für Präfix oder Suffix gelesen würde.
Kommas und kaufmännische Und trennen Teile und Fragmente, daher verhindert ihre Kodierung als %2C und %26, dass sie falsch gelesen werden. Der Generator auf dieser Seite erledigt das alles für dich.

Beispiele für jede Form

Formen von Text-Fragmenten und was sie markieren

Fragment
Markiert

Den ersten Treffer für "opening hours"

Von "Delivery takes" bis "business days"

"closed" nur dort, wo es auf "Saturday" folgt

Das erste "price" und das erste "deposit"

Die Markierung auf deiner eigenen Website gestalten

Browser wählen eine Standardfarbe für die Markierung. Mit dem Pseudo-Element ::target-text passt du sie an deine Marke an.

Eigene Farben für ::target-text

Achte auf starken Kontrast zwischen Text und Markierungsfarbe.

Feature-Erkennung

document.fragmentDirective ist in unterstützenden Browsern ein Objekt und anderswo undefined.

Generator für Text-Fragment-Links

Seitenadresse

Zu markierende Wörter (oder der Anfang einer langen Passage)

Ende der Passage (optional)

Wörter direkt davor (optional)

Wörter direkt danach (optional)

Dein Link

Link in neuem Tab öffnen

Gib eine vollständige Adresse ein, die mit https:// beginnt

Gib die zu markierenden Wörter ein.

Kostenlos starten · Keine Kreditkarte nötig

Verwandt: Ratgeber

Produkt

Für wen

Funktionen

Ressourcen

Unternehmen

Sitemap