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? 😉

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.

Enlaces ancla
Enlaces ancla

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.

nlace ancla en un artículo largo
Enlace ancla en un artículo largo

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

Ejemplos de enlaces ancla en Google
Ejemplos de enlaces ancla en Google

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.

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. 😁

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.

Creando un enlace ancla con HTML
Creando un enlace ancla con HTML

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>

¿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.

TinyMCE Advanced WordPress plugin
TinyMCE Advanced WordPress plugin

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 #.

Agregando nombre ancla
Agregando nombre de ancla

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.

Agregando ancla
Agregando ancla

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).

ID del ancla
ID del ancla

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.

Una mejor experiencia del usuario comienza con un mejor host del sitio web. Prueba Kinsta gratis.

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.

Easy Table of Contents WordPress plugin
Easy Table of Contents WordPress plugin

Paso 1

Después de haber instalado y activado el plugin, hay algunas opciones que probablemente quiera cambiar. Estas podrá encontrar bajo “Opciones -> Índice.”

Opciones de Easy Table of Contents
Opciones de Easy Table of Contents

Paso 2

Para insertar el índice manualmente, simplemente inserte el [ez-toc] shortcode donde quiera que aparezca en la publicación.

Código corto EZ-TOC
Código corto EZ-TOC

El índice es luego generado automáticamente para todos los encabezados en la publicación. ¿Qué tan genial es esto?

Índice en WordPress
Índice en WordPress

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.

WP Anchor Header plugin
WP Anchor Header plugin

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.

Enlaces ancla automáticos en encabezados
Enlaces ancla automáticos en encabezados

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.

Agregando un ancla HTML en el editor de Gutenberg
Agregando un ancla HTML en el editor de Gutenberg

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.

Agregar un enlace ancla en Gutenberg
Agregar un enlace ancla en Gutenberg

¿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.

Extensión de Chrome agregando enlace de ancla
Extensión de Chrome agregando enlace de ancla

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.

Copiado al portapapeles
Copiado al 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.”

Agregando enlace de ancla
Agregando enlace de ancla

¡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.


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 29 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.