Docs executáveis de HTML: Redirecionamento

Q: Como redirecionar uma página HTML para outra?

Adicione ao da página antiga, e um link normal para a página nova no body como alternativa. Se você controla o servidor, um redirecionamento 301 é melhor.

Q: Como redirecionar depois de 5 segundos no HTML?

Coloque antes do ponto e vírgula o atraso em segundos: . Avise o leitor na página de que ele será redirecionado e dê a ele um link.

Q: Como fazer uma página se atualizar sozinha?

Use um meta refresh com atraso e sem URL: recarrega a página a cada 30 segundos. Ele recarrega a página inteira e interrompe o leitor, então, para dados ao vivo, atualizar só uma parte da página com JavaScript costuma ser melhor.

Q: Como redirecionar com JavaScript?

Use location.replace('https://example.com/new'). Ele substitui a página atual no histórico, então o botão voltar não retorna à página que redirecionou. location.href = url também funciona, mas mantém a página antiga no histórico.

Redirecionar com uma tag meta refresh

Em HTML puro, um redirecionamento é uma tag <meta http-equiv="refresh"> no <head> da página antiga:

<meta http-equiv="refresh" content="0; url=https://example.com/new-page">

O número é o atraso em segundos, depois vem um ponto e vírgula, depois url= e o endereço de destino. 0 redireciona assim que a página carrega. Aqui está um arquivo completo de "a página mudou de endereço". O atraso está em uma hora para esta prévia ficar parada; numa página real você usaria 0 ou alguns segundos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="3600; url=https://example.com/new-page">
  <link rel="canonical" href="https://example.com/new-page">
  <title>This page has moved</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>This page has moved</h1>
  <p>Go to the <a href="https://example.com/new-page">new page</a>.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    const content = document.querySelector('meta[http-equiv="refresh"]').content;
    const [seconds, target] = content.split(';');
    document.getElementById('out').textContent =
      'The browser will go to ' + target.trim().slice(4) + ' in ' + seconds + ' seconds.';
  </script>
</body>
</html>

Duas alternativas deixam a página segura: o link visível (para quem tem um navegador que não segue o refresh, e para quem usa leitor de tela e quer escolher), e <link rel="canonical">, que diz aos buscadores qual URL é a verdadeira. Se você mudar o atraso para 0 aqui, a própria prévia vai sair para example.com; aperte Reset para ter o exemplo de volta.

Atualizar uma página automaticamente

Deixe a URL de fora e a página se recarrega depois do atraso. content="5" recarrega a cada 5 segundos. A primeira caixa abaixo é uma pequena página com essa tag, para você acompanhar: o horário de carregamento dela pula a cada 5 segundos, e o texto que você digita no campo é apagado pela recarga. A segunda caixa mantém o relógio atualizado com JavaScript e preserva o seu texto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Auto refresh</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .pane { flex: 1; min-width: 220px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px; }
    iframe { width: 100%; height: 110px; border: 0; }
    h2 { font-size: 14px; margin: 0 0 6px; }
  </style>
</head>
<body>
  <div class="row">
    <div class="pane">
      <h2>meta refresh, content="5"</h2>
      <iframe id="refreshing" title="Page that refreshes itself"></iframe>
    </div>
    <div class="pane">
      <h2>JavaScript, setInterval</h2>
      <p>Time: <strong id="clock"></strong></p>
      <input placeholder="Type here">
    </div>
  </div>
  <script>
    document.getElementById('refreshing').srcdoc =
      '<meta http-equiv="refresh" content="5">' +
      '<body style="font-family: system-ui, sans-serif; margin: 0;">' +
      '<p>Loaded at: <strong id="t"></strong></p>' +
      '<input placeholder="Type here">' +
      '<script>t.textContent = new Date().toLocaleTimeString();<\/script>';
    const tick = () => { document.getElementById('clock').textContent = new Date().toLocaleTimeString(); };
    tick();
    setInterval(tick, 1000);
  </script>
</body>
</html>

Um refresh carrega a página inteira de novo, então o que o leitor estava fazendo nela é interrompido. Isso é aceitável numa página com que ninguém interage, como uma tela de status na parede. Para dashboards, placares e feeds, atualize só a parte que muda, como faz a segunda caixa.

Redirecionar com JavaScript

Quando o redirecionamento depende de algo que só o navegador sabe (a escolha do usuário, o estado de login, o tamanho da tela), use JavaScript:

// Replaces the current page in the history: Back skips it
location.replace('https://example.com/new-page');

// Adds a history entry: Back returns to this page
location.href = 'https://example.com/new-page';

Para um redirecionamento, location.replace é quase sempre o que você quer. Com location.href, apertar Voltar leva à página que redirecionou, que redireciona de novo, e o usuário fica preso.

Prefira um redirecionamento no servidor

Um meta refresh ou um script só rodam depois que o navegador baixou a página antiga. Um redirecionamento no servidor responde à requisição com um código de status e o novo endereço, antes de qualquer HTML ser enviado:

301 (movido permanentemente) ou 308: a página tem um novo endereço para sempre. Os buscadores transferem o ranqueamento da URL antiga para a nova.
302 (encontrado) ou 307: uma mudança temporária; a URL antiga continua sendo a principal.

Como configurar depende da sua hospedagem. Algumas formas comuns:

# Apache (.htaccess)
Redirect 301 /old-page https://example.com/new-page

# nginx (inside a server block)
location = /old-page { return 301 https://example.com/new-page; }

# Netlify or Cloudflare Pages (_redirects file)
/old-page  /new-page  301

Use um meta refresh quando não dá para mudar nada no servidor, por exemplo numa hospedagem estática sem regras de redirecionamento. O Google trata um meta refresh instantâneo como um redirecionamento permanente e um com atraso como temporário, então um atraso 0 é o que mais se aproxima de um 301.

Redirecionamentos com atraso e acessibilidade

Um redirecionamento com atraso pode tirar o leitor da página no meio de uma frase. As diretrizes de acessibilidade (WCAG) consideram redirecionamentos com tempo uma falha; um redirecionamento instantâneo não tem problema. Se você precisa esperar, diga isso na página ("Você será redirecionado em 10 segundos"), e inclua sempre o link para que as pessoas possam ir no seu próprio ritmo.

Erros comuns

Um loop de redirecionamento. Duas páginas que fazem refresh uma para a outra jogam o leitor de um lado para o outro para sempre. Verifique para onde a página de destino manda as pessoas.
Uma URL relativa que aponta para o lugar errado. url=new-page é resolvida a partir da URL atual, então de /docs/old ela vai para /docs/new-page. Use um caminho completo como url=/new-page na dúvida.
Nenhum link de alternativa. Sempre adicione um link normal para a página nova no body.
Usar location.href para redirecionar. O botão voltar então leva a um loop de redirecionamento. Use location.replace.
Usar meta refresh quando você controla o servidor. Configure um 301; é mais rápido e mais claro para qualquer ferramenta.

Perguntas frequentes

Como redirecionar uma página HTML para outra?

Adicione <meta http-equiv="refresh" content="0; url=https://example.com/new"> ao <head> da página antiga, e um link normal para a página nova no body como alternativa. Se você controla o servidor, um redirecionamento 301 é melhor.

Como redirecionar depois de 5 segundos no HTML?

Coloque antes do ponto e vírgula o atraso em segundos: <meta http-equiv="refresh" content="5; url=https://example.com/new">. Avise o leitor na página de que ele será redirecionado e dê a ele um link.

Como fazer uma página se atualizar sozinha?

Use um meta refresh com atraso e sem URL: <meta http-equiv="refresh" content="30"> recarrega a página a cada 30 segundos. Ele recarrega a página inteira e interrompe o leitor, então, para dados ao vivo, atualizar só uma parte da página com JavaScript costuma ser melhor.

Um redirecionamento com meta refresh é ruim para o SEO?

O Google o segue: um meta refresh instantâneo (atraso 0) é tratado como um redirecionamento permanente, e um com atraso como temporário. Um 301 no servidor continua sendo o jeito recomendado, porque é mais rápido e todo rastreador e navegador o entende.

Como redirecionar com JavaScript?

Use location.replace('https://example.com/new'). Ele substitui a página atual no histórico, então o botão voltar não retorna à página que redirecionou. location.href = url também funciona, mas mantém a página antiga no histórico.

Conceitos relacionados