Métodos para redireccionar páginas web

publicado en: Apache, HTML, HTTP/HTTPS, JavaScript, PHP, WordPress | 0
 
 

Índice General

En esta entrada, veremos distintos métodos para redireccionar una página web, es decir, que cuando accedamos a una página web, esta nos redireccione a otra de forma automática.

Método 1: Con HTML y etiqueta META (Volver al índice General)
Con este métido, tilizaremos la etiqueta llamada META. Esta etiqueta va ubicada entre la etiqueta de apertura <head> y la etiqueta de cierre </head>. La sintaxis sería la siguiente:

<meta http-equiv="acción" content="segundos; url=url_de_destino" />

En el atributo http-equiv, en el valor acción, utilizaremos refresh que de manera automatica recargará la página. En el atributo content, por un lado, con el valor segundos indicamos los segundos que transcurrirán para que la página sea redireccionada y por otro lado con el valor de url indicamos la URL de la página a donde queremos redirigir.

Un ejemplo de como quedaría nuestro documento HTML si quisieramos redireccionar, transcurridos 60 segundos, a la URL http://www.zeppelinux.es

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>ZeppelinuX</title>
    <meta http-equiv="refresh" content="60; url=http://www.zeppelinux.es">
    ...
  </head>
  <body>
    ...
    ...
  </body>
</html>

Método 2: Con HTML y JavaScript con el evento onload en la etiqueta BODY (Volver al índice General)
El evento onload de JavaScript se produce cuando un navegador carga un documento HTML o una imagen. Se ha de colocar en la etiqueta <body>, aunque en versiones modernas de JavaScript, también lo aceptan otros elementos como las imágenes.
Con este método, la redirección es inmediata, nada más acceder a la página web, nos redireccionará a otra URL. No hay parámetro que configure el tiempo que transcurrirá hasta que se produce la redirección.
La sintaxis sería la siguiente:

<body onload="location.href='url_de_destino'">

Un ejemplo de como quedaría nuestro documento HTML si quisieramos redireccionar, inmediatamente, a la URL http:/publicacionesjc.chickenkiller.com

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>ZeppelinuX</title>
     ...
  </head>
  <body onload="location.href='publicacionesjc.chickenkiller.com'">
    ...
    ...
  </body>
</html>

Método 3: Con PHP (Volver al índice General)
Al igual que con el método anterior, la redirección es inmediata.

<?php
  header ("Location: http://publicaciones.zeppelinux.es");
?>

Método 4: Con JavaScript (Volver al índice General)
Para redirigir de forma inmediata, el script de JavaScript sería el siguiente:

<script type="text/javascript">  
    window.location="http://publicacionesjc.chickenkiller.com";  
</script>

Un ejemplo de como quedaría nuestro documento HTML si quisieramos redireccionar, inmediatamente, a la URL http:/publicacionesjc.chickenkiller.com

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Redirigir p&aacute;gina</title>
  </head>
  <body>
    <strong>Redirigir p&aacute;gina</strong>
    <script type="text/javascript">
      window.location="http://publicacionesjc.chickenkiller.com";  
    </script>
  </body>
</html>

Si lo que queremos es que transcurra un tiempo antes de hacer la redirección, el script de JavaScript sería el siguiente:

<script type="text/javascript">
  function redireccionar(){
      window.location="http://publicacionesjc.chickenkiller.com";
  }
  setTimeout ("redireccionar()", 5000);
</script>

En primer lugar creamos una función llamada redireccionar, con el código necesario para redirigir a la URL http://publicaciones.zeppelinux.es.

Con setTimeout, ejecutamos la función redireccionar transcurrido un determinado tiempo. El tiempo lo expresaremos en milisegundos, en este caso 5 segundos (5 x 1000).

Un ejemplo de como quedaría nuestro documento HTML si quisieramos redireccionar, transcurridos 5 segundos, a la URL http://publicaciones.zeppelinux.es

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Redirigir p&aacute;gina</title>
    <script type="text/javascript">
      function redireccionar(){
        window.location="http://publicacionesjc.chickenkiller.com";
      }
      setTimeout ("redireccionar()", 5000);
    </script>
  </head>
  <body>
    <strong>Redirigir p&aacute;gina</strong>
    <br>En 5 segundos se redigir&aacute; a http://publicaciones.zeppelinux.es
  </body>
</html>

Método 5: Con el archivo .htaccess con Redirección 301 (Volver al índice General)
Las redirecciones 301 son comandos que permiten enviar a usuarios y buscadores de una URL a otra automáticamente. Con este método utilizaremos el archivo .htaccess y una redirección 301 para redirigir nuestra URL antigua a otra distinta.
Para conservar toda la estructura de URLs y redirigirlo a otro dominio, por ejemplo a la URL http://publicaciones.zeppelinux.es, dentro de .htaccess escribimos lo siguiente:

Redirect 301 / https://www.zeppelinux.es

O también:

Redirect permanent / https://www.zeppelinux.es

Para redireccionar todo el contenido del viejo dominio a la página principal del nuevo dominio, dentro de .htaccess escribimos lo siguiente:

redirectMatch 301 ^(.*)$ https://www.zeppelinux.es,

O también:

redirectMatch permanent ^(.*)$ https://www.zeppelinux.es

Método 6: Con el archivo .htaccess con Redirección Rewrite (Volver al índice General)
También se puede realizar una redirección de http:// a https:// forzando que todas las páginas de tu dominio usen dicho protocolo seguro. Para lo cual habrá que modificar el archivo .htaccess ubicado en el directorio raíz de tu instalación y añadir el siguiente código:

# BEGIN Redirigir tráfico HTTP a HTTPS con rewrite
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.zeppelinux.es/$1 [R,L]
# END Redirigir tráfico HTTP a HTTPS con rewrite

Con este código todo el tráfico dirigido a http://www.zeppelinux.es por el puerto 80 se redirigirá a la URL https://www.zeppelinux.es.
 
Enlaces externos (Volver al índice General)

Espero que este artículo os haya sido de utilidad. Si pensáis que podéis colaborar para mejorar este artículo, que hay algo erróneo en él o simplemente deseáis comentarlo, por favor, dejad vuestra opinión más abajo.
  Configuración de privacidad y de cookies.
Seguir J. Carlos:

Técnico Informático - Desarrollo Web - Administración de Redes

Técnico Informático. Desarrollo Web. Administración de redes.

Últimas publicaciones de

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.