Redireccionar etiquetas, anclas o hash de una URL

Los SEOs trabajamos mano a mano con las redirecciones, ya que estas nos ayudan a mejorar la experiencia del usuario conforme una web va creciendo y cambiando, a mejorar el rastreo y a evitar que Google llegue a donde no queremos que vaya.

Sin embargo hay una parte de la URL que se resiste a cualquier tipo de redirección desde el servidor. Esa parte es la conocida en Español como etiquetas, y corresponde en una URL a todo lo que va después del símbolo #.

El motivo por el que no se pueden realizar redirecciones de esta parte de una URL es sencillo, y se debe a que esta parte no es una solicitud que hagamos al servidor, sino que esta parte de URL se queda en solicitud dentro del propio navegador, e interactúa el propio usuario con ello. Es por esto que estas redirecciones se tienen que hacer desde el usuario, como por ejemplo por medio de JavaScript.

Google además no sigue las etiquetas, por lo que este tipo de redirecciones no tiene una significancia directa a nivel de SEO. Por lo que, ¿Por qué pongo esto en mi blog de SEO Técnico? Se debe a que si que afecta a la propia experiencia del usuario.

Aunque el hash tiene más usos, el uso más común suele ser para hacer que el usuario llegue a la sección/etiqueta con la misma ID que se marca en la etiqueta/hash de la URL, por lo que permite ordenar un poco más el contenido dentro de una misma página.

Esta práctica la realiza Wikipedia, la documentación de Google, o esta misma web en los artículos con varios encabezados.

Redirecciones sencillas de hash

Podríamos redirecciones siempre a un hash en concreto, aunque esto suele carecer de sentido, así que expongo un código mas rápido. Imaginemos que teníamos una sección que se llamaba "transferwise", pero ahora, dicha empresa actualmente se llama "wise". Es posible que muchos usuarios conserven la URL antigua. Entonces el Script que tendríamos que poner sería el siguiente:

<script>
if (window.location.hash === "#transferwise") {
window.location.hash = "#wise";
}
</script>

De esta forma ponemos un condicional que solo afectará en la URL cuando tenga el Hash transferwise.

Redirecciones complejas de Hash

También puede ocurrir que se haya seguido una política sin control acerca de todo esto en la web. Y a veces los separadores del hash son barra bajas, y se hace de forma automática case sensitive, distinguiendo mayúsculas y minúsculas, consiguiendo que se descuadren todos los enlaces de este tipo.

Podemos jugar un poco con regex y poner un script en toda la web, que redirecciones todos los hash a la versión donde es con minúsculas y con guión para espaciar las palabras, por ejemplo así:

<script>
document.addEventListener('DOMContentLoaded', function() {
var fragment = decodeURI(window.location.hash.substr(1));
if (fragment.indexOf('_') !== -1) {
var newFragment = fragment.replace(/_/g, '-').toLowerCase();
history.replaceState(null, '', window.location.href.replace(fragment, newFragment));
} else if (fragment.match(/[A-Z]/)) {
var newFragment = fragment.toLowerCase();
history.replaceState(null, '', window.location.href.replace(fragment, newFragment));
}
});
</script>

Esto generaría una redirección automática para unificar todos los criterios de URL con Hash.

Hacer más agradables los enlaces con etiqueta

Al final esta etiqueta entre sus usos principales, es el de poder navegar entre distintas secciones del mismo documento. A veces se ponen enlaces a modo de índice para mejorar la navegación y la experiencia del usuario, pero hacer un cambio de golpe, puede resultar un poco brusco. aquí expongo dos ejemplos para hacer esta experiencia más agradable:

<script>
if (fragment) {
var targetElement = document.getElementById(fragment);
if (targetElement) {
setTimeout(function() {
targetElement.scrollIntoView();
}, 100); // Espera 100ms antes de desplazarte
}
};
</script>

Si por ejemplo tenemos una barra de navegación, de por ejemplo 95px que tiene un fixed, podemos hacerlo aún más específico. Ejemplo:

<script>
document.addEventListener('DOMContentLoaded', function() {
const smoothScroll = (target, duration) => {
const targetElement = document.querySelector(target);
if (!targetElement) return;
const targetPosition = targetElement.offsetTop - 95;
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
const startTime = performance.now();
const easeInOutQuad = (t) => t<.5 ? 2*t*t : -1+(4-2*t)*t;
const animation = (currentTime) => {
const timeElapsed = currentTime - startTime;
const progress = Math.min(timeElapsed / duration, 1);
const easing = easeInOutQuad(progress);
window.scrollTo(0, startPosition + (distance * easing));
if (timeElapsed < duration) requestAnimationFrame(animation);
};
requestAnimationFrame(animation);
};
const anchorLinks = document.querySelectorAll('a[href^="#"]');
anchorLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const target = this.getAttribute('href');
smoothScroll(target, 1200);
});
});
});
</script>

Redireccionar de parámetro a hash

Es posible que en alguna red social haya problemas a la hora de utilizar el ancla debido al uso del hastag, entonces no te permita añadir una URL bien hasta el punto en concreto que quieres añadir.

A día de hoy la mayoría de redes sociales han solucionado dicho problema. Pero se podría redireccionar con JS así:

<script>
// Detecta si la URL actual contiene el hash específico
if(window.location.href.includes("?redirecciones-sencillas-de-hash")) {
// Construye la nueva URL con el hash
var nuevaUrl = "https://carlos.sanchezdonate.com/articulo/redireccionar-etiquetas-anclas-o-hash-de-una-url/#redirecciones-sencillas-de-hash";
// Redirige a la nueva URL
window.location.replace(nuevaUrl);
}
</script>