Si es propietario de un sitio de WordPress, asegurarse de que sus visitantes siempre tengan una experiencia de usuario fluida e impecable al navegar por su sitio web debe ser una de sus prioridades. Un usuario típico no pasará demasiado tiempo en su página antes de determinar si quiere seguir navegando o si quiere irse por completo. Por lo tanto, en realidad no tiene más de unos segundos para que se queden.
Por supuesto, esto se puede lograr utilizando muchas estrategias diferentes, pero cuando se trata de mejorar la experiencia del usuario en su sitio, nada supera a la navegación sólida del sitio web. Ahora, cuando decimos navegación en un sitio web, nos referimos a la creación de diferentes menús de navegación, botones de llamada a la acción y la difusión de diferentes tipos de enlaces de navegación en todo su sitio, incluidos los enlaces de anclaje. Y esta vez nos centraremos en los enlaces de anclaje en particular.
Los enlaces de anclaje tienen el poder de mejorar la experiencia de usuario de sus visitantes, ya que les permiten acceder rápidamente a la sección que les interesa. Estén atentos a medida que analizamos la importancia de este tipo de enlaces y le mostramos algunas de las mejores formas de agregarlos a su sitio de WordPress, tanto en el Gutenberg y editor clásico.
Cubriremos:
Como ya mencionamos, los enlaces de anclaje son elementos de navegación bastante útiles ya que tienen la capacidad de llevar a los usuarios a un área específica en la misma página, lo que les permite llegar rápidamente a la sección que les interesa. También conocido como tabla de contenido, Estos tipos de enlaces se utilizan a menudo en formas de contenido más largas, como diferentes tipos de artículos, secciones de preguntas frecuentes o listas de productos o servicios, por ejemplo.
Además de mejorar en gran medida la UX de su sitio web en general, los enlaces de anclaje también pueden tener una influencia positiva en el SEO de su sitio web. Es decir, Google tiene una tendencia a mostrar sus enlaces de anclaje en forma de un enlace «saltar a» en los resultados de búsqueda, especialmente si los usuarios escriben las palabras clave contenidas en su enlace de anclaje. Todo esto puede mejorar su tasa de clics y, por extensión, atraer más tráfico a su sitio web.
Además, si enumera sus enlaces de anclaje como una tabla de contenido, Google puede decidir mostrarlos como un fragmento enriquecido, como este:
Ahora que hemos cubierto algunas de las razones básicas por las que los enlaces de anclaje pueden ser valiosos para un sitio web, echemos un vistazo a cómo puede agregarlos en WordPress.
Para que sus enlaces de anclaje funcionen, hay dos cosas que debe hacer: primero, debe agregue un signo # antes de su texto de anclaje, y luego agregue el atributo ID al texto al que desea que se dirija a los usuarios al hacer clic en el enlace de anclaje.
Para crear su enlace de anclaje en Gutenberg, debe seleccionar el texto que desea tener como su ancla y presionar el Enlace botón.
Aparecerá una ventana emergente donde normalmente puede agregar una URL de enlace.
Pero en lugar de hacer eso, necesitas incluya un prefijo # e inserte las palabras clave para el área específica a la que desea que los usuarios salten al hacer clic en este tipo de enlace. Por supuesto, debe usar las palabras clave relacionadas con la sección de anclaje para la que está creando un enlace. También recomendamos usar guiones y / o mayúsculas para que su texto de anclaje sea más legible en general. Aquí hay un ejemplo de un prefijo #:
#Productos para el cabello
Presione el botón Enter para terminar de agregar su enlace de anclaje. Después de hacer esto, podrá ver el enlace de anclaje en el editor, pero no podrá hacer clic en él, ya que aún necesita crear una identificación para él.
Para agregar una ID al enlace de ancla, debe busque la sección a la que desea que los usuarios sean dirigidos al hacer clic en su enlace.
Para vincular a una sección de encabezado, seleccione el bloque deseado y elegir el Avanzado pestaña. Entonces, en el Ancla HTML campo, deberías agregue el mismo texto que usó para su enlace de anclaje – la única diferencia es que debes omita el prefijo #.
Entonces, puedes presionar el Publicar / Actualizar (o Guardar borrador) y obtenga una vista previa de su enlace de anclaje para ver cómo se ve en vivo.
Si desea vincular a cualquier otra sección que no sea un encabezado (como un párrafo u otros tipos de bloque), haga clic en un icono de menú de tres puntos (en el bloque mismo) y luego seleccione el Editar como HTML botón.
Ahora, busque la etiqueta HTML para la sección o elemento específico. Por ejemplo, <p> es un párrafo, <h2>, <h3>, etc. son títulos, y así sucesivamente.
Una vez que encuentre su elemento, simplemente adjunte un atributo de ID junto con su ancla a la etiqueta HTML.
Como esto:
<p >
Una vez que vea un mensaje que le dice que este bloque contiene contenido inesperado o no válido, debe haga clic en el Convertir a HTML botón.
Y eso es todo: ha agregado con éxito un enlace de anclaje a una sección específica en su párrafo, o cualquier otro bloque de su elección.
En caso de que prefiera utilizar el editor clásico, también puede, por supuesto, crear enlaces de anclaje desde este editor. Así es como puede hacerlo.
Lo primero es lo primero, seleccione el texto del enlace de anclaje deseado y presione el Insertar / Editar botón de enlace.
Luego, agregue un prefijo # y un slug para su enlace.
Una vez que haya terminado con este paso, debe agregue su atributo de ID a la sección a la que desea que naveguen sus usuarios al hacer clic en su enlace.
Cambia tu modo a Texto primero, y luego busque la etiqueta HTML de la sección a la que desea agregar el atributo de ID (igual que <h2>, <p>, etcétera).
Agregue su atributo de ID junto con la barra de su enlace de anclaje, pero sin el prefijo #. Por ejemplo:
<p> id=“Hair-Products”>
Asegúrese de presionar publicar / actualizar su página / publicación y luego obtener una vista previa para ver cómo se ve su enlace de anclaje.
Si prefiere escribir y editar su contenido usando el modo Texto por completo, también puede usarlo para crear sus enlaces de anclaje usando HTML desde cero.
Una vez en el Texto modo, puedes crea tu enlace de anclaje usando el <a href-“ “> etiqueta. A continuación, se muestra un ejemplo de cómo puede verse su enlace de anclaje en HTML:
<a href="#Hair-Products">Hair Products</a>
Luego, busque el área donde desea que los usuarios sean llevados al hacer clic en el enlace de anclaje (un encabezado que generalmente se marca como <h2> y <h3>, un párrafo marcado como <p>, etc.) y agregue su atributo de ID a la etiqueta HTML (una vez más, sin el prefijo #):
<p> > Hair Products</p>
Después de guardar sus cambios, continúe y obtenga una vista previa de cómo se ve su enlace de anclaje.
Si crea y publica regularmente contenido de formato largo en su sitio (como artículos particularmente extensos, por ejemplo), es posible que también desee considerar agregar enlaces de anclaje automáticamente para acelerar el proceso. Afortunadamente, WordPress tiene una vasta comunidad en línea que crea regularmente muchas herramientas y complementos útiles, muchos de los cuales se pueden usar de forma gratuita. Entre esos complementos también hay un complemento llamado Tabla de contenido fácil, que puede utilizar para crear enlaces de anclaje en su sitio web automáticamente.
Como sugiere su nombre, este complemento le permitirá crear fácilmente una tabla de contenido con una lista de enlaces de anclaje y agregarla a sus páginas, publicaciones y / o tipos de publicaciones personalizadas. Tu también puedes habilite la opción de inserción automática para agregar sus enlaces de anclaje automáticamente, o tu puede desmarcar esta opción y configurar la tabla de contenido solo para páginas / publicaciones específicas.
Ya tenemos un artículo que habla en profundidad sobre cómo agregar una tabla de contenido en WordPress usando este práctico complemento, por lo que le recomendamos que lo consulte si desea dividir sus páginas o publicaciones en diferentes secciones para una mejor navegación.
Terminando las cosas
Los enlaces de anclaje pueden ser una gran adición a cualquier sitio web, ya que permiten a los usuarios saltar rápida y fácilmente a la sección que desean leer. A su vez, pueden ayudar a mejorar su navegación y mejorar la UX de su sitio web en su conjunto. Agregar este tipo de enlaces a sus páginas o publicaciones puede parecer complejo al principio, pero cuando observe más de cerca las instrucciones que presentamos anteriormente, se dará cuenta de que este proceso no es nada difícil. Solo asegúrate de seguir cuidadosamente todos los pasos y estarás listo.
Apoya nuestro trabajo ❤️
Si te ha gustado este artículo, considera dejar una propina para ayudarnos a seguir publicando contenido de calidad.
