Cómo redirigir una página web »Wiki Ùtil Programar Plus

0

Una redirección es cuando se visita una página web en una determinada URL, cambia a una URL diferente. Por ejemplo, una persona visita “sitio web.com/página-a” en su navegador y, en su lugar, se le redirige a “sitio web.com/página-b”. Esto es muy útil si queremos redirigir una determinada página a una nueva ubicación, cambiar la estructura de la URL de un sitio, eliminar la “www”. parte de la URL, o incluso redirigir a los usuarios a otro sitio web por completo (solo por nombrar algunos).

Digamos que acabamos de mover nuestro sitio web y queremos cerrar el anterior. Sin embargo, no queremos que todas esas páginas del sitio antiguo den una temida 404 No encontrado. Lo que necesitamos es que esos enlaces antiguos redirijan al mismo contenido en nuestro nuevo sitio.

Aquí está nuestro ejemplo: queremos old-website.com/blog/post para redirigir a new-website.com/blog/post, junto con todas las demás publicaciones que usan ese mismo formato de URL. También sería bueno si nuestros redireccionamientos informaran a los motores de búsqueda que este cambio es permanente, por lo que deberían actualizarse en consecuencia.

Entonces, ¿cómo hacemos eso? Bueno, antes de comenzar, debemos aprender un poco sobre HTTP.

Códigos de respuesta HTTP

Cada vez que ingresamos una URL o hacemos una solicitud desde un navegador, usamos el Protocolo de transferencia de hipertexto (HTTP). Aunque suena como un nombre genial para una película policial de ciencia ficción, en realidad es el proceso mediante el cual solicitamos recursos como CSS, HTML e imágenes de un servidor. Una vez que hayamos enviado una solicitud, estos activos darán una respuesta como “¡Hola, estoy aquí, vamos!” (código de respuesta HTTP 200 OK). Hay muchos tipos diferentes de código de respuesta HTTP, el más familiar quizás sea 404 No encontrado; Las páginas web pueden responder con un estado 404, pero también puede hacerlo cualquier otro activo que solicitemos, ya sea una imagen o cualquier otro tipo de activo.

Cada respuesta HTTP se clasifica bajo un cierto número de tres dígitos, por lo que 404 No encontrado es un código de estado 4XX para aclarar que es un error del cliente y 200 está en la categoría 2XX para indicar que es un mensaje de éxito de algún tipo. Estamos interesados ​​en la categoría 3XX de respuesta HTTP, como 301 Movido Permanentemente o 302 Encontrado, porque estos son los códigos de estado reservados específicamente para redireccionamientos. Dependiendo del método que elijamos, no necesariamente necesitaremos conocer estos códigos, pero es esencial para otros.

En nuestro caso usaremos un redireccionamiento 301 porque algunos navegadores web o servidores proxy almacenarán en caché este tipo, haciendo inaccesible la página anterior que, en este caso, es exactamente lo que queremos.

Entonces, ¿cómo hacemos para redirigir una página web?

Redireccionamientos HTML

Quizás la forma más sencilla de redirigir a otra URL es con la etiqueta Meta Refresh. Podemos colocar esta metaetiqueta dentro del <head> en la parte superior de cualquier página HTML como esta:

<meta http-equiv="refresh" content="0; URL='http://new-website.com'" />

El content El atributo es la demora antes de que el navegador redirija a la nueva página, por lo que aquí lo configuramos en 0 segundos. Tenga en cuenta que no necesitamos establecer un código de estado HTTP, pero es importante volver a verificar la apertura y el cierre extraños de las comillas anteriores (hay comillas entre comillas, por lo que deben ser de diferentes tipos y coincidencias).

Aunque este método es la forma más fácil de redirigir a una página web, existen algunas desventajas. Según el W3C, hay algunos navegadores que se asustan con la etiqueta de actualización Meta. Los usuarios pueden ver un destello cuando se carga la página A antes de ser redirigidos a la página B. También deshabilita el botón Atrás en los navegadores más antiguos. No es una solución ideal y se desaconseja su uso.

Una opción más segura podría ser redirigir el sitio web con JavaScript.

Redireccionamientos JavaScript

Redirigir a otra URL con JavaScript es bastante fácil, simplemente tenemos que cambiar el location propiedad en el window objeto:

window.location = "http://new-website.com";

Sin embargo, JavaScript es extraño, hay MUCHAS formas de hacer esto.

window.location = "http://new-website.com";
window.location.href = "http://new-website.com";
window.location.assign("http://new-website.com");
window.location.replace("http://new-website.com");

Sin mencionar que podrías usar location ya que el objeto de ventana está implícito. O self o top.

Con el location object también podemos hacer muchas otras cosas interesantes, como recargar la página o cambiar la ruta y el origen de la URL.

Aquí hay algunos problemas:

  1. JavaScript debe estar habilitado y descargado / ejecutado para que esto funcione.
  2. No está claro cómo reaccionan los motores de búsqueda a esto.
  3. No hay códigos de estado involucrados, por lo que no puede confiar en la información sobre el redireccionamiento.

Lo que necesitamos es una solución del lado del servidor que nos ayude enviando respuestas 301 a motores de búsqueda y navegadores.

Redireccionamientos de Apache

Quizás el método más común para redirigir una página web es mediante la adición de reglas específicas a un `.htaccess` en un servidor web Apache. Entonces podemos dejar que el servidor se encargue de todo.

`.htaccess` es un documento que nos da la posibilidad de dar órdenes a Apache, ese bit de software que se ejecuta en el servidor. Para redirigir a los usuarios a nuestro nuevo sitio, crearemos un nuevo archivo .htaccess (o editaremos el existente) y lo agregaremos al directorio raíz del antiguo sitio web. Aquí está la regla que agregaremos:

Redirect 301 / http://www.new-website.com

Cualquier página que el usuario visite en el sitio web antiguo ahora será redirigida a la nueva. Como puede ver, colocamos el código de respuesta HTTP justo al principio de la regla de redireccionamiento.

Vale la pena mencionar que este tipo de redireccionamiento solo funciona en servidores Linux con la mod_rewrite habilitado, un módulo de Apache que nos permite redirigir las URL solicitadas en el servidor al verificar un patrón determinado y, si se encuentra ese patrón, modificará la solicitud de alguna manera. La mayoría de las empresas de alojamiento tienen esto habilitado de forma predeterminada, pero ponerse en contacto con ellas es la mejor opción si hay un problema. Si está buscando más información sobre mod_rewrite, hay un gran tutorial sobre tuts +. También hay muchos fragmentos de .htaccess aquí en CSS-Tricks.

Volviendo a nuestro ejemplo, si usamos el código anterior, un usuario irá a “old-website.com/blog/post” y será enviado a “new-website.com”, que no es muy fácil de usar porque ganó ‘ Ver la página real que pidieron. En su lugar, agregaremos la siguiente regla a nuestro archivo `.htaccess` para redirigir todas esas publicaciones de blog al lugar correcto:

RedirectMatch 301 /blog(.*) http://www.new-website.com$1

O quizás queremos redirigir páginas individuales de manera muy específica. Podemos agregar las reglas como esta:

Redirect 301 /page.html http://www.old-website/new-page.html

Y para los errores, podemos redirigir a los usuarios a nuestra página 404 (probablemente repleta de juegos de palabras y gifs):

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule .* 404.html [L]
</IfModule>

Primero comprobamos si tenemos el mod_rewrite está disponible, entonces podemos activarlo y, si no se encuentra el archivo o directorio, enviamos al usuario a nuestra página 404. Es bastante bueno que el contenido de la página que ven sea del 404.html archivo mientras que la URL solicitada seguirá siendo la misma.

Si no se siente cómodo jugando con archivos `.htaccess` y tiene WordPress instalado, entonces hay una extensión ingeniosa que puede encargarse de estas cosas por nosotros.

Redireccionamientos de Nginx

Si su servidor está ejecutando Nginx como servidor web, entonces en el archivo `nginx.conf` puede agregar un bloque de servidor para manejar estas solicitudes de redireccionamiento:

server {
  listen 80;
  server_name old-website.com;
  return 301 $scheme://new-website.com$request_uri;
}

Nuevamente estamos usando la respuesta HTTP 301 y, con la scheme variable, solicitaremos http:// o https:// dependiendo de lo que se utilizó en el sitio web original. Podría ser una buena idea echar un vistazo más de cerca al HTML5 Boilerplate nginx.conf para conocer las mejores prácticas sobre otras cosas relacionadas con Nginx.

Redirecciones Lighttpd

Para aquellos servidores que ejecutan un servidor web Lighttpd, realiza una redirección importando primero el mod_redirect módulo y usando url.redirect:

server.modules  = (
  "mod_redirect"
)

$HTTP["host"] =~ "^(www.)?old-website.com$" {
  url.redirect = (
    "^/(.*)$" => "http://www.new-website.com/$1",
  )
}

Redireccionamientos PHP

Con PHP podemos usar la función de encabezado, que es bastante sencilla:

<?php 
  header('Location: http://www.new-website.com');
  exit;
?>

Esto debe establecerse antes de cualquier marcado o contenido de cualquier otro tipo, sin embargo, hay un pequeño inconveniente. De forma predeterminada, la función envía una respuesta de redireccionamiento 302 que les dice a todos que el contenido solo se ha movido temporalmente. Teniendo en cuenta nuestro caso de uso específico, necesitaremos mover permanentemente los archivos a nuestro nuevo sitio web, por lo que tendremos que realizar una redirección 301 en su lugar:

<?php
  header('Location: http://www.new-website.com/', true, 301);
  exit();
?>

El opcional true El parámetro anterior reemplazará un encabezado previamente establecido y el 301 al final es lo que cambia el código de respuesta al correcto.

Redirecciones de Ruby on Rails

Desde cualquier controlador en un proyecto Rails, podemos redirigir rápidamente a un nuevo sitio web con redirect_to y el :status opción establecida en :moved_permanently. De esa manera anulamos el código de estado 302 predeterminado y lo reemplazamos con Moved Permanently:

class WelcomeController < ApplicationController
  def index
    redirect_to 'http://new-website.com', :status => :moved_permanently 
  end
end

En Rails 4 hay una forma más fácil de manejar estas solicitudes donde podemos agregar un redirect en el routes.rb archivo que envía automáticamente una respuesta 301:

get "/blog" => redirect("http://new-website.com")

O si queremos redirigir cada artículo del blog a publicaciones en el nuevo sitio web, podemos hacerlo reemplazando lo anterior con lo siguiente:

get "/blog/:post" => redirect("http://new-website.com/blog/%{post}")

Redirecciones de .NET

Nunca antes había escrito nada con el marco .NET, pero parece que hay documentación clara en la Red de desarrolladores de Microsoft.

Redirecciones de Node.js

Aquí hay una configuración local muy rápida que explica cómo funcionan las redirecciones con Node. Primero incluimos el http módulo y cree un nuevo servidor, seguido del .writeHead() método:

var http = require("http");

http.createServer(function(req, res) {
  res.writeHead(301,{Location: 'http://new-website.com'});
  res.end();
}).listen(8888);

Si crea un nuevo archivo llamado index.js y pegue el código de arriba y luego ejecute node index.js en la línea de comando encontrará la versión local del sitio web que redirige a new-website.com. Pero para redirigir todas las publicaciones en el /blog sección tendremos que analizar la URL de la solicitud con la práctica aplicación de Node url módulo:

var http = require("http");
var url = require("url");

http.createServer(function(req, res) {
  var pathname = url.parse(req.url).pathname;
  res.writeHead(301,{Location: 'http://new-website.com/' + pathname});
  res.end();
}).listen(8888);

Utilizando el .writeHead() función, luego podemos adjuntar el nombre de la ruta de la solicitud al final de la cadena de URL. Ahora redirigirá a la misma ruta en nuestro nuevo sitio. ¡Hurra por JavaScript!

Redirecciones de matraces

Con el marco Flask encima de Python, simplemente podemos crear una ruta que apunte a subpáginas con el redirect función, nuevamente 301 tiene que ser una opción que se pasa al final porque el valor predeterminado es 302:

@app.route('/notes/<page>')
def thing(page):
  return redirect("http://www.new-website.com/blog/" + page, code=301)

Si conoce otros trucos para redirigir una página web, agregue un comentario a continuación y actualizaré esta publicación con la información más reciente.

(Visited 8 times, 1 visits today)