¿Alguna vez has hecho clic en un enlace y has aterrizado exactamente donde querías, a mitad de página? Ese es un enlace de anclaje en acción. Te lleva directamente a la parte importante, sin tener que desplazarte.
Cuando empecé a crear publicaciones de blog y tutoriales más largos en WordPress, rápidamente vi la necesidad de enlaces de anclaje. Los lectores escaneaban, abandonaban o se perdían secciones enteras. Añadir una simple tabla de contenidos con enlaces de anclaje cambió eso. Hizo la navegación más fácil y ayudó a que algunas publicaciones mostraran enlaces de "ir a" directamente en los resultados de Google.
En esta guía, te mostraré exactamente cómo crear enlaces de anclaje en WordPress. Aprenderás cómo funcionan, dónde añadirlos y cómo pueden ayudar con el SEO y la experiencia del usuario.
Tabla de Contenidos
- Anchor Link Methods Compared
- How Do I Add Anchor Links in the WordPress Block Editor?
- Can I Create Anchor Links in the Classic WordPress Editor?
- Cómo añadir enlaces de anclaje manualmente en HTML
- Cómo añadir enlaces de anclaje automáticamente con un plugin de WordPress
- Añadir enlaces de anclaje a páginas de destino
Comparación de métodos de enlaces de anclaje
Aquí tienes un resumen rápido de las diferentes formas en que puedes añadir enlaces de anclaje en WordPress, dependiendo de tu editor o configuración.
| M extasciitildeetodo | Mejor para | ¿Necesita código? | ¿Necesita plugin? |
|---|---|---|---|
| Editor de bloques | Sitios modernos de WordPress | No | No |
| Editor Clásico | Instalaciones antiguas de WordPress | HTML básico | No |
| HTML manual | Diseños personalizados, páginas de destino | Sí | No |
| Plugin (ej. Easy TOC) | Tablas de contenido automáticas | No | Sí |
| Constructor SeedProd | Páginas de destino y temas | No | No |
¿Qué es un enlace de anclaje en WordPress?
Un enlace de anclaje es un tipo de enlace interno que permite a los usuarios saltar a una sección específica de la misma página. Utiliza una almohadilla (#) seguida de un ID para apuntar a ese lugar en el HTML.
Como puedes ver en el ejemplo anterior, hacer clic en un enlace de anclaje te lleva instantáneamente a ese tema en la página.
¿Cuándo deberías usar enlaces de anclaje?
Los usuarios solo tardan unos segundos en decidir si quedarse o abandonar tu sitio web. Es tu trabajo usar esos pocos segundos para convencerlos de que se queden y se involucren con tu contenido.
La forma más fácil de mantener a los lectores interesados es ayudarles a encontrar la información que necesitan rápidamente. Puedes hacerlo creando enlaces de anclaje para que los usuarios puedan saltarse el resto de tu contenido y dirigirse directamente a las secciones que les interesan. Esta es una excelente manera de mejorar la experiencia del usuario y ganar más lectores.
Como mencionamos anteriormente, los enlaces de anclaje también pueden mejorar tu SEO en WordPress. Google a menudo muestra los enlaces de anclaje en los resultados de búsqueda como un enlace de "ir a" para que los lectores puedan saltar directamente a una sección en particular desde la página de resultados.
A veces, Google también muestra varios enlaces de una sola página como enlaces de "ir a". Se ha demostrado que esos enlaces aumentan las tasas de clics en los resultados de búsqueda, lo que significa más tráfico para tu sitio web.
Entonces, ¿cómo se crea un enlace para saltar a una parte específica de una página en WordPress? ¡Vamos a descubrirlo!
¿Cómo Añado Enlaces de Anclaje en el Editor de Bloques de WordPress?
Crear enlaces de anclaje en el editor de bloques de WordPress es bastante sencillo. Solo necesitas hacer 2 cosas para que tus enlaces de anclaje funcionen:
- Crea un enlace con el signo # justo antes del texto del ancla
- Añade el atributo ID al texto al que quieres que el usuario salte
Sigue las instrucciones a continuación para aprender cómo hacerlo tú mismo.
Paso 1: Crea Tu Enlace de Anclaje
El primer paso es resaltar el texto al que quieres añadir tu enlace de anclaje. Luego, haz clic en el icono de insertar enlace en el editor de bloques de WordPress.
Al hacer clic en el icono, se muestra la ventana emergente para insertar enlaces donde normalmente añadirías un enlace de página o buscarías una página para enlazar.
Sin embargo, para los enlaces de anclaje, tienes que introducir el signo # y las palabras clave de la sección a la que quieres que los usuarios salten.
Las palabras clave que utilices deben:
- Estar relacionadas con la sección a la que enlazas
- No ser demasiado largas o complicadas
- Usar mayúsculas para hacer el texto del ancla más legible
- Incluir guiones para separar palabras y hacerlas más fáciles de leer
Una vez que hayas introducido las palabras clave de tu enlace de anclaje, pulsa enter para crear el enlace. Luego podrás ver el enlace que has creado dentro del editor de WordPress, pero al hacer clic en él no hará nada.
Eso es porque no hay ningún ID conectado al enlace de anclaje, que es lo que tu navegador busca cuando haces clic en el enlace.
Puedes solucionar esto añadiendo el atributo ID al área de contenido a la que quieres enlazar, lo que exploraremos a continuación.
Paso 2: Añade el Atributo ID al Texto Enlazado
En tu editor de contenido de WordPress, desplázate hasta el contenido al que quieres que los usuarios salten cuando hagan clic en tu enlace de anclaje. La sección que necesitas suele ser un encabezado o el principio de un nuevo párrafo.
Ahora, haz clic en el bloque que contiene la sección a la que deseas enlazar y navega a la configuración del Bloque en el lado derecho de tu página.
En la configuración del bloque, expande la pestaña Avanzado e introduce las mismas palabras clave que usaste para tu enlace de texto de anclaje en el cuadro de anclaje HTML. La única diferencia es que no necesitarás el signo # al principio.
Cuando guardes tu artículo y lo previsualices, podrás ver tu enlace de anclaje en acción. Simplemente haz clic en él para saltar al contenido que enlazaste previamente.
Si el área de contenido a la que quieres enlazar no es un encabezado, sino un párrafo normal o un fragmento de texto, el proceso es un poco diferente.
En esa situación, haz clic en el bloque para mostrar la configuración del bloque y haz clic en el menú de tres puntos para revelar más opciones.
Desde allí, selecciona la opción Editar como HTML, que te permite editar todo el HTML de ese bloque de contenido completo.
Ahora necesitas encontrar la etiqueta HTML de la información a la que quieres apuntar. Por ejemplo, busca
si es un párrafo, o
si es una tabla, etc.Una vez que encuentres la etiqueta, añade tus palabras clave de anclaje como atributo id, similar al ejemplo a continuación:
<p id="bali-hiking-adventures">
Después de añadir tus palabras clave, es posible que veas un aviso explicando que el bloque contiene contenido inválido o inesperado.
Así que, haz clic en el botón Convertir a HTML para guardar tus cambios.
¿Puedo crear enlaces de anclaje en el editor clásico de WordPress?
Si todavía usas el editor clásico de WordPress, añadir un enlace de anclaje es ligeramente diferente. Sigue los pasos a continuación para aprender cómo crear enlaces de anclaje en el editor visual de contenido clásico de WordPress.
Paso 1: Crea Tu Enlace de Anclaje
Primero, resalta el texto al que quieres enlazar y haz clic en el botón Insertar enlace en la parte superior de tu editor de contenido.
A continuación, añade tus palabras clave de anclaje con el prefijo #, seguido del texto al que deseas enlazar.
Paso 2: Añade el Atributo ID al Texto Enlazado
El siguiente paso es indicar a los navegadores la sección del contenido a la que quieres que salten los usuarios al hacer clic en el enlace de anclaje.
Para ello, cambia al modo Texto en el editor clásico de WordPress, luego desplázate hasta la sección que deseas mostrar.
A continuación, busca la etiqueta HTML a la que quieres que apunte tu enlace de anclaje. Por ejemplo, <h2>, <h3>, <p>, etc.
Ahora añade el atributo ID con las palabras clave de tus enlaces de anclaje sin el prefijo #. Aquí tienes un ejemplo de cómo se vería:
<h2 id="bali-hiking-adventures">
Ahora puedes guardar tus cambios y previsualizar tu contenido para ver el enlace de anclaje funcionando.
Cómo añadir enlaces de anclaje manualmente en HTML
Si normalmente usas el modo Texto para escribir contenido en el editor clásico de WordPress, aquí te explicamos cómo crear manualmente un enlace de anclaje en HTML.
Primero, crea un enlace de anclaje con el prefijo # usando la etiqueta <a href=” “>, similar al ejemplo a continuación:
<a href="#bali-hiking-adventures">Bali Hiking Adventures</a>
Luego desplázate hasta la sección de contenido que deseas mostrar cuando los usuarios hagan clic en tu enlace. Normalmente, la sección es una etiqueta H2 o H3, pero también puede ser otro elemento HTML, como una simple etiqueta de párrafo <p>.
Una vez que hayas encontrado la etiqueta HTML, añade el atributo ID y el texto del anclaje sin el prefijo # de esta manera:
<h2 id="bali-hiking-adventures">Bali Hiking Adventures</h2>
Ahora puedes guardar tus cambios y previsualizar tu contenido para probar tu enlace de anclaje.
Cómo añadir enlaces de anclaje automáticamente con un plugin de WordPress
Si publicas artículos largos con regularidad, puedes ahorrar tiempo añadiendo automáticamente enlaces de anclaje a diferentes encabezados en tu contenido y creando una tabla de contenidos con un plugin de WordPress. Esto facilita a los usuarios encontrar la información que necesitan y elimina la necesidad de crear cada enlace de anclaje manualmente.
Para hacer esto, descarga el plugin Easy Table of Contents e instálalo y actívalo en tu sitio web de WordPress. Si necesitas un poco de ayuda para hacerlo, sigue estas instrucciones para instalar un plugin de WordPress.
El plugin utiliza los encabezados de tu contenido para adivinar a qué secciones enlazar, y puedes personalizar completamente la configuración según tus necesidades.
Una vez que hayas instalado y activado el plugin, navega a Ajustes » Tabla de contenidos para configurar tus opciones.
Luego habilita el plugin para los tipos de publicación a los que deseas añadir enlaces de anclaje y desmarca las áreas donde no deseas mostrar una tabla de contenidos.
También puedes activar la opción de inserción automática. Esto permite al plugin crear una tabla de contenidos automáticamente para todos los tipos de contenido seleccionados, incluido el contenido antiguo.
Si solo deseas crear una tabla de contenidos para artículos específicos automáticamente, deja esta opción desmarcada.
A continuación, desplázate por la página para elegir dónde quieres mostrar tu tabla de contenido y cuándo te gustaría activarla.
Por ejemplo, puedes mostrar tu tabla de contenido antes o después de tu primer encabezado y cuando haya un cierto número de encabezados en tu artículo.
Más abajo en la página, puedes elegir un tema que coincida con la marca de tu sitio y revisar configuraciones más avanzadas.
Recuerda hacer clic en el botón Guardar Cambios para conservar tu configuración.
Si activas la opción de inserción automática, puedes previsualizar un artículo con el número correcto de encabezados para ver tu tabla de contenido en acción.
Sin embargo, si quieres generar una tabla de contenido manualmente, necesitarás editar cada artículo individualmente.
Para ello, dirígete a la pantalla de edición de tu contenido y desplázate hacia abajo hasta la pestaña Tabla de Contenido debajo del editor.
Desde allí, marca la casilla "insertar tabla de contenido" y selecciona qué encabezados quieres incluir como enlaces de anclaje.
Ahora puedes guardar tus cambios y previsualizar tu artículo. El plugin Easy Table of Contents mostrará automáticamente una lista de enlaces de anclaje como tu tabla de contenido.
Añadir enlaces de anclaje a páginas de destino
Hemos cubierto varios métodos para añadir enlaces de anclaje a tu sitio de WordPress, pero ¿qué pasa si estás creando una página de destino?
Afortunadamente, SeedProd, el mejor constructor de temas y páginas de destino de WordPress, te permite crear enlaces de anclaje fácilmente.
En su editor visual de arrastrar y soltar, puedes usar el práctico bloque de enlaces de anclaje para enlazar una parte de tu página de destino con otra. Si estás usando SeedProd para crear un tema personalizado de WordPress, puedes usar el mismo método que te mostraremos a continuación para crear enlaces de anclaje en cualquier lugar de tu tema.
Simplemente arrastra el bloque de Enlace de Anclaje a la parte de la página a la que deseas saltar e introduce un nombre.
Después, selecciona el texto de tu página de destino desde el que deseas enlazar, añade el nombre del enlace de anclaje con una almohadilla al principio y haz clic en guardar.
Ahora, cuando previsualices tu página y pruebes el enlace, saltará a la sección correcta automáticamente.
Puedes seguir esta guía paso a paso para crear una página de destino en WordPress si necesitas ayuda para empezar.
¡Ahí lo tienes!
Ahora ya sabes cómo crear un enlace de anclaje en WordPress. Estos pequeños enlaces pueden parecer insignificantes, pero pueden marcar una gran diferencia. Mejor experiencia de usuario, navegación más rápida e incluso enlaces adicionales de "saltar a" en Google.
¿Necesitas más formas de mejorar la usabilidad y el SEO de tu sitio? Consulta estas guías prácticas:
- Los mejores plugins de WordPress para renovar tu sitio
- Los Mejores Plugins de Votación para WordPress que Necesitas
- Las Mejores Herramientas Sin Código para Sitios Web de WordPress
- Los Mejores Plugins de Modo Mantenimiento para WordPress
- Los Mejores Plugins de Banner de WordPress para Impulsar Leads
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
Tengo un enlace en el pie de página (plantilla), digamos que se llama "contacto". Al hacer clic en él, debería cargar la página "acerca de" y desplazarse hasta la sección de contacto. ¿Cómo se hace eso?
Hola Max. Para hacer esto, enlazarías a la página "acerca de" y añadirías el anclaje a la URL del enlace /about/#contact. ¡Espero que esto ayude!
¡Hola! He agregado el enlace de ancla y he creado el atributo id correctamente (verificado dos y tres veces), pero mi enlace simplemente no funciona; no me lleva a ninguna parte. ¿No encuentro ningún artículo sobre propuestas de lo que podría estar mal? ¿Qué puede ser? Juro que todo está configurado como debería. ¿Podría haber algún plugin o algo en mi tema que lo impida? ¡Gracias!
Hola Tuija,
¿Está tu versión de WordPress actualizada a la última versión? También puedes intentar asegurarte de que todos tus plugins y temas estén actualizados. Si eso no funciona, intenta deshabilitar tus plugins y habilitarlos uno por uno para ver si hay algún conflicto.
Hola
Busco una solución para que el ancla funcione con el menú. La primera página está bien y se desplaza al lugar apropiado. Sin embargo, al hacer clic en el enlace con el ID de ancla desde, digamos, la página Contacto, no funciona. Me doy cuenta de que muestra MI_DOMINIO.com/contacto-conmigo/#ID_ancla en lugar de MI_DOMINIO.com/#ID_ancla
Reemplacé el menú con una URL completa como MI_DOMINIO.com/#ID_ancla. Funcionó, pero los botones con esa URL muestran siempre el color Activo que establecí para los botones activos. Además, en el menú móvil, el menú en sí no se oculta.
La URL completa funciona, pero ¿cómo solucionar los botones activos y que el menú no se oculte en el móvil?
¿Alguien tiene una solución para esto? Gracias
Hola Andrew, ¿puedes contactar con nuestro equipo de soporte https://www.seedprod.com/contact/ para obtener ayuda con este problema, por favor? Están mucho mejor equipados para ayudar con preguntas más técnicas.