Para hacer nuestro contenido accesible a más usuarios, hemos traducido este artículo del inglés al español mediante traducción automática. Haz clic aquí para leer el artículo original. Si detectas algún problema en el contenido, no dudes en escribirnos a report-osteam@semrush.com.
Una redirección JavaScript utiliza el lenguaje de programación JavaScript (JS) para enviar a los usuarios de una URL a otra.
Puedes utilizar una redirección JS para redirigir a los usuarios a una página de confirmación después de que envíen un formulario o para proporcionar una redirección alternativa si se elimina una página, por ejemplo.
Pero en general no se recomiendan para el SEO porque los motores de búsqueda pueden tener dificultades para rastrear e indexar los sitios que dependen de ellos.
En este artículo, hablaremos sobre la creación de una redirección con JS y sugeriremos alternativas.
Cómo redirigir con JavaScript
Hay tres formas principales de redirigir a otra URL con JavaScript:
- window.location.href
- ubicación.asignar()
- ubicación.reemplazar()
Establecer una nueva propiedad window.location.href
Puedes utilizar la propiedad window.location.href en JavaScript para obtener o establecer la URL de la página web actual.
El uso de "window.location.href" para la redirección simula la acción de hacer clic en un hipervínculo. Añade una nueva entrada al historial de sesiones del navegador. Esto permite a los usuarios utilizar el botón "Atrás" para volver a la página anterior.
Para redirigir a un usuario a una URL diferente, puedes asignar una nueva URL a esta propiedad.
La sintaxis es:
window.location.href = 'https://exampleURL.com/';Cuando se vincula a un cambio desencadenado por la interacción del usuario, como la pulsación de un botón, redirigiría al usuario a "https://exampleURL.com/".
¿Cómo?
Tienes que añadir el código dentro de las etiquetas <script> dentro de la cabecera<> de tu página web y añadir un " manejador deeventos " a un botón.
He aquí cómo puedes hacerlo:
<html>
<head>
<script>
function miFunción() {
window.location.href = "https://exampleURL.com/";
}
</script>
</head>
<body>
<h2>Redirigir a una página web</h2>
<p>El método location.href redirige al usuario a una nueva página web:</p>
<botón onclick="miFunción()">Redirigir</botón>
</body>
</html>Cuando el usuario pulsa el botón "Redirigir", se activa el controlador de eventos onclick, que llama a la función myFunction(). La ejecución de miFunción( ) cambia el valor de "location.href" a"https://exampleURL.com/", lo que indica al navegador que navegue a esa URL.
Repasemos otros dos casos de uso de las redirecciones JavaScript.
El siguiente ejemplo muestra el uso de setTimeout() para una redirección JavaScript.
Es una función incorporada en JavaScript que te permite ejecutar otra función después de un cierto tiempo (10 segundos en el ejemplo de abajo).
<html>
<head>
<script type="text/JavaScript">
function Redirect() {
window.location = "https://exampleURL.com/";
}
document.write("Serás redirigido a la página principal en 10 segundos");
setTimeout(function() {
Redirect();
}, 10000);
</script>
</head>
</html>Otro caso de uso podría ser redirigir a un usuario en función del navegador que esté utilizando.
<html>
<head>
<title>Título de tu página</title>
<script type="text/javascript">
window.onload = function() {
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.includes('chrome')) {
window.location.href = "http://www.location.com/chrome";
} else if (userAgent.includes('safari')) {
window.location.href = "http://www.location.com/safari";
} else {
window.location.href = "http://www.location.com/other";
}
}
</script>
</head>
<body>
<!-- Tu contenido del cuerpo va aquí -->
</body>
</html>Consejo principal: Evita crear redireccionamientos JavaScript en la cabecera sin vincularlos a acciones del usuario para evitar posibles bucles de redireccionamiento (más sobre esto más adelante). Para evitar que los usuarios utilicen el botón "atrás", utiliza "window.location.replace".
Redireccionar utilizando el método location.assign()
Puedes utilizar"window.location.assign" como alternativa a"window.location.href" para las redirecciones.
La sintaxis es:
window.location.assign('https://www.exampleURL.com/');Esto es lo que parece dentro de una etiqueta script:
<script type="text/JavaScript">
function Redirect() {
window.location.assign("https://exampleURL.com/");
}
</script>Desde la perspectiva del usuario, una redirección utilizando "window.location.assign()" tiene el mismo aspecto que utilizando "window.location.href".
Esto se debe a que:
- Ambos crean una nueva entrada en el historial de la sesión de navegación (similar a hacer clic en un enlace)
- Ambos permiten a los usuarios volver atrás y ver la página anterior
De forma similar a "window.location.href", dirige al navegador para que cargue la URL especificada y añada esta nueva página al historial de la sesión, permitiendo a los usuarios utilizar el botón "atrás" del navegador para volver a la página anterior.
Sin embargo, "window.location.assign()" llama a una función para mostrar la página situada en la URL especificada. Dependiendo de tu navegador, esto puede ser más lento que simplemente establecer una nueva propiedad href utilizando "window.location.href".
Pero en general, tanto "window.location.assign()" como cambiar la propiedad location.href deberían funcionar bien. La elección entre ellos es sobre todo una cuestión de preferencia personal y de estilo de codificación.
Redireccionar utilizando el método location.replace()
Al igual que "window.location.assign()","window.location.replace()" llama a una función para mostrar un nuevo documento en la URL especificada.
La sintaxis es:
window.location.replace('https://www.exampleURL.com/');Esto es lo que parece dentro de una etiqueta script:
<script type="text/JavaScript">
function Redirect() {
window.location.replace("https://exampleURL.com/");
}
</script>A diferencia de establecer una nueva propiedad de ubicación o utilizar "window.location.assign()", el método reemplazar no crea una nueva entrada en tu historial de sesiones.
En su lugar, sustituye la entrada actual. Esto significa que los usuarios no pueden pulsar el botón "atrás" y volver a la página anterior, anterior a la redirección.
¿Por qué querrías hacerlo?
Algunos ejemplos en los que puedes utilizar el método "window.location.replace()" son:
- Redirecciones de inicio de sesión: Después de iniciar sesión con éxito, los usuarios son dirigidos al contenido principal del sitio, y la página de inicio de sesión se omite intencionadamente del historial del navegador para evitar el retorno accidental a través del botón "atrás".
- Autenticación de usuarios: Para redirigir a los usuarios no autenticados a una página de inicio de sesión, bloqueando el acceso a la página anterior mediante el botón "atrás".
- Envío correcto del formulario: Tras el envío del formulario, "window.location.replace()" puede dirigir a los usuarios a una página de éxito, impidiendo el reenvío del formulario.
- Geolocalización: En función de la geolocalización de un usuario, puedes redirigirle a una versión de tu sitio más adecuada a su ubicación, como un sitio traducido a su idioma
Recapitulando:
Utiliza "window.location.replace()" cuando no quieras que el usuario pueda volver a la página original utilizando el botón "atrás".
Utiliza "window.location.assign()" o "window.location.href" cuando quieras que el usuario pueda volver a la página original utilizando el botón "atrás".
Pero aunque puedes redirigir a los usuarios a una nueva página utilizando métodos de JavaScript como "window.location.assign()" o "window.location.href", normalmente se recomiendan las redirecciones del lado del servidor, como las redirecciones HTTP.
Nota: Si estás empezando o quieres practicar JavaScript, puedes visitar un sitio web como W3Schools, que ofrece un Editor interactivo W3Schools Tryit para JavaScript, HTML, CSS y mucho más:
Cómo entiende y procesa Google las redirecciones JavaScript
Google procesa las redirecciones JavaScript de la misma forma que ejecuta y renderiza JavaScript cuando rastrea e indexa sitios web.
Esto es lo que parece, según Google:
El rastreador web de Google, Googlebot, indexa inicialmente el contenido HTML de una página web. Coloca cualquier JavaScript detectado, incluidas las redirecciones, en una "Cola de renderización" para su posterior procesamiento.
Este proceso de dos pasos ayuda a Google a añadir rápidamente contenido importante a su índice de búsqueda. El JavaScript se trata más tarde porque Google necesita más recursos para procesarlo.
Más información: JavaScript SEO: Cómo optimizar JS para los motores de búsqueda
Pero, a pesar de ser capaz de gestionar las redirecciones JavaScript, Google te aconseja que evites utilizarlas si es posible debido a su elevado consumo de recursos y tiempo de procesamiento.
De esto también se hizo eco John Mueller en un vídeo de las Horas de la Oficina SEO de junio de 2022 (11:25).
Así que las acciones del usuario activadas por JavaScript, como una redirección tras hacer clic en un botón o enlace, pueden pasar desapercibidas. De ahí la preferencia de Google por los redireccionamientos del lado del servidor, como los redireccionamientos HTTP, que ofrecen mayor eficacia, fiabilidad y ventajas de optimización para motores de búsqueda (SEO).
Las redirecciones HTTP tienen varias ventajas sobre las redirecciones JavaScript, entre ellas:
- Historial de navegación coherente: Las redirecciones HTTP no interfieren en el historial de navegación del usuario. A diferencia del método "location.replace()", los usuarios pueden seguir utilizando el botón Atrás para volver a páginas anteriores.
- Facilidad SEO: Los redireccionamientos HTTP proporcionan instrucciones explícitas a los motores de búsqueda cuando las páginas se mueven, lo que ayuda a mantener la clasificación SEO de un sitio. Por ejemplo, a diferencia de una redirección JS, una redirección 301 indica a los motores de búsqueda que el contenido se ha trasladado permanentemente a una nueva URL.
- Rendimiento: Las redirecciones HTTP se producen a nivel de servidor antes de que el contenido se envíe al navegador, lo que puede hacerlas más rápidas que las redirecciones JavaScript y mejorar la velocidad de tu página
- Fiabilidad: Los usuarios pueden optar por desactivar JavaScript por motivos de seguridad y privacidad. Las redirecciones HTTP funcionarán aunque el usuario tenga desactivado JavaScript, lo que las hace más fiables.
Otras lecturas Guía definitiva sobre redireccionamientos: Explicación de las redirecciones URL
Cómo identificar problemas de JavaScript y redireccionamiento HTTP
Cuando trabajes con JavaScript y redireccionamientos HTTP, los problemas más comunes que puedes encontrarte incluyen:
- Redirige cadenas y bucles
- Enlazar a páginas con redireccionamientos
Redirigir cadenas y bucles
Puedes crear una cadena o bucle de redireccionamiento sin darte cuenta al tratar con redireccionamientos.
¿Qué es una cadena de redireccionamiento?
Una cadena de redirecciones es cuando tienes que "saltar" por varias URL antes de llegar a la final.
Por ejemplo, considera que inicialmente tienes una página con la URL A. Luego decides redirigir la URL A a una nueva URL B. En algún momento posterior, decides redirigir la URL B a la URL C.
En este caso, has creado una cadena de redireccionamiento de la URL A a la URL B a la URL C.
Google puede gestionar cómodamente hasta 10 "saltos" de redireccionamiento.
Pero demasiadas cadenas de redireccionamiento pueden causar problemas con el rastreo del sitio web, aumentando posiblemente el tiempo que tarda una página en cargarse. Esto también podría afectar negativamente a tu posicionamiento SEO y molestar a tus usuarios.
Para resolver este problema, redirige la URL A a la URL C (evitando la URL B).
Este es el aspecto que debe tener la cadena de redireccionamiento:
¿Qué es un bucle de redireccionamiento?
Un bucle de redireccionamiento se produce cuando una URL redirige a otra URL, y luego esa segunda URL redirige de nuevo a la primera, creando un ciclo interminable de redireccionamientos.
Por ejemplo:
Este tipo de redireccionamiento está roto y no dirige correctamente a los visitantes o a los motores de búsqueda a la URL deseada.
Para solucionar los bucles de redirección, identifica la página "correcta" y asegúrate de que la otra página redirige a ella. A continuación, elimina las redirecciones adicionales que estén provocando el bucle.
La herramienta Auditoría del Sitio de Semrush puede ayudarte a detectar cadenas de redireccionamiento tanto HTTP como JavaScript.
¿Cómo?
Primero, crea un proyecto o haz clic en uno existente que quieras consultar.
Selecciona la pestaña "Temas" y busca "cadena de redireccionamiento" introduciéndolo en la barra de búsqueda.
Haz clic en "# redirigir cadenas y bucles".
Esto te dará un informe con todos los errores de cadena o bucle de redirección de tu sitio.
El informe incluye detalles como la URL de la página con el enlace de redirección, el tipo de redirección y la "longitud" de la cadena o bucle.
A continuación, puedes iniciar sesión en tu sistema de gestión de contenidos (CMS) y solucionar cada problema.
Enlazar a páginas con redireccionamientos
Supón que rediriges una página antigua a una nueva. Puede que algunas páginas de tu sitio sigan enlazando con la página antigua.
Si es así, los usuarios serán dirigidos a tu antiguo enlace, y desde allí, serán redirigidos a la nueva URL.
Es posible que los usuarios ni siquiera se den cuenta de que esto ocurre. Sin embargo, esta redirección adicional puede sumarse a una "cadena de redirecciones" si no solucionas el problema la primera vez.
Así es como aparece este problema:
Lo mejor es actualizar los antiguos enlaces internos para que enlacen directamente con la URL de tu nueva página.
Así es como debe quedar:
Pero, ¿cómo puedes encontrar enlaces que apunten a redireccionamientos?
Puedes hacerlo yendo a la pestaña "Páginas rastreadas" de la herramienta Auditoría del Sitio:
A continuación, introduce tu antigua URL (la que está siendo redirigida) en el campo "Filtrar por URL de página".
Pulsa "Intro" para ver un informe de la URL que acabas de introducir.
En la sección "Enlaces internos entrantes", encontrarás una lista de enlaces internos que dirigen a tu antigua URL.
Para evitar redireccionamientos innecesarios, basta con sustituir el enlace antiguo por el nuevo.
¿Cómo?
Tendrás que hacerlo yendo a cada página y cambiando manualmente el enlace.
Preguntas frecuentes sobre la redirección de JavaScript
¿Qué es una redirección JavaScript?
Una redirección JavaScript es un método que utiliza JavaScript para dirigir un navegador desde la página web actual a una URL diferente. Suele utilizarse para la navegación condicional o para cambios desencadenados por la interacción del usuario, aunque requiere que el navegador del usuario habilite JavaScript.
¿Las redirecciones con JavaScript son buenas o malas para el SEO?
Los redireccionamientos JavaScript pueden utilizarse sin perjudicar necesariamente al SEO, pero generalmente son menos favorecidos que los redireccionamientos del lado del servidor. Esto se debe a su dependencia de que JavaScript esté activado en el navegador del usuario y a su potencial para ser pasados por alto por los motores de búsqueda durante el proceso de rastreo e indexación.
¿Cuál es la mejor alternativa a una redirección JavaScript?
La mejor alternativa es utilizar métodos de redireccionamiento del lado del servidor, como los redireccionamientos 301, que no dependen de JavaScript y proporcionan instrucciones explícitas que los motores de búsqueda comprenden mejor.
¿Quieres saber más sobre JavaScript y las redirecciones?
Consulta estos recursos: