Los enlaces de anclaje son una herramienta sencilla pero potente para mejorar la navegación en las páginas o entradas más largas de WordPress. Permiten a los usuarios saltar rápidamente a secciones específicas de la misma página haciendo clic en un enlace sin necesidad de desplazarse por grandes cantidades de contenido. Los enlaces de anclaje pueden mejorar la experiencia del usuario y el SEO, lo que los convierte en una función imprescindible para los contenidos largos o los sitios web de una sola página.
This guide will walk you through creating anchor links in WordPress using the Classic Editor, Gutenberg Editor, and WPBakery Page Builder. We’ll also discuss the structure of anchor links, best practices, and common use cases.
¿Qué es un enlace de anclaje?
Un enlace de anclaje es un hiperenlace que dirige al usuario a una sección específica de la misma página en lugar de llevarle a una página diferente. Por ejemplo, en una entrada larga de un blog, puede crear una tabla de contenidos en la parte superior, y cada enlace saltará a la sección correspondiente del artículo.
Ejemplo:
<h2 id="section1">Sección 1: ¿Qué es un enlace de anclaje?</h2><a href="#section1">Ir a la sección 1</a>In this example, when users click on “Go to Section 1,” they are taken directly to the part of the page where the heading “Section 1: ¿Qué es un enlace de anclaje?” is located.
Ventajas de utilizar enlaces de anclaje:
- Mejora de la legibilidad: En los artículos largos, los lectores pueden saltar rápidamente a la parte que les interesa sin tener que desplazarse interminablemente.
- Mejor navegación: Anchor links can be used to create easy-to-navigate sections on single-page websites, such as “Sobre,” “Servicios,” and “Contacto."
- Mayor compromiso del usuario: Es más probable que los usuarios permanezcan más tiempo en su página si pueden encontrar rápidamente la información que desean.
- Impulso SEO: Search engines like Google use anchor links to understand your page’s structure better, potentially improving your SEO rankings.
La estructura de los enlaces de anclaje
Un enlace de anclaje consta de dos partes esenciales: el ID (identificador) y el enlace.
- ID (Identificador)
El ID es un identificador único que se añade al elemento HTML al que se quiere enlazar (como un rúbrica o párrafo). Por ejemplo:
<h2 <mark class="has-inline-color has-vivid-cyan-blue-color amp-wp-cefb454" data-amp-original-style="background-color:rgba(0, 0, 0, 0)">id="sección1"</mark>>Sección 1: SEO técnico</h2>El id= “section1” hace que esta rúbrica sea identificable como una punto de anclaje.
- Enlace
The clickable part that directs the user to the ID. It’s created using the hashtag # seguido del ID. Por ejemplo:
Ir a la Sección 1El href=” #section1″ indica al navegador que se desplace hacia abajo hasta el elemento con el ID section1.
Ejemplo en acción:
If you’re writing a detailed article about SEOpodría añadir enlaces de anclaje a cada sección principal:
<h2 id="on-page-seo">SEO en la página</h2>
<h2 id="off-page-seo">SEO fuera de la página</h2>
<h2 id="technical-seo">SEO técnico</h2>A continuación, en la parte superior de su artículo, puede añadir un índice que enlace con estas secciones:
<ul>
<li><a href="#on-page-seo">SEO en la página</a></li>
<li><a href="#off-page-seo">SEO fuera de la página</a></li>
<li><a href="#technical-seo">SEO técnico</a></li>
</ul>
Users who click “SEO en la página” will be taken straight to that section.
¿Por qué utilizar enlaces de anclaje?
- Experiencia de usuario mejorada
Los lectores pueden navegar fácilmente hasta el contenido que les interesa, lo que resulta especialmente útil para los contenidos de formato largo. Esto reduce la frustración y hace que su sitio web sea más fácil de usar.
- Mejor navegación en sitios web de una sola página
En los sitios web de una sola página, los enlaces de anclaje pueden utilizarse para simular menús de navegación. Al hacer clic en un elemento del menú, el usuario se desplazará suavemente a la sección correspondiente, creando una experiencia de navegación fluida.
- SEO mejorado
Los enlaces de anclaje contribuyen a la vinculación interna, que ayuda a los motores de búsqueda como Google a comprender mejor la estructura de su página. Esto puede mejorar la indexación de su contenido y conducir a mejores clasificaciones.
- Mayor compromiso de los usuarios
Enabling users to find the content they’re looking for quickly can increase their time on your site and reduce bounce rates, which is beneficial for user engagement metrics.
- Accesibilidad
Los enlaces de anclaje también hacen que su sitio sea más accesible, permitiendo a los usuarios con discapacidades o a los que utilizan lectores de pantalla navegar por su contenido de forma más eficiente.
Cómo crear enlaces de anclaje en WordPress
Here’s how to create anchor links using different WordPress editors.
Creación de enlaces de anclaje en el editor clásico
If you’re using the Editor clásico， debe editar manualmente el HTML to add anchor links. Here’s how:
Paso 1: Añada un identificador único a su elemento objetivo
- Abra la entrada o página que desea editar en el Editor clásico.
- Switch to the “Texto” mode to edit the HTML.
- Busque el elemento (como un encabezamiento o un párrafo) al que desea enlazar y añádale un ID único. Por ejemplo:
<h2 id="sección1">Sección 1: ¿Qué es un enlace de anclaje?
Paso 2: Crear el enlace de anclaje
- Switch back to the “Visual” mode.
- En la parte superior de su entrada (o donde quiera que esté el enlace), resalte el texto que desea hacer clicable.
- Click the “Insertar/Editar enlace” button in the toolbar.
- En el campo URL, introduzca #sección1 (el ID que estableció anteriormente).
<a href="#section1">Ir a la sección 1</a>Paso 3: Guardar y previsualizar
Once you’ve saved the changes, you can preview your page to ensure the link works as expected. Clicking the link should scroll the page to the section with the matching ID.
Creación de enlaces de anclaje en el editor Gutenberg
Gutenberg is WordPress’s block editor, offering a more streamlined way to create anchor links.
Paso 1: Añadir un ID a un bloque
- Abra la entrada o página que desea editar en Gutenberg.
- Seleccione el bloque al que desea añadir el ancla (por ejemplo, un bloque Título).
- In the right-hand sidebar, under “Avanzado,” find the “ANCHOR HTML".
- Introduzca su ID único (por ejemplo, sección2).
Paso 2: Añadir el enlace de anclaje
- Vuelva a la parte superior de su entrada o donde quiera añadir el enlace.
- Resalte el texto que desea hacer clicable y haga clic en el icono de enlace de la barra de herramientas.
- En el campo URL, escriba #section2.
- Press “Enter” to create the link.
Paso 3: Guardar y probar
Guarde su entrada y previsualícela. Cuando haga clic en él, el enlace debería saltar a la sección con el ID de anclaje.
Creación de enlaces de anclaje en WPBakery Page Builder
WPBakery es un famoso constructor de páginas de arrastrar y soltar para WordPress. Puede crear fácilmente enlaces de anclaje utilizando esta herramienta.
Paso 1: Añadir un identificador único al elemento
- Abra la página o post en WPBakery Page Builder.
- Haga clic en el elemento que desea enlazar y vaya a su configuración.
- In the settings, find the “ID del elemento” field and enter a unique ID (e.g., section1).
Paso 2: Crear el enlace de anclaje
- Seleccione el texto o el botón desde el que desea establecer el enlace.
- Abra los ajustes del enlace e introduzca #sección1 como URL.
- Guarde los cambios.
Paso 3: Guardar y previsualizar
Después de guardar su trabajo, previsualice la página para probar el enlace.
Mejores prácticas para utilizar enlaces de anclaje
Para sacar el máximo partido de los enlaces de anclaje, siga estas prácticas recomendadas:
- Garantizar identificaciones únicas
Each ID must be unique within a page. If two elements have the same ID, the browser won’t know where to scroll, and the link may not work properly.
- Evite los caracteres especiales
Las identificaciones no deben contener espacios, signos de puntuación ni caracteres especiales. Limítese a letras, números y guiones. Por ejemplo, sección-1 está bien, pero sección 1 o sección#1 podrían causar problemas.
- Utilice un texto de anclaje claro
Avoid vague anchor text like “Click here” or “Learn more.” Instead, use descriptive text that tells users exactly where the link will take them. For example, “Go to the On-Page SEO section” is much more informative.
- Pruebe sus enlaces
Always test your anchor links before publishing. Make sure that each link scrolls to the correct section. Your browser’s developer tools can help diagnose any issues.
- Evite las URL desnudas
Evite mostrar URL de anclaje sin formato en su texto (como https://example.com/#section1). En su lugar, utilice un texto de enlace claro y descriptivo que proporcione contexto al usuario.
Casos prácticos de los enlaces de anclaje
Los enlaces de anclaje son útiles en muchos escenarios. He aquí algunos ejemplos comunes:
- Índice
Para las entradas de blog largas, añadir una tabla de contenidos al principio permite a los usuarios saltar a secciones específicas sin tener que desplazarse. Esto mejora la navegación y hace que el contenido sea más digerible.
- Páginas web de una sola página
Anchor links are a great way to create navigation menus on single-page websites. Clicking on menu items like “About Us” or “Services” will scroll the user to those sections on the same page.
- Botones de llamada a la acción (CTA)
Use anchor links to direct users to specific actions, such as filling out a form or viewing a product. For example, a “Learn More” button can link to a detailed section further down the page.
- Botones de desplazamiento hacia arriba
Adding a “Scroll to Top” button allows users to quickly return to the top of a long page without manually scrolling.
Preguntas frecuentes
- ¿En qué se diferencian los enlaces de anclaje de los enlaces normales?
Los enlaces de anclaje permiten navegar dentro de la misma página, mientras que los enlaces normales suelen llevar a una página diferente. Los enlaces de anclaje suelen mejorar la navegación dentro de sitios web de contenido extenso o de una sola página.
- ¿Ayudan los enlaces de anclaje al SEO?
Yes, anchor links can be part of a good internal linking strategy, helping search engines understand your page’s structure and improving your page’s accessibility and user experience.
- ¿Cómo compruebo los enlaces de anclaje?
La forma más sencilla es hacer clic en el enlace y ver si le lleva a la sección correcta. También puede utilizar las herramientas de desarrollo del navegador para inspeccionar y solucionar cualquier problema con sus enlaces de anclaje.
- ¿Existen plugins para crear enlaces de anclaje?
Sí, muchos constructores de páginas como WPBakery y Elementor le permiten crear enlaces de anclaje fácilmente. También puede utilizar plugins dedicados a la tabla de contenidos que generan automáticamente enlaces de anclaje para los encabezados.
Conclusión
Los enlaces de anclaje son esenciales para mejorar la navegación de los usuarios, especialmente en los contenidos largos y los sitios web de una sola página. Permitir a los usuarios saltar directamente a secciones específicas mejora la legibilidad, aumenta el compromiso y contribuye positivamente al SEO. Tanto si utiliza el editor clásico, Gutenberg o WPBakery Page Builder, añadir enlaces de anclaje es un proceso sencillo que puede mejorar significativamente la experiencia del usuario en su sitio. Siguiendo las mejores prácticas -como utilizar identificadores únicos, un texto de anclaje claro y probar sus enlaces- puede garantizar una navegación fluida y una mejor usabilidad para sus visitantes.