4 formas de añadir enlaces de anclaje en WordPress para mejorar la experiencia del usuario y el SEO

enlace de anclajeson muy útiles en el diseño web. No sólo ayudan a los usuarios a navegar rápidamente a partes específicas de una página, sino que también pueden mejorar la experiencia general del usuario e incluso tener un impacto positivo en el SEO. Con los enlaces de anclaje, los visitantes pueden ser guiados para saltar de una parte de una página a otra, o de una página a una ubicación específica en una página diferente. En este post, vamos a repasar los detalles de cómo en WordPressCuatro formas de añadir anclajespara ayudarle a optimizar mejor su sitio web.

¿Qué son los enlaces de anclaje? ¿Por qué se utilizan?

Los enlaces de anclaje, también conocidos como anchors, son enlaces especiales que pueden hacer saltar al usuario de una parte de la misma página a otra, o bienSaltar de una página a un lugar específico de otra página. Estos enlaces se suelen utilizar en sitios web de páginas largas o de una sola página para ayudar a los usuarios a navegar rápidamente hasta el contenido deseado. Entre las ventajas de utilizar enlaces de anclaje se incluyen:

• Mejorar la experiencia del usuario: Los usuarios pueden encontrar fácilmente la información que buscan sin tener que desplazarse manualmente por las páginas.
• Mejorar el SEO:: Los enlaces de anclaje pueden tener un impacto positivo en el SEO al aumentar las visitas a la página y el tiempo de permanencia.
• Aumentar las tasas de conversión: Los usuarios pueden encontrar rápidamente los contenidos pertinentes, lo que reduce la probabilidad de que abandonen la página.

Cuatro formas de añadir anclas a WordPress

Existen múltiples formas de añadir anclas en WordPress, y a continuación detallaremos cuatro métodos comunes:Editor Gutenberg, Constructor Divi,Constructor de páginas Elementory WPBakery Page builder.

1. Añadir anclas con el editor Gutenberg

Gutenberg es el editor predeterminado de WordPress y ofrece una interfaz sencilla e intuitiva. Estos son los pasos para añadir anclas en WordPress usando Gutenberg:

Paso 1: Crear títulos y fijar anclajes

• Abra el editor de Gutenberg enMensaje o páginaCree un nuevo título en
• En la columna derecha de la configuración del título, haga clic en "alto nivel"Opciones.

• En "Anclaje HTML" Introduzca el texto de anclaje en el campo, por ejemploh-prueba-encabezamiento.

Paso 2: Enlazar con un ancla

• Para escribir un texto en un párrafo de la misma página, seleccione una palabra o frase y haga clic en el icono de enlace.
• En el cuadro de enlace escriba "#-h-prueba-encabezamiento", que es el ID del punto de anclaje.

Paso 3: Editar el código HTML

• También puede seleccionarse pulsando sobre los tres puntos del bloque "Editar en HTML"y, a continuación, añada manualmente los identificadores de anclaje

Ejemplo: código htmlCopy

<code><p id="h-test-heading2">

De este modo, cuando el usuario haga clic en el enlace de texto, saltará a la posición de anclaje correspondiente.

2. Uso de Divi Builder para añadir anclajes

Divi Builder es un potente constructor de páginas que ofrece una gran cantidad de opciones de diseño y maquetación. A continuación te explicamos cómo añadir anclas en Divi Builder:

Paso 1: Crear puntos de anclaje

• Abra Divi Builder y en la sección, fila o configuración del módulo vaya a "alto nivel"Tab.
• En "CSS ID" Introduzca su ID de anclaje en el campo, por ejemploh-prueba-encabezamiento.

Paso 2: Enlazar con un ancla

• Este identificador de anclaje puede utilizarse en cualquier posición, incluidos menús, botones o enlaces de texto. El formato del enlace es#h-test-heading.

De este modo, el usuario saltará directamente a la ubicación de la página especificada tras hacer clic en el enlace.

3. Uso de Elementor para añadir anclajes

Elementor es uno de los constructores de páginas más populares en WordPress con una interfaz intuitiva de arrastrar y soltar. Añadir anclas con Elementor es muy sencillo:

Paso 1: Añadir widgets de anclaje de menú

• Abre el editor de Elementorpágina webBusque en la columna de la izquierda "ancla".

• voluntad"ancla de menú" se arrastra hasta el lugar de la página en el que desea añadir el ancla.

Paso 2: Establecer el identificador de anclaje

• A la izquierda del "Menú Ancla ID" Introduzca el texto de anclaje en el campo, por ejemploh-prueba-encabezamiento.

Paso 3: Crear enlaces

• Utilice este identificador de anclaje en cualquier posición (por ejemplo, menú, botón o texto) con un formato de enlace de#h-test-heading.

Con Elementor, es fácil añadir múltiples anclas a una página para mejorar la navegación de la misma.

4. Usar WP-Bakery Pagebuilder para añadir anclas

WP-Bakery Pagebuilder es otro constructor de páginas popular para los usuarios que necesitan más opciones de personalización. A continuación te explicamos cómo añadir anclas en WP-Bakery Pagebuilder:

Paso 1: Establecer el ID de la fila/elemento

• Abra WP-Bakery Pagebuilder y haga clic en el icono del lápiz para editar filas, columnas o elementos.

• En "convencional (armas)En la pestaña "ID de fila" o "ID de elemento", busque el campo "ID de fila" o "ID de elemento" e introduzca el ID del anclaje, por ejemploh-prueba-encabezamiento.

Paso 2: Crear un enlace

• De forma similar a los otros métodos, este identificador de anclaje puede utilizarse en cualquier parte de la página, con un formato de enlace de#h-test-heading.

Este método es adecuado para los usuarios que necesitan un control preciso sobre el diseño y la funcionalidad de la página.

Problemas comunes de los enlaces de anclaje y soluciones

A veces, los enlaces de anclaje pueden no funcionar correctamente. He aquí algunos errores comunes y sus soluciones:

1. Utilice ID CSS, no clases CSS: El punto de anclaje debe serID CSS únicono clases CSS.
2. Asegúrese de que el enlace tiene # delante: Al enlazar anclas, asegúrese de anteponer al texto de anclaje el prefijo#.
3. Asegúrese de que el ID de anclaje no tiene #: Cuando configure el ID de anclaje, no introduzca el campo ID en el campo#.
4. Cada ID de anclaje debe ser único: Los identificadores de anclaje no pueden duplicarse en la misma página.

Sugerencia: añadir un efecto de desplazamiento suave a los enlaces de anclaje

Para mejorar la experiencia del usuario, se puede añadir un efecto de desplazamiento suave a los enlaces de anclaje. Esto puede hacerse mediante el botón "Page scroll to ID", que sustituye al navegador por defecto "encuadernado"para ofrecer una experiencia de desplazamiento más fluida en los sitios web de una sola página.

resúmenes

La experiencia de navegación del usuario en su sitio puede mejorar mucho con los enlaces de anclaje. Tanto si utiliza¿Gutenberg, Divi Builder, Elementor o WP-Bakery Pagebuilder?Todos estos métodos pueden ayudarle a conseguir la funcionalidad de anclaje con facilidad. Dominar estas técnicas no solo mejorará la experiencia de usuario de tu sitio web, sino que también mejorará el rendimiento SEO, lo que a su vez mejorará el tráfico y las conversiones generales del sitio web.