Los saltos de enlace o también conocidos como enlaces ancla, son muy útiles y fáciles de implementar en nuestra página web. Son vínculos que se emplean para llevarte a una parte específica de una determinada página, post, texto, o incluso a una página externa. En este artículo te vamos a explicar cómo usarlos para que te lleven a una zona de la misma página.
Cuándo utilizar enlaces ancla, ventajas e inconvenientes
Es interesante utilizar enlaces ancla en páginas o entradas de contenido muy extenso, porque diriges al usuario a las partes más importantes, mejorando de esta forma la experiencia de usuario.
Por otro lado, también conviene utilizarlos si estamos realizando una estrategia SEO de contenidos, ya que los enlaces ancla pueden convertirse en featured snippets en la página de resultados de Google.
Pasos a seguir para crear saltos de enlaces
Ahora que ya conocemos lo que es un salto de enlace procedemos a crear uno en nuestra página web. Debemos tener algo similar a la imagen que se muestra más abajo:
Bien, a modo de ejemplo crearemos un enlace que nos lleve desde la palabra hosting que se encuentra al inicio del artículo, hasta la sección ¿Qué es un hosting?
La finalidad de crear este enlace es que nos sea de utilidad para aquellos que no conozcan la terminología y quieran acceder a ella rápidamente sin tener que recurrir a sitios externos.
Existen muchos otros motivos por los que querríamos crear saltos de enlace como pueden ser:
- Una página con índice que contenga enlaces ancla para llevarte a cada encabezado
- Notas a pie de página
- Volver al inicio cuando te encuentras al final del artículo
- Crear webs de una sola página y que los menús lleven directamente a cada sección
Es muy importante tener claro y diferenciar que el “enlace” es la parte de la página donde se establece el enlace y el “texto de destino” es la parte de la página a la que nos envía el enlace. Una vez entendamos esto ya podemos comenzar a crear nuestro salto de enlace en cuatro sencillos pasos:
Paso 1. Localizar el punto de inicio y crear el punto de destino
Primero tenemos que ir a la parte superior de la página y localizar el texto que deseamos convertir a enlace para que nos lleve a una sección distinta de nuestra página. Después más abajo en el cuerpo de la página tendremos distintos subtítulos o partes del texto a los que enlazarnos.
Como hemos mencionado vamos a vincular la palabra hosting con el subtítulo correspondiente. Para esto debemos comenzar desde el subtítulo que va a ser enlazado.
Paso 2. Ubicar el punto final del salto en HTML
Como sabes en WordPress existen dos formas para editar el contenido; Visual o Texto. Ahora vamos a pasar a trabajar con la vista HTML, es decir, entramos en la parte de texto.
Una vez hecho esto podemos ver que el texto de nuestro artículo sigue igual solo que intercalado entre distintas etiquetas de HTML. Lo que debemos hacer es encontrar el subtítulo al que nos va a llevar nuestro salto de enlace.
Paso 3. Agregar el atributo ID
Cuando conseguimos ubicar el subtítulo pasamos a agregarle el atributo ID, esto es simplemente un único identificador que actúa como etiqueta para el texto de destino. Este ID puede ser cualquier texto, pero evitemos usar espacios y caracteres especiales.
Por ejemplo tenemos el siguiente código:
Y lo convertimos en lo siguiente:
Recuerda que hay que dejar un espacio antes del id, pero no debe haber separación entre las comillas (“) de cierre y el símbolo de mayor que (>)
Paso 4. Crear el salto de enlace
Ahora procedemos a crear el enlace ancla, para esto podemos volver a la vista de diseño visual y asegurarnos que el texto y el subtítulo están correctamente. Una vez revisado seleccionamos el texto inicial y aparecerá una ventana emergente para añadir el enlace.
Dado que el contenido al que queremos vincularnos se encuentra en la misma página, debemos colocar una almohadilla (#) seguido del identificador (id) que hemos creado antes (#hosting).
Finalmente hacemos clic en el botón de “Añadir enlace” para guardar el vínculo. Ahora deberíamos comprobar que funciona correctamente. Tan sencillo como comprobarlo haciendo clic en la palabra enlazada, si nos lleva a la sección que queremos, ¡ya lo tenemos!
Esperamos que os haya resultado muy útil este artículo, cualquier duda o aporte, ¡Os leemos en los comentarios! 😊