Cómo usar anclajes HTML para mejorar la experiencia de usuario

Los anclajes HTML, también conocidos como enlaces de salto o fragment identifiers, son una de esas optimizaciones técnicas que suenan simples pero que marcan una diferencia clara en la experiencia de usuario y, por ende, en el SEO.

Cuando un usuario hace clic en un enlace que lleva directamente a un título o sección dentro de la misma página, evita tener que hacer scroll manual. Esto es especialmente útil en artículos largos, páginas de precios, documentación técnica o landings con mucho contenido.

¿Qué es exactamente un anclaje HTML?

Un anclaje es un identificador único dentro de una página web que se define con el atributo id. Luego se referencia en un enlace con el símbolo # seguido del nombre de ese ID.

Cómo crear un anclaje HTML paso a paso

1. Definir el destino

Agregá un atributo id único a la etiqueta que querés usar como destino. Lo ideal es usarlo en encabezados (<h2>, <h3>), pero también podés aplicarlo a párrafos, tablas o cualquier elemento de bloque.

<h2 id="como-implementar">¿Cómo se implementa?</h2>

2. Crear el enlace de anclaje

Desde cualquier parte de la página (o incluso desde otra página), creás un enlace que apunte a ese ID:

<a href="#como-implementar">Cómo se implementa</a>

Si querés enlazar desde otra página, simplemente agregás la URL completa antes del hash:

<a href="https://ejemplo.com/articulo-largo#como-implementar">Cómo se implementa</a>

Mejores prácticas para usar anclajes en SEO técnico

• Usá IDs descriptivos y en minúsculas, preferentemente con guiones (-) en lugar de espacios o caracteres especiales.
• Evitá duplicar IDs en la misma página (genera errores de validación y problemas de accesibilidad).
• Combiná los anclajes con una tabla de contenidos al inicio del artículo. Es una de las formas más efectivas de reducir el tiempo en página y la tasa de rebote.
• Asegurate de que los enlaces internos usen el mismo dominio y protocolo para evitar problemas de mixed content o redirecciones innecesarias.
• Si tu sitio es de una sola página (SPA) hecho en JavaScript, verificá que los anclajes funcionen después del renderizado. Googlebot los procesa mejor cuando el HTML final contiene los IDs correctamente.

Cómo impacta esto en Core Web Vitals y experiencia de usuario

Google valora cada vez más la experiencia de página. Los anclajes bien implementados ayudan a cumplir con esa expectativa: el usuario llega exactamente donde necesita sin esfuerzo.

Además, al reducir el scroll necesario, indirectamente mejorás métricas como Time to Interactive y la percepción de velocidad.

Verificación en herramientas

• En Search Console podés ver si Google está indexando correctamente tus páginas con fragmentos.
• Usá Lighthouse o PageSpeed Insights para confirmar que no hay errores de accesibilidad relacionados con enlaces de salto.
• Validá tu HTML en el W3C Markup Validation Service para asegurarte de que no haya IDs duplicados.

Cada sitio tiene su propia estructura técnica. Antes de implementar cambios masivos, realizá una auditoría en tu caso concreto. Lo que funciona perfectamente en un blog puede necesitar ajustes en un ecommerce con filtros dinámicos.

Tabla de contenidos automática con JavaScript (opcional)

Si querés ir un paso más allá, podés generar automáticamente la tabla de contenidos escaneando los encabezados de la página y creando los enlaces dinámicamente. Esto es especialmente útil en sitios con contenido que se actualiza frecuentemente.

El código básico sería algo como:

function generarTablaContenidos() {
  const headings = document.querySelectorAll('h2, h3');
  // crear enlaces y agregarlos al contenedor
}

Pero recordá: siempre priorizá la versión estática en HTML cuando sea posible. Es más amigable para el crawler y más rápida de cargar.

Los anclajes HTML son una optimización de bajo esfuerzo y alto impacto. Implementarlos correctamente es una de esas tareas que todo especialista en SEO técnico debería tener en su checklist de auditorías.