This content originally appeared on DEV Community and was authored by Joel Humberto Gómez Paredes
Uno de los atributos mas importantes para tu web es el “discoverability” por esto me refiero a como el usuario encuentra tu producto. En este caso me enfocaré en la web. Hay muchos medios por el cual el usuario encuentra tu web pero sin duda alguna mucho de ese tráfico será mediante el buscador.
Mediante el Search Engine Optimization (SEO) podemos hacer modificaciones a nuestra web para incrementar nuestro ranking y sobresalir entre otras opciones (competencia).
Hay muchas formas de optimizar pero en este post me enfocaré en el contenido y una parte que casi no he visto que se aborde son los fragmentos de texto (text fragments).
En el mundo de la web, el contenido es el rey
De las partes que forman una URL sin duda alguna hemos visto fragmentos pero seguramente no hemos usado fragmentos de texto.
Un fragmento de texto nos permite compartir un link hacia nuestro contenido, que el navegador haga scroll hacia el fragmento y que se aplique un highlight para que el usuario pueda visualizarlo.
¿Porqué es importante?
Permite que el usuario encuentre lo que busca de manera rápida, incluso los buscadores ofrecen esos fragmentos como referencia y también nos da la posibilidad de priorizar el contenido mas relevante dentro de nuestra web si queremos hacer difusión.
Esta feature esta definida en los estándares web de la comunidad por si quieren darle un vistazo 🙂
¿Cómo la uso?
Primero analicemos la sintaxis
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
En la URL observamos que después del símbolo de hash # se encuentran los siguientes simbolos :~:, a esto se le conoce como fragment directive. Esta directiva le dice al browser que debe buscar una secuencia de texto (básicamente es como un CTRL + F o Command + F).
La directiva de texto text= nos indica el fragmento de texto que se va a buscar. Una nota importante es que el texto a buscar debe esta codíficado para que se pueda buscar.
La forma más simple de utilizar un fragmento de texto es: codificar un texto y agregalo después de la directiva. Ejemplo
Anteriormente te había dicho que es como un CTRL + F o Command + F pero podemos agregar como debe terminar el fragmento de texto, hasta prefijos y sufijos (ambos opcionales).
Voy a usar como ejemplo el siguiente codePen
Cuando solo usamos #:~:text=texto solo buscará ese texto observen. Por cierto, esto no funciona en iframes y si no hace hightlight puede ser que algún input este robando foco.
Si agregamos la palabra “anterior”:
https://codepen.io/dezkareid/pen/XJXpXaJ#:~:text=texto,anterior
Veremos como selecciona mas de una línea porque le indicamos que el fragmento de texto debe iniciar y terminar.
Si queremos agregar un prefijo lo único que debemos hacer es agregarlo al principio del valor de la directiva seguido de un dash -, aquí yo estoy usando la palabra prefijo:
https://codepen.io/dezkareid/pen/XJXpXaJ#:~:text=prefijo-,texto,anterior
En este ejemplo notarás que el prefijo no se selecciona, esto es porque se usa como criterio de búsqueda pero lo que define la selección.
Si queremos usar un posfijo sería muy similar al prefijo pero este debe ir al final y el dash se pone al principio del texto.
https://codepen.io/dezkareid/pen/XJXpXaJ#:~:text=texto,anterior,-posfijo
Adicionalmente si quieren agregar estilos custom a la selección pueden usar el pseudo-selector ::target-text. Este esta disponible según Baseline desde el 2024.
Dónde puedo usarla
Contenidos como blogposts y artículos son ideales porque quieres transmitir una idea principal, algo que aporta valor y que si bien se puede actualizar o “cambiar”, normalmente el cambio son correcciones o nuevos aportes.
No deberías usar esto en contenido que cambia constantemente porque si el contenido cambia el link deja de ser útil.
Hay que ser cuidadosos con estos links y no usarlos para todo porque se puede volver inmantenibles en contenido que cambia constantemente.
Conclusiones
Esta feature es algo simple pero que puede apoyar a tener mejor discoverability de su contenido, ya sean en sus estrategias de tráfico orgánico, marketing, campañas, etc. Ya que permite que sus usuarios encuentren el contenido que ustedes quieren que destaque.
Espero les haya gustado y lo compartan 😀
This content originally appeared on DEV Community and was authored by Joel Humberto Gómez Paredes