Ocasionalmente usamos enlaces de anclaje en nuestras publicaciones más largas de WordPress para ayudar a los usuarios a saltar rápidamente a la sección que desean leer.
Los enlaces de anclaje se utilizan a menudo en las secciones de la tabla de contenido porque ayudan a los usuarios a moverse hacia arriba y hacia abajo en un artículo más extenso sin recargar la página. También puede ayudar con el SEO, ya que Google puede mostrarlos debajo de sus listas de búsqueda para facilitar la navegación (más sobre esto más adelante).
En esta guía paso a paso, explicaremos qué son los enlaces de anclaje y le mostraremos cómo agregar fácilmente enlaces de anclaje en WordPress.
¿Listo? Comencemos con un ejemplo en vivo de enlaces de anclaje.
A continuación se muestra una lista de todos los temas que cubriremos en esta guía. Continúe y haga clic en cualquiera de estos enlaces, y se lo dirigirá a esa sección específica.
- ¿Qué es un enlace de anclaje?
- ¿Cómo agregar enlaces de anclaje manualmente en WordPress?
- ¿Cómo agregar enlaces de anclaje manualmente usando el Editor clásico en WordPress?
- ¿Cómo agregar manualmente enlaces de anclaje en HTML?
- ¿Cómo agregar automáticamente encabezados como enlaces de anclaje en WordPress?
¿Qué es un enlace de ancla?
Un enlace de anclaje es un tipo de enlace en la página que lo lleva a un lugar específico en esa misma página. Permite a los usuarios saltar a la sección que más les interese.
Eche un vistazo a la captura de pantalla animada a continuación:
Como puede ver, hacer clic en el enlace de anclaje lleva al usuario a la sección específica de la misma página.
Los enlaces de anclaje se usan comúnmente en artículos más largos como la tabla de contenido que permite a los usuarios saltar rápidamente a las secciones que desean leer.
Otro uso de los enlaces de anclaje es crear enlaces de marcadores en su sitio de WordPress. Esto le permite compartir el enlace del marcador en las redes sociales o boletines informativos por correo electrónico, por lo que cuando la página se carga, sus usuarios saltan inmediatamente a la sección que desea que vean.
¿Por qué y cuándo debería utilizar enlaces de anclaje?
Un usuario promedio pasa menos de unos segundos antes de decidir si quiere quedarse o dejar su sitio web. Solo tiene esos pocos segundos para convencer a los usuarios de que se queden.
La mejor manera de hacerlo es ayudarlos a ver rápidamente la información que buscan.
Los enlaces de ancla facilitan esto al permitir a los usuarios omitir el resto del contenido y saltar directamente a la parte que les interesa. Esto mejora la experiencia del usuario y le ayuda a ganar nuevos clientes / lectores.
Los enlaces de anclaje también son excelentes para el SEO de WordPress. Google puede mostrar un enlace de anclaje en los resultados de búsqueda como un «salto al enlace».
A veces, Google también puede mostrar varios enlaces de esa página como enlaces de salto, y se ha demostrado que esto aumenta la tasa de clics en los resultados de búsqueda. En otras palabras, obtiene más tráfico a su sitio web.
Habiendo dicho eso, echemos un vistazo a cómo agregar fácilmente enlaces de anclaje en WordPress.
Cómo agregar enlaces de anclaje manualmente en WordPress
Si solo desea agregar algunos enlaces de anclaje o enlaces de marcadores en su artículo, puede hacerlo fácilmente de forma manual.
Básicamente, debe agregar dos cosas para que un texto de anclaje funcione según lo previsto.
- Cree un enlace de anclaje con un signo # antes del texto de anclaje.
- Añade el
idatributo al texto donde desea que se lleve al usuario.
Comencemos con la parte del enlace de anclaje.
Paso 1. Crear un vínculo de anclaje
Primero debe seleccionar el texto que desea vincular y luego hacer clic en el botón Insertar vínculo en el editor de WordPress Gutenberg.
Esto abrirá la ventana emergente de inserción de enlace donde generalmente agrega la URL o busca una publicación o página para vincular.
Sin embargo, para un enlace de anclaje, simplemente usará # como prefijo e ingresará las palabras clave para la sección a la que desea que salte el usuario.
Después de eso, haga clic en el botón Enter para crear el enlace.
Algunos consejos útiles para elegir qué texto usar como enlace de # ancla:
- Utilice las palabras clave relacionadas con la sección a la que está enlazando.
- No hagas que tu enlace de ancla sea innecesariamente largo o complejo.
- Utilice guiones para separar palabras y hacerlas más legibles.
- Puede utilizar las mayúsculas en el texto de anclaje para que sea más legible. Por ejemplo:
#Best-Coffee-Shops-Manhattan.
Una vez que agregue el enlace, podrá ver el enlace que ha creado en el editor. Sin embargo, hacer clic en el enlace no hace nada.
Eso es porque los navegadores no pueden encontrar el enlace de anclaje como ID.
Arreglemos eso apuntando los navegadores al área, sección o texto que desea mostrar cuando los usuarios hacen clic en el enlace de anclaje.
Paso 2. Agregue el atributo de ID a la sección vinculada
En el editor de contenido, desplácese hacia abajo hasta la sección a la que desea que navegue el usuario cuando haga clic en el enlace de anclaje. Por lo general, es el encabezado de una nueva sección.
A continuación, haga clic para seleccionar el bloque y luego, en la configuración del bloque, haga clic en la pestaña Avanzado para expandirlo. Simplemente puede hacer clic en la pestaña ‘Avanzado’ debajo de la configuración del bloque de encabezado.
Después de eso, debe agregar el mismo texto que agregó como enlace de anclaje en el campo ‘HTML Anchor’. Asegúrese de agregar el texto sin el prefijo #.
Ahora puede guardar su publicación y ver su enlace de anclaje en acción haciendo clic en la pestaña de vista previa.
¿Qué sucede si la sección que desea mostrar no es un encabezado, sino solo un párrafo normal o cualquier otro bloque?
En ese caso, debe hacer clic en el menú de tres puntos en la configuración del bloque y seleccionar ‘Editar como HTML’.
Esto le permitirá editar el código HTML para ese bloque en particular. Debe seleccionar buscar la etiqueta HTML para el elemento al que desea apuntar. Por ejemplo, <p> si es un párrafo, o <table> si es un bloque de tabla, etc.
Ahora, debe agregar su ancla como el atributo de ID a esa etiqueta, como el siguiente código:
<p id="best-coffee-shops-manhattan">
Ahora verá un aviso de que este bloque contiene contenido inesperado o no válido. Debe hacer clic en convertir a HTML para conservar los cambios que realizó.
Cómo agregar manualmente un enlace de anclaje en el editor clásico
Si todavía está utilizando el editor clásico más antiguo para WordPress, aquí le mostramos cómo puede agregar el enlace de anclaje / enlace de salto.
Paso 1. Crea el enlace de ancla
Primero, seleccione el texto que desea cambiar en el enlace de anclaje y luego haga clic en el botón ‘Insertar enlace’.
Después de eso, debe agregar su enlace de anclaje con un prefijo de signo # seguido del slug que desea usar para el enlace.
Paso 2. Agregue el atributo de ID a la sección vinculada
El siguiente paso es apuntar los navegadores a la sección que desea mostrar cuando los usuarios hagan clic en su enlace de anclaje.
Para eso, deberá cambiar al modo ‘Texto’ en el editor clásico. Después de eso, desplácese hacia abajo hasta la sección que desea mostrar.
Ahora localice la etiqueta HTML a la que desea apuntar. Por ejemplo, <h2>, <h3>, <p>, etcétera.
Debe agregarle el atributo ID con el slug de su enlace de anclaje sin el prefijo #, así:
<h2 id="best-coffee-shops-manhattan">
Ahora puede guardar sus cambios y hacer clic en el botón de vista previa para ver su enlace de anclaje en acción.
Cómo agregar manualmente enlaces de anclaje en HTML
Si está acostumbrado a escribir en el modo Texto del antiguo Editor clásico en WordPress, aquí le mostramos cómo crearía manualmente un enlace de anclaje en HTML.
Primero, debe crear el enlace de anclaje con un prefijo # usando el habitual <a href=""> etiqueta, así:
<a href="#best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</a>
A continuación, debe desplazarse hacia abajo hasta la sección que desea mostrar cuando los usuarios hacen clic en el enlace.
Por lo general, esta sección es un encabezado (h2, h3, h4, etc.), pero podría ser cualquier otro elemento HTML o incluso una etiqueta de párrafo simple
.
Debe agregar el atributo ID a la etiqueta HTML y luego agregar la barra de enlace de anclaje sin el prefijo #.
<h2 id="best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</h4>
Ahora puede guardar sus cambios y obtener una vista previa de su sitio web para probar el enlace de anclaje.
Cómo agregar automáticamente encabezados como enlaces de anclaje en WordPress
Este método es adecuado para usuarios que publican regularmente artículos de formato largo y necesitan crear una tabla de contenido con enlaces de anclaje.
Lo primero que debe hacer es instalar y activar el Tabla de contenido fácil enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Este complemento le permite generar automáticamente una tabla de contenido con enlaces de anclaje. Utiliza encabezados para adivinar las secciones de contenido y puede personalizarlo completamente para satisfacer sus necesidades.
Tras la activación, simplemente vaya a Configuración »Tabla de contenido página para configurar los ajustes del complemento.
Primero, debe habilitarlo para los tipos de publicaciones donde desea agregar una tabla de contenido. De forma predeterminada, el complemento está habilitado para las páginas, pero también puede habilitarlo para sus publicaciones.
También puede habilitar la opción de inserción automática. Esto permite que el complemento genere automáticamente la tabla de contenido para todos los artículos, incluidos los artículos más antiguos que coinciden con los criterios.
Si solo desea generar automáticamente una tabla de contenido para artículos específicos, puede dejar esta opción sin marcar.
A continuación, desplácese un poco hacia abajo para seleccionar dónde desea mostrar la tabla de contenido y cuándo desea que se active.
Puede revisar otras configuraciones avanzadas en la página y cambiarlas según sea necesario.
No olvide hacer clic en el botón «Guardar cambios» para almacenar su configuración.
Si habilitó la opción de inserción automática, ahora puede ver un artículo existente con el número especificado de títulos.
Notará que el complemento mostrará automáticamente una tabla de contenido antes del primer encabezado del artículo.
Si desea generar manualmente una tabla de contenido para artículos específicos, debe editar el artículo en el que desea mostrar una tabla de contenido con enlaces de anclaje.
En la pantalla de edición de publicaciones, desplácese hacia abajo hasta la pestaña ‘Tabla de contenido’ debajo del editor.
Desde aquí, puede marcar la opción ‘Insertar tabla de contenido’ y seleccionar los encabezados que desea incluir como enlaces de anclaje.
Ahora puede guardar sus cambios y obtener una vista previa de su artículo. El complemento mostrará automáticamente una lista de enlaces de anclaje como su tabla de contenido.
Para obtener instrucciones más detalladas, consulte nuestro artículo sobre cómo agregar una tabla de contenido en WordPress.
Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente enlaces de anclaje en WordPress. Es posible que también desee ver nuestros consejos sobre cómo optimizar adecuadamente las publicaciones de su blog para SEO y nuestra selección de los mejores complementos de creación de páginas de WordPress.
