SEO técnico para SPA React com Vite: o que precisa estar correto?
Por Marlos Hoffmann · Diretor de Estratégia e Tecnologia
Uma SPA React com Vite pode ser encontrada, citada e convertida — desde que rotas, HTML renderizado, metadados, links, dados estruturados, sitemap e robots estejam alinhados.
Uma aplicação React com Vite não está condenada a desaparecer do Google ou das respostas de IA. O problema aparece quando o site depende de JavaScript para tudo, usa a mesma descrição em todas as rotas, não oferece links rastreáveis ou entrega um HTML renderizado diferente do que a pessoa consegue ler. Uma SPA pode funcionar bem para SEO, mas precisa tratar cada URL importante como uma página pública de verdade.
O Google descreve o processo em três etapas: rastreamento, renderização e indexação. Isso significa que o crawler pode encontrar a rota em um primeiro momento e só entender o conteúdo depois de executar o JavaScript. Para busca tradicional e GEO, o objetivo é reduzir a ambiguidade: a rota deve ser descobrível, o conteúdo principal deve aparecer após a renderização e título, canonical, dados estruturados e links precisam corresponder à página.
O que uma SPA React com Vite precisa ter para ser indexável?
Ela precisa entregar rotas públicas e estáveis, conteúdo importante em texto, links HTML com `href`, título e descrição únicos, canonical correto, sitemap, robots coerente e dados estruturados compatíveis com o que está visível. O JavaScript pode preencher metadados e conteúdo, mas o resultado final renderizado é o que precisa fazer sentido para o mecanismo de busca e para a pessoa.
Checklist gratuito
Como deixar seu site pronto para vender
65 verificações em 10 blocos: oferta, CTA, prova social, velocidade (LCP/INP), indexação e navegação agêntica — para parar de pagar tráfego em site que não convertte.
- PDF para imprimir
- Placar de diagnóstico
- Plano de 1 semana
- Cada serviço, artigo e página relevante deve ter uma URL própria, legível e compartilhável.
- O servidor ou host deve devolver a aplicação para a rota direta, inclusive quando alguém acessa `/blog/slug` sem passar pela home.
- A navegação deve usar links reais, não apenas `div`, evento de clique ou mudança de estado sem URL.
- O conteúdo principal, o título e a descrição devem ser diferentes quando a intenção de busca for diferente.
- O sitemap deve apontar para URLs públicas e canônicas; o robots.txt não deve bloquear os recursos necessários para renderizar a página.
- O JSON-LD deve descrever a página que a pessoa realmente vê, sem criar avaliações, ofertas ou fatos que não aparecem no conteúdo.
O Google consegue renderizar JavaScript?
Sim, mas “consegue renderizar” não significa “qualquer implementação é igualmente eficiente”. O Google pode processar JavaScript, porém a renderização acontece depois do rastreamento inicial e depende de recursos disponíveis. Links e informações importantes no HTML ou em elementos facilmente descobertos reduzem o risco de atraso, perda de contexto e comportamento diferente em outros crawlers.
Como as rotas e o fallback do servidor afetam o SEO?
Uma SPA normalmente usa o histórico do navegador para exibir várias telas no mesmo aplicativo. Isso exige que o host devolva o `index.html` para as rotas públicas; caso contrário, o acesso direto a um artigo pode resultar em 404 antes de o React iniciar. Também é importante não criar versões concorrentes com hash, parâmetros desnecessários ou redirecionamentos que escondam a URL canônica.
Por que links com href ainda são tão importantes?
Um link convencional comunica relação, destino e hierarquia sem exigir que o crawler adivinhe o comportamento de um componente. Use `a href` para conectar home, serviços, categorias, artigos e páginas de apoio. O clique pode continuar usando transições suaves, mas a URL precisa existir e o destino deve continuar acessível sem depender de uma interação anterior.
Como fazer uma auditoria técnica em uma SPA?
A auditoria deve comparar o código entregue, o DOM renderizado e o que as ferramentas de busca conseguem acessar. Um roteiro curto ajuda a separar falha de conteúdo, falha de rota e falha de rastreamento:
- Liste as URLs comerciais, editoriais e legais que precisam ser encontradas e defina uma URL canônica para cada uma.
- Abra cada URL diretamente em uma janela anônima e confirme que não depende de visitar outra tela primeiro.
- Confira o HTML renderizado no navegador: título, descrição, H1, texto principal, links e JSON-LD devem corresponder à rota.
- Use a inspeção de URL do Search Console para verificar rastreamento, renderização, indexação e canonical escolhido pelo Google.
- Valide sitemap.xml, robots.txt e dados estruturados; teste também a página em dispositivos móveis.
- Meça desempenho e erros de JavaScript, porque uma tela que falha antes de renderizar o conteúdo também falha como página de busca.
Quais erros mais costumam deixar uma SPA invisível?
- Todas as rotas compartilham o título, a descrição e o canonical da home.
- A página só mostra a informação principal depois de um clique, uma aba ou uma chamada que falha para crawlers.
- O sitemap lista URLs antigas, duplicadas ou diferentes das que o site usa nos links internos.
- O robots.txt bloqueia scripts, CSS ou imagens necessários para interpretar a página.
- O JSON-LD afirma uma coisa e o texto visível afirma outra.
- A equipe mede apenas posição e esquece indexação, consultas, cliques, conversões e citações em IA.
SEO técnico em uma SPA não é um ritual separado da experiência. É o trabalho de fazer a mesma página ser clara para quem navega, para quem compartilha e para quem precisa descobrir o conteúdo por uma busca. Quando a base está correta, o texto, a prova e a oferta têm uma chance real de participar da decisão.
Fontes consultadas
Transforme essa leitura em estrutura que convertte
Diagnóstico, landing, vídeo com IA ou sistema — o próximo passo depende do seu estágio, não de um pacote genérico.
Continue lendo