HTML Redirect: Como redirecionar suas Páginas HTML

HTML Redirect

O HTML Redirect pode ser necessário quando você precisar realizar o redirecionamento de uma página para outra. Portanto, é importante entender o que é, como funciona e como utilizar o HTML Redirect. Neste artigo, vamos abordar os seguintes tópicos:

O que é o HTML Redirect

Ao possuir mais que um domínio ou diversas páginas web, é possível que você precisar utilizar o HTML Redirect.  O HTML Redirect nada mais é que uma forma de redirecionar uma página para outra através do próprio HTML. Podemos estar fazendo o redirecionamento através do metadados. Também é possível utilizar o HTML Redirect a partir do JavaScript e também a partir do PHP. Vamos então estudar esses métodos nos tópicos abaixo.

HTML Redirect através de Metadados

Para poder criar um sistema de redirecionamento do site, basta estar incluindo a tag <meta> ao <head> da nossa página com o o atributo http-equiv=”refresh”. Posteriormente, utilizamos o atributo content para indicar em quanto tempo, após carregar a página, o redirecionamento acontecerá e qual será a URL destino. Veja a sintaxe do HTML Redirect no exemplo de código abaixo:

Observe então o exemplo de um documento HTML com o metadados de redirecionamento, através do código abaixo:

No exemplo acima, nossa página será aberta, e após 5 segundos, a mesma será redirecionada para ‘https://www.homehost.com.br/’. Porém, também podemos colocar para que o redirecionamento ocorra de imediato, para isso utilizamos o valor do tempo como 0 (zero):

Dessa forma, assim que abrir a página, a mesma já será automaticamente redirecionado para ‘https://www.homehost.com.br/’.

Esse tipo de redirecionamento é conhecido como código 301. O código “301” é interpretado como “movido permanentemente”. Ou seja, esse código informa aos visitantes do site e, também, aos mecanismos de pesquisa que sua página da web foi movida permanentemente para um novo local com conteúdo equivalente. O redirecionamento 301 é o mais indicado para melhorar o SEO do seu site.

Além disso, este tipo de HTML Redirect é um redirecionamento realizado do lado do cliente, onde é informado ao navegador para solicitar outra página.

É importante estar atendo que nem todos os navegadores antigos suportam esse tipo de metadados. Portanto, recomenda-se que sempre deixe uma mensagem com um link para a página de destino. Vejamos então o exemplo abaixo:

Desta forma, caso o navegador não suporte o HTML Redirect, você garante que o mesmo terá uma opção para ser direcionado a página desejada.

Redirecionamento através do JavaScript

Assim como o método anteriormente explicado, podemos utilizar o javaScript no código HTML para poder estar redirecionando o usuário. Este tipo de redirecionamento também é realizado do lado do cliente.

Para realizar este redirecionamento basta incluir um script no nosso documento HTML. Portanto, vejamos abaixo a função do JavaScript para realizar o redirecionamento:

Esta função retorna a URL digitada. Ou seja, redireciona para a URL digitada. veja o exemplo abaixo desta função do JavaScript:

Portanto, vejamos como aplicar isso em um documento HTML no exemplo abaixo:

Também podemos utilizar apenas a função window.location do javascript, e teremos o mesmo resultado. Vejamos os exemplos abaixo:

Você pode estar estudando mais sobre as funções de Redirect HTML através do JavaScript a partir deste artigo da W3Docs.

Redirecionamento através do PHP

Diferentemente do Redirecionamento através do metadados e também através do JavaScript, ao utilizar o PHP, fazemos o redirecionamento do lado do servidor, e não mais do lado do cliente. Isso acontece devido ao fato de o PHP ser uma linguagem de programação Back End, ou seja, que roda dentro do servidor.

Para realizar o HTML Redirect com o PHP, basta utilizar a função header() e a função exit() no inicio do nosso documento. Observe que é importante que este documento seja salvo com a extensão .php.  Também podemos apenas estar criando um arquivo nomeado de index.php com as funções de redirecionamento e incluir no diretório da página que deve realizar o redirecionamento.

A função header() envia um cabeçalho HTTP diretamente para o cliente. Dessa forma, quando cliente acessa sua página, automaticamente o servidor estará retornando, através do PHP, um novo cabeçalho, que no caso será descrito pela função header(). A função exit() apenas servirá para garantir que a página mostre o conteúdo restante, e, portanto, realize o redirecionamento instantaneamente.

Na função header() utilizamos o Location, onde informamos a URL a qual será redirecionado a página. Dessa forma, teremos o seguinte código PHP:

Portanto vejamos o exemplo abaixo:

Porém, no caso acima, o php vai definir como o padrão de redirecionamento o código 302. Dessa forma, será entendido que é um redirecionamento temporário, geralmente utilizado para páginas em manutenção. Portanto, podemos complementar a nossa função para definir o padrão de código. Vamos então exemplificar como criar um código 301, ou seja, um redirecionamento Permanente:

Desta forma, conseguimos então indicar aos usuários, assim como aos mecanismos de busca, qual é o tipo de redirecionamento que estamos fazendo.

Portanto, vejamos agora o exemplo abaixo:

Você pode ainda estudar mais sobre o HTML Redirect através do PHP a partir do artigo da W3Docs.

Recomendações sobre Redirecionamentos

Você pode estar utilizando a forma que melhor encontrar para realizar o redirecionamento. Apesar de a função de HTML Redirect com metadados ser muito mais prática e também garantir sua funcionalidade, a função através do PHP garante um maior controle sobre o redirecionamento, além de funcionar do lado do servidor. Também é possível estar fazendo um redirecionamento através de outras linguagens, assim como também através do arquivos .htaccess.

Portanto, para fazer um redirecionamento, recomendamos que escolha a linguagem de programação (ou de marcação) que você mais utiliza ou tenha preferência.

Enfim, com este artigo, você possui um manual completo para poder utilizar técnicas de HTML Redirect, e assim poder redirecionar suas páginas corretamente! Recomendamos que pratiquem os exemplos acima. Caso pretendam utilizar nas suas páginas, recomendamos que antes realizem o teste para garantir que tudo funcionará perfeitamente.

Publicado por

Rafael Marques

Desenvolvedor Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rm.developer/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat