¿Cómo funciona `#:~:text=` en URL para resaltar texto?

TL;RD

¿Cómo/por qué algunos navegadores pueden buscar y resaltar texto en el cuerpo HTML seguido de #:~:text= en la URL?

Explicación

Un día estaba buscando algo en Google, lo que me llevó a Quora’s resultado. Observé que estaban resaltadas en amarillo 2 oraciones, que formaban parte de la URL después del parámetro antes mencionado. Pensé que esta sería la característica de Quora para SEO o algo así, sin embargo, también encontré esto en LinkedIny Medioetcétera.

Me gustaría saber:

1. ¿Cómo se llama este resaltado? ¿Por qué/cómo funciona?
2. Esto parece ser específico del navegador. Qué amable de los navegadores admiten esto?
   Parece funcionar en Chrome y Edge; pero no en Firefox, Safari e IE.
3. ¿Un programador frontend necesita incorporar algo en el código para que los motores de búsqueda destaquen el contenido en sus páginas web? (Basado en la suposición de que los motores de búsqueda realmente agregan la cadena relevante predicha por la consulta del usuario)

1. El resaltado se llama Fragmentos de texto. Es una nueva función que se agregó recientemente a Chrome 80. Funciona especificando un fragmento de texto en el hash de la URL.

2. Sí, es específico del navegador.

3. No, la experiencia que obtiene al hacer clic en un enlace de los resultados de búsqueda de Google es parte de los fragmentos destacados que se determinan mediante algoritmos. No hay nada que pueda incorporar en su código para solicitar a los motores de búsqueda que resalten el texto en su página.

Los webmasters no necesitan marcado. Esto sucede automáticamente, usando Scroll To Text para páginas HTML
https://chromestatus.com/feature/4733392803332096. Ver también más antecedentes aquí: https://support.google.com/webmasters/answer/6229325

Fuentes:

• https://web.dev/fragmentos-de-texto/
• 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

Si bien los fragmentos de texto se implementan de forma nativa solo en la última versión de Google Chrome (y las últimas versiones de los navegadores basados ​​en Chromium, como el nuevo Microsoft Edge), hay una extensión/complemento del navegador que parece habilitarlo en Firefox y Safari: https://github.com/GoogleChromeLabs/link-to-text-fragment

parece usar #ref-for-fragment-directive:~:text= y argumentos adicionales (en lugar de simples #:~:text=).

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

Curiosamente, la extensión también está disponible para Chrome y Edge (!).

.

ACTUALIZACIÓN: lo estoy probando en Firefox Developer Edition y no me funciona.

Quiero decir algunas palabras con respecto a la pregunta 2.

Esta característica es específica del navegador. Funciona en Chrome 80 y otros navegadores basados ​​en Chrome como Edge. Desafortunadamente, Safari y Firefox no tienen la misma funcionalidad.

Cuando se trata de Safarise dice que hay una extensión de la versión de Safari llamada Link to Text Fragment, cuya contrapartida en Chrome funciona a la perfección. Funciona agregando el texto seleccionado con el prefijo de #:~:text= después de la URL actual. Sin embargo, después de probarlo, descubrí que no funcionaba en Safari. Y el calificaciones y reseñas de los usuarios confirmó su mal funcionamiento.

Como solución alternativa, descubrí 2 métodos.

[] Primero, puede crear su propia ‘extensión’ con una línea de código JS. Simplemente agregue un nuevo marcador en Safari. Dale un nombre y edita su URL como

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

Esto se llama bookmarklet. Luego, después de seleccionar un bloque de texto en una página web, haga clic en este nuevo marcador que acaba de crear. Se le abrirá una nueva página con la URL adjunta. Recuerda que en la nueva página, el texto que seleccionaste no se mostraría resaltado, ya que #:~:text= solo funciona en navegadores basados ​​en Chrome. Pero la nueva URL generada te será útil.

[] El segundo método se implementa dentro de QuickNote de MacOS. Mira esto enlace out, diciendo después de crear un enlace usando Add to Quick Note en el menú contextual,

“Aparece un enlace a la página web en la Nota rápida y el texto en Safari está resaltado. Cuando vuelve a visitar el sitio web, su resaltado sigue allí y aparece una miniatura de la Nota rápida en la esquina inferior derecha de la pantalla. “

Luego, el texto resaltado en la página web podría compartirse con los usuarios de MacOS.

Creo que estos serían muy útiles para aquellos que lo necesitan. ^^

Actualizaciones: Resulta que #:~:text= es compatible con la versión 16.1+ de Safari.