Redirecionamento 301 no Netlify: guia para React e Vite

Redirecionamento 301 no Netlify: guia para React e Vite

O redirecionamento 301 no Netlify é configurado por regras no arquivo _redirects ou no netlify.toml, que dizem ao servidor para enviar visitantes e robôs de uma URL antiga para uma nova, informando que a mudança é permanente. Para sites em React e Vite, existe ainda uma regra essencial com status 200 que evita o erro 404 ao recarregar rotas internas. Neste guia você aprende as duas coisas, com exemplos prontos.

O que é um redirecionamento 301 e por que ele importa para SEO

O código 301 significa "movido permanentemente". Quando você troca o endereço de uma página, o 301 avisa o Google que o conteúdo mudou de lugar e ajuda a transferir o histórico da URL antiga para a nova.

Sem esse aviso, o visitante cai em uma página 404, o robô de busca perde o caminho e você pode perder posições conquistadas. Por isso o redirecionamento 301 é parte básica de qualquer migração de site ou mudança de estrutura de URLs.

Situações comuns em que ele é necessário:

• Mudar o slug de uma página ou de um post do blog.
• Migrar de um domínio para outro.
• Unificar versões com e sem "www".
• Trocar um site antigo por um novo em React.

Como criar redirects com o arquivo _redirects

A forma mais simples é criar um arquivo chamado _redirects (sem extensão) dentro da pasta que será publicada. Em projetos Vite, o caminho mais prático é colocá-lo na pasta public, para que ele seja copiado para o dist no build.

Cada linha tem o formato: origem, destino e status. Exemplos:

/servicos-antigos    /servicos    301
/blog/post-velho     /blog/post-novo    301
/loja/*              /produtos/:splat   301

O símbolo * captura qualquer trecho da URL e o :splat reaproveita esse trecho no destino. Se você não informar o status, o Netlify usa 301 por padrão, segundo a documentação oficial. As regras são lidas de cima para baixo e a primeira que combinar é a aplicada, então coloque as mais específicas antes das genéricas.

Redirects no netlify.toml

Se você prefere centralizar a configuração no repositório, use o netlify.toml na raiz do projeto:

[[redirects]]
  from = "/servicos-antigos"
  to = "/servicos"
  status = 301
  force = true

Esse formato permite opções extras, como condições por país ou idioma e o parâmetro force, que faz a regra valer mesmo quando já existe um arquivo naquele caminho. A documentação do Netlify indica que as regras do _redirects são processadas antes das do netlify.toml, então evite duplicar a mesma regra nos dois lugares.

Como corrigir o erro 404 em rotas de React e Vite

Em uma SPA (aplicação de página única), todas as rotas são resolvidas pelo JavaScript no navegador. Ao recarregar /contato, o Netlify procura um arquivo com esse nome, não encontra e devolve 404.

A solução é um rewrite com status 200, que serve o index.html sem mudar a URL exibida:

/*    /index.html   200

Coloque essa linha por último no _redirects, depois de todos os redirecionamentos 301, para que ela atue só como regra de reserva. Essa é a configuração padrão recomendada para React Router em sites hospedados no Netlify.

Boas práticas para redirecionamentos

1. Redirecione cada URL antiga diretamente para a nova, evitando cadeias de vários saltos.
2. Use 301 para mudanças permanentes e 302 apenas para mudanças temporárias.
3. Atualize os links internos e o sitemap para apontar para a URL final.
4. Teste cada regra no navegador ou com curl -I e confira o status retornado.
5. Mantenha a lista de redirects documentada no repositório.

Perguntas Frequentes

Qual a diferença entre redirect 301 e 302? O 301 indica mudança permanente e é o indicado para SEO em migrações. O 302 indica mudança temporária e mantém a URL original como principal.

Onde coloco o arquivo _redirects em um projeto Vite? Na pasta public. O Vite copia seu conteúdo para a pasta dist no build, que é a pasta publicada pelo Netlify.

Redirecionamento 301 faz perder posição no Google? Quando bem feito, com a página nova equivalente à antiga, o Google costuma transferir os sinais de ranqueamento. Cadeias longas e destinos irrelevantes aumentam o risco de perda.

Por que minha rota React dá 404 ao recarregar a página? Porque o servidor não conhece rotas do lado do cliente. Adicione a regra /* /index.html 200 ao final do _redirects.

Devo usar _redirects ou netlify.toml? Qualquer um funciona. Use _redirects para listas simples e netlify.toml quando precisar de condições avançadas ou quiser tudo em um só arquivo de configuração.

Conclusão

Configurar o redirecionamento 301 no Netlify leva poucos minutos e protege o tráfego e o ranqueamento do seu site. Defina os 301 primeiro, deixe o rewrite 200 da SPA por último e teste tudo antes de publicar. Na Stormcore, criamos sites em React e Vite com deploy no Netlify e cuidamos dessas configurações de SEO técnico para você.