Los enlaces ancla no es un tema que se discuta mucho, ¡pero hemos tenido excelentes resultados con ellos! El día de hoy nos adentraremos sobre cómo crear enlaces ancla en WordPress y explorar la razón por la que es buena idea usarlos. Según nuestra experiencia, los enlaces ancla pueden ayudar a mejorar la experiencia del usuario, ayudar a navegar contenido largo de forma más sencilla, e incluso darle una pequeña ventaja en Google. ¿Y quién no quiere tener esta ventaja gratuita en Google? 😉
¿Qué Son los Enlaces Ancla?
Los enlaces ancla, también conocidos como enlaces de menú de salto o índice, son enlaces que instantáneamente llevan uno a una parte especifica de la página (o una página externa). Los destinos de ancla son típicamente especificados utilizando el elemento A (poniéndole el nombre del atributo) o con otro elemento (poniéndole el nombre de la ID del atributo). Ambos métodos cumplen con los estándares W3C (fuente).
Ejemplo de un Enlace Ancla
Si aún está confundido sobre lo que hacen los enlaces ancla, no se preocupe. Vea el ejemplo de la imagen de abajo. Estamos usando enlaces ancla en cada uno de estos artículos en la lista. Cuando usted da clic en alguno de estos, le llevara directo al encabezado H2 que contiene el contenido. Puede checar estos por su cuenta más abajo en el articulo. Los enlaces ancla pueden ser usados en todo, como texto, imágenes y encabezados H1-H6.
En muchos sitios, los enlaces ancla son usados principalmente como índice al principio de un largo articulo. Si usted sabe un poco de CSS, usted puede ponerse creativo y hacerlos lucir un poco más estilizados, como nosotros hemos hecho con nuestras páginas de aterrizaje.
En otros sitios, puede que no vea el enlace ancla, estos son usados en encabezados simplemente para que puedan compartir los enlaces directamente a secciones especificas.
Ventajas e Inconvenientes de los Enlaces Ancla
Sólo porque estamos haciendo algo no quiere decir que deba hacerlo. Aquí tenemos algunas ventajas e inconvenientes a considerar al usar enlaces ancla para su sitio de WordPress.
Pros
- Una de las grandes ventajas de los enlaces ancla es el poder crear una mejor experiencia de usuario al navegar su sitio. Esto es especialmente cierto cuando se trata de artículos con mucho contenido. Nosotros publicamos mucho contenido detallado (más de 4,000 palabras) y tener que desplazarse por todo es fatigante. El utilizar enlaces ancla nos permite que los usuarios puedan saltarse de forma instantánea a la sección que les interesa. Ayude a sus usuarios a encontrar lo que necesitan más rápido.
- Utilizar enlaces ancla en encabezados le permiten a uno poder compartir enlaces directos a distintas secciones dentro del articulo. Esto es fantástico para las redes sociales e incluso para los equipos de soporte. Por ejemplo, nuestro equipo de soporte en Kinsta depende ampliamente de los enlaces ancla en nuestros artículos de la Base de Conocimientos con mucha información, para que podamos mandar al usuario al punto exacto de su duda para resolver un problema. Nuestro equipo de ventas utiliza estos para responder de forma más rápida cualquier duda que uno tenga relacionado a Kinsta.
- Cuando se trata de páginas de los resultados de los motores de búsqueda (SERPs), los resultados siempre pueden variar basado en lo que aparece. Sin embargo, hemos visto en varias ocasiones que los enlaces ancla (menús de salto) aparecen en nuestro listado de SERP porque los hemos usado en nuestros artículos. Estos son fantásticos porque esencialmente le dan a uno otra línea de texto para su listado orgánico. También pueden ayudar a incrementar el CTR ya que el usuario verá algo relacionado a su consulta que uno no haya incluido en la descripción meta o título.
- Enlaces ancla pueden ser usados por otras razones, tal como “volver arriba” que Wikipedia usa con las referencias ^ o notas al pie.[1]
Cons
A pesar de que nosotros creemos que las ventajas superan a las desventajas, aquí tenemos algunos asuntos que podría tomar en cuenta al considerar usarlos.
- Los enlaces ancla o índices podrían reducir el tiempo promedio de la estadía del visitante en su sitio. ¿Por qué? Porque se estarían saltando directo al contenido en lugar de leer su artículo entero. Sin embargo, si hace feliz a su visitante desde el principio, esto podría resultar en una suscripción a sus noticias o investigar un poco más lo que está vendiendo. Así que esto podría ser considerado como una ventaja y una desventaja.
- Este punto está un poco relacionado al anterior, los enlaces ancla podrían impactar las ganancias de sus ads. Si los visitantes se saltan directo a cierta sección podría reducir el número de impresiones y clic. Los sitios que dependen bastante de los anuncios podrían hacer una prueba A/B primero utilizando enlaces ancla e índices.
- Si usted está cambiando dominios o necesita agregar redirecciones 301, es importante tomar en cuenta que el identificador de fragmento (#) nunca es enviado al servidor. Esto puede complicar las situaciones si está cambiando un poco las cosas a lo largo del camino con sus enlaces ancla. Hay formas de evitar esto con JavaScript, pero esto no quiere decir que sea un trabajo fácil.
Transición de Enlace de Ancla
Igual podría ponerse a pensar sobre cambiar la transición del enlace ancla. Por defecto, los enlaces ancla saltarán repentinamente a la ID en la parte final de la página. Esto puede ser un poco incómodo para algunos. Puede cambiar esto para que sea una transición amena. Esto es lo que realmente hacemos en el blog de Kinsta. Puede utilizar un plugin gratuito como Page scroll to id o agregar algo de CSS a su sitio, como scroll-behavior: smooth; . Este articulo de Stack Overflow tiene algunos consejos adicionales para los desarrolladores.
Como con la mayoría de los consejos de WordPress, hay muchas formas distintas de cómo agregar enlaces ancla a WordPress. Cheque estos cuatro sencillos métodos. Y sí, estos enlaces de abajo están utilizando enlaces ancla. 😁
- ¿Cómo Crear Manualmente Enlaces Ancla en WordPress?
- ¿Cómo Crear Enlaces Ancla en WordPress Utilizando un Plugin?
- ¿Cómo Crear Enlaces Ancla en WordPress con Gutenberg?
- ¿Cómo Crear Enlaces Ancla en WordPress con una Extensión de Chrome?
¿Cómo Crear Manualmente Enlaces Ancla en WordPress?
La primera forma para crear enlaces ancla en WordPress es simplemente hacerlo manualmente con HTML en cada una de las publicaciones. Creemos una para que pueda ver cómo funcionan.
Paso 1
Cree un texto para su enlace y agregue un hipervínculo en este como haría con cualquier otro enlace.
Paso 2
En lugar de enlazarlo a su URL, publicación o página; usted lo asignará a un nombre ancla. Las URLs que designan anclas contienen un carácter “#” seguido por el nombre del ancla. Puede nombrarlo como usted quiera, aunque normalmente recomendamos mantenerlo corto y relacionado al nombre real del encabezado.
Si usted observa esta vista del texto (HTML) lucirá así:
<a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a>Aquí hay un ejemplo de los enlaces ancla que estamos utilizando en este articulo:
<ul>
<li><a href="#manually-create-anchor-links-wordpress">How to Manually Create Anchor Links in WordPress</a></li>
<li><a href="#anchor-links-wordpress-plugin">How to Create Anchor Links in WordPress with a Plugin</a></li>
<li><a href="#anchor-links-wordpress-gutenberg">How to Create Anchor Links in WordPress with Gutenberg</a></li>
</ul>Paso 3
Luego, usted necesita agregar una ID en el encabezado adonde quiere que su enlace salte. Para hacer esto, necesitará cambiar a la vista del texto (HTML) en el editor de WordPress. En el encabezado, en este caso, un encabezado H2, agregue la ID junto con el nombre del ancla que eligió en el paso 2. El nombre del ancla y la ID del atributo tienen que ser exactamente los mismos para que el enlace funcione.
<h2 id="manually-create-anchor-links-wordpress">How to Manually Create Anchors Link in WordPress</h2>¿Cómo Crear Enlaces Ancla en WordPress Utilizando un Plugin?
¿No quiere tener que lidiar con código HTML todo el tiempo? No se preocupe, hay algunos plugins gratuitos geniales en WordPress que puede utilizar para agregar enlaces ancla e incluso un índice en cada publicación.
Agregar un Enlace Ancla con un Plugin
Una de las formas más sencillas para agregar enlaces ancla es con el plugin gratuito TinyMCE Advanced. El plugin básicamente agrega funcionalidades extra al editor con botones de atajo. Al momento de escribir este articulo, el plugin ha conseguido más de 2 millones de instalaciones activas con un 4.5 de 5 de calificación.
Paso 1
Después de haber instalado y activado el plugin, vaya a su publicación y cree un hipervínculo en su texto ancla. En lugar de enlazarlo a una URL, publicación o página; usted lo asignará a un nombre ancla precedido con un #.
Paso 2
Resalte el encabezado al que quiere enlazar. Luego de clic en “Insertar” desde el botón en la parte superior y seleccione “Ancla.” Este botón aparece en el editor gracias al plugin de TinyMCE Advanced.
Paso 3
Ingrese el nombre que le puso al ancla en el paso 1 y haga clic en “OK.” Este plugin le ahorrará tiempo porque usted jamás tendrá que dejar su editor visual. Si lo está haciendo manualmente con HTML usted tendrá que saltar entre las vistas del editor visual y el editor de texto (HTML).
Agregando Índice con un Plugin
Quizás quiera acelerar el proceso aún más. 😄 Si está escribiendo mucho contenido y siempre prefiere incluir un índice (listas de enlaces ancla/menú de salto) en sus artículos, entonces podría tomar ventaja de un plugin de índice.
Uno de los mejores plugins gratuitos es Easy Table of Contents. Este plugin automáticamente genera enlaces ancla para sus encabezados y le permite insertar su índice en cualquier parte de su publicación con un simple shortcode. Al momento de escribir esto, este plugin cuenta con más de 30,000 instalaciones activas con una calificación de 4.5 de 5 estrellas.
Paso 1
Después de haber instalado y activado el plugin, hay algunas opciones que probablemente quiera cambiar. Estas podrá encontrar bajo “Opciones -> Índice.”
- La opción de “habilitar soporte” le permitirá elegir en qué tipos de publicación desea utilizar el índice. Lo más probable es que este sea su tipo de “publicaciones.”
- Luego puede elegir si quiere insertar o no un índice automáticamente o si desea insertarlo manualmente. Le recomendaríamos que lo haga manualmente si sus publicaciones cambian un poco de vez en cuando.
- La opción de “mostrar cuando” le permite definir cuántos encabezados la publicación debería tener antes de que aparezca el índice. Por ejemplo, probablemente no quiera que aparezca un índice en publicaciones cortas, así que lo mejor es a partir de cuatro o más encabezados.
Paso 2
Para insertar el índice manualmente, simplemente inserte el [ez-toc] shortcode donde quiera que aparezca en la publicación.
El índice es luego generado automáticamente para todos los encabezados en la publicación. ¿Qué tan genial es esto?
También puede hacer más cambios en las opciones tratándose de lo que debería aparecer, que se debe excluir, apariencia, etc. Por ejemplo, quizás siempre tenga un encabezado de “Resumen” al final de sus publicaciones. Puede ingresar el encabezado en la lista de exclusiones en las opciones para que no sea incluido en el índice.
Otro plugin de índice que podría checar es el de Shortcode Table of Contents. Este es un nuevo plugin en el mercado, pero fue desarrollado por James Kemp, al quien tuvimos el placer de entrevistar.
Agregar Enlaces Ancla en Encabezados Automáticamente con un Plugin
¿Quiere agregar enlaces ancla en todos sus encabezados de forma automática? Entonces debe checar el plugin gratuito de WP Anchor Header. Este agregará enlaces ancla a todos sus encabezados H1-H6.
Este es un plugin muy básico y no tiene muchas opciones. Simplemente instálelo, actívelo y estará listo para usarse. Cada encabezado automáticamente obtendrá un nombre de ancla (derivado del nombre del encabezado), e incluso tendrán un pequeño y genial icono de ancla que aparecerá cada vez que toque el encabezado. Esto les permitirá a los visitantes fácilmente poder ver si hay un enlace que podrían copiar si así lo desean.
¿Cómo Crear Enlaces Ancla en WordPress con Gutenberg?
El nuevo editor Gutenberg está muy cerca de ser lanzado y probablemente llegará con WordPress 5.0. Con su soporte integrado mejorado para agregar IDs de anclas a los encabezados.
Paso 1
Realce el encabezado en el bloque de Gutenberg y haga clic en “Avanzado” en el lado derecho. Verá una opción para agregar un Ancla HTML.
Paso 2
Si quiere enlazarlo, simplemente cree un hipervínculo en el texto de su ancla. En lugar de enlazarlo a la URL, publicación o página; usted le asignará un nombre ancla con un # antes del mismo.
¿Cómo Crear Enlaces Ancla en WordPress con una Extensión de Chrome?
¿No quiere crear enlaces ancla con HTML o instalar un plugin? Entonces usted debería checar la extensión gratuita de Anchor Links de Chrome. Este es completamente compatible con WordPress auto-alojado, WordPress.com y Medium.
Paso 1
Después de instalar la extensión de Chrome simplemente realce el encabezado que desee para agregar el enlace ancla. Luego de clic en el pequeño icono de la extensión de Chrome Anchor Link en la barra de herramientas de su navegador.
Detrás de las escenas, este crea una ID de ancla (derivado del nombre del encabezado). En este ejemplo: #Header_11. Cuando usted da clic en el icono automáticamente lo copiará a su portapapeles.
Paso 2
Luego vaya al siguiente texto que quiera agregar un enlace ancla, cree un hipervínculo como normalmente lo haría, y haga clic en “Pegar.”
¡Y eso es todo! La extensión de Chrome ayuda a que esto sea rápido y sencillo sin depender de plugins externos.
Resumen
Como puede ver hay muchas formas creativas de agregar enlaces ancla en WordPress. Algunas son más fáciles que otras. Si usted está publicando contenido mucho más largo, esto ayuda a que los visitantes puedan llegar al contenido que desean ver de inmediato. También hemos visto enlaces ancla ayudando con “menús de salto” en SERPs, el cual ayuda a incrementar el número de clic en su lista orgánica.
¿Usted ya está utilizando enlaces ancla en su sitio de WordPress? Si es así, nos encantaría escuchar de su experiencia y reflexiones.
Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.
Gracias :)