Wie funktioniert „#:~:text=“ in der URL, um Text hervorzuheben?

TL;DR

Wie/warum sind einige Browser in der Lage, Text im HTML-Text, auf den folgt, zu durchsuchen und hervorzuheben? #:~:text= in der URL?

Erläuterung

Eines Tages suchte ich etwas auf Google, was mich zu Quora führte Ergebnis. Mir ist aufgefallen, dass zwei Sätze gelb hervorgehoben waren, die Teil der URL nach dem oben genannten Parameter waren. Ich dachte, das wäre Quoras SEO-Funktion oder so, habe das aber auch gefunden LinkedinUnd Mittelusw.

Ich würde gerne wissen:

1. Wie heißt diese Hervorhebung? Warum/wie funktioniert es?
2. Dies scheint browserspezifisch zu sein. Was Art der Browser unterstützen dies?
   Es scheint auf Chrome und Edge zu funktionieren; aber nicht auf Firefox, Safari und IE.
3. Muss ein Frontend-Programmierer etwas in den Code integrieren, damit Suchmaschinen Inhalte auf ihren Webseiten hervorheben? (Basierend auf der Annahme, dass Suchmaschinen tatsächlich die relevante Zeichenfolge anhängen, die durch die Suchanfrage des Benutzers vorhergesagt wurde.)

1. Die Hervorhebung wird aufgerufen Textfragmente. Es handelt sich um eine neue Funktion, die kürzlich zu Chrome 80 hinzugefügt wurde. Sie funktioniert durch die Angabe eines Textausschnitts im URL-Hash.

2. Ja, es ist browserspezifisch.

3. Nein, das Erlebnis, das Sie erhalten, wenn Sie in den Google-Suchergebnissen auf einen Link klicken, ist Teil der Featured Snippets, die algorithmisch ermittelt werden. Sie können nichts in Ihren Code integrieren, um Suchmaschinen dazu zu veranlassen, Text auf Ihrer Seite hervorzuheben.

Webmaster benötigen kein Markup. Dies geschieht automatisch, wenn „Zum Text scrollen“ für HTML-Seiten verwendet wird
https://chromestatus.com/feature/4733392803332096. Weitere Hintergrundinformationen finden Sie hier: https://support.google.com/webmasters/answer/6229325

Quellen:

• https://web.dev/text-fragments/
• https://www.theverge.com/2020/6/4/21280115/google-search-engine-yellow-highlight-featured-snippet-anchor-text
• https://www.theverge.com/2020/6/18/21295300/google-link-to-text-fragment-chrome-extension-chromium-highlight-scroll-down
• https://searchengineland.com/google-launches-featured-snippet-to-web-page-content-highlight-feature-335511
• https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html

Während Textfragmente nur im neuesten Google Chrome (und den neuesten Versionen von Chromium-basierten Browsern wie dem neuen Microsoft Edge) nativ implementiert sind, gibt es eine Browsererweiterung/ein Browser-Add-on, das sie offenbar in Firefox und Safari ermöglicht: https://github.com/GoogleChromeLabs/link-to-text-fragment

Es scheint zu gebrauchen #ref-for-fragment-directive:~:text= und zusätzliche Argumente (statt nur einfach #:~:text=).

• Feuerfuchs: https://addons.mozilla.org/firefox/addon/link-to-text-fragment/
• Safari: https://apps.apple.com/app/link-to-text-fragment/id1532224396

Kurioserweise wurde die Erweiterung auch für Chrome und Edge (!) verfügbar gemacht.

.

UPDATE: Ich teste es auf der Firefox Developer Edition und es funktioniert bei mir nicht.

Ich möchte ein paar Worte zu Frage 2 sagen.

Diese Funktion ist browserspezifisch. Es funktioniert auf Chrome 80 und anderen Chrome-basierten Browsern wie Edge. Leider verfügen Safari und Firefox nicht über die gleiche Funktionalität.

Wenn es darum geht SafariEs heißt, dass es eine Safari-Versionserweiterung namens gibt Link to Text Fragment, dessen Gegenstück in Chrome perfekt funktioniert. Es funktioniert, indem Sie Ihren ausgewählten Text mit dem Präfix anhängen #:~:text= nach der aktuellen URL. Nach dem Testen stellte ich jedoch fest, dass es in Safari nicht funktionierte. Und das Benutzerbewertungen und Rezensionen bestätigte seine Fehlfunktion.

Als Workaround habe ich zwei Methoden herausgefunden.

[] Erstens können Sie Ihre eigene „Erweiterung“ mit einer Zeile JS-Code erstellen. Fügen Sie einfach ein neues Lesezeichen in Safari hinzu. Geben Sie ihm einen Namen und bearbeiten Sie seine URL als

javascript:(function(){const%20selectedText=getSelection().toString();const%20newUrl=new%20URL(location);newUrl.hash=`:~:text=${encodeURIComponent(selectedText)}`;window.open(newUrl);})();

Dies wird als Lesezeichen bezeichnet. Klicken Sie dann, nachdem Sie einen Textblock auf einer Webseite ausgewählt haben, auf dieses neue Lesezeichen, das Sie gerade erstellt haben. Eine neue Seite mit der angehängten URL wird für Sie geöffnet. Denken Sie daran, dass der von Ihnen ausgewählte Text auf der neuen Seite nicht hervorgehoben angezeigt wird #:~:text= Funktioniert nur auf Chrome-basierten Browsern. Aber die neu generierte URL wird für Sie nützlich sein.

[] Die zweite Methode ist in QuickNote von MacOS implementiert. Überprüfen Sie dies Verknüpfung aus, sagen Sie, nachdem Sie einen Link mit erstellt haben Add to Quick Note im Rechtsklick-Menü,

„Ein Link zur Webseite erscheint in der Kurznotiz und der Text in Safari wird hervorgehoben. Wenn Sie die Website erneut besuchen, ist Ihre Markierung immer noch da und eine Miniaturansicht der Kurznotiz erscheint in der unteren rechten Ecke des Bildschirms. “

Dann könnte der hervorgehobene Text auf der Webseite mit MacOS-Benutzern geteilt werden.

Ich denke, diese wären für Bedürftige sehr nützlich. ^^

Updates: Es stellt sich heraus #:~:text= wird für Safari Version 16.1+ unterstützt!