SEO para Site em React e Vite: Guia Prático

SEO para Site em React e Vite: Guia Prático

SEO para site em React e Vite funciona, mas exige cuidado: por padrão, uma aplicação Vite entrega um HTML quase vazio e depende de JavaScript para montar a página. O Google consegue renderizar esse JavaScript, mas outros rastreadores, inclusive os de muitas IAs, nem sempre. A solução é entregar conteúdo já pronto no HTML (pré-renderização ou SSR), com meta tags, dados estruturados e sitemap corretos.

Por que SPAs em React têm dificuldade com SEO

Em uma SPA (Single Page Application) criada com Vite, o navegador baixa um index.html com uma única div e só depois executa o JavaScript que desenha a página. Para um usuário isso é rápido. Para um robô, é um passo extra.

O Google processa páginas em duas etapas: primeiro rastreia o HTML, depois renderiza o JavaScript em uma fila. Segundo a documentação do Google Search Central, isso funciona, mas pode atrasar a indexação do conteúdo.

O problema maior está nas IAs de resposta. Diversos estudos de mercado indicam que rastreadores como GPTBot e PerplexityBot geralmente não executam JavaScript. Se o seu texto só existe depois do JavaScript rodar, ele pode ficar invisível para quem alimenta respostas de IA.

Pré-renderização, SSR ou SSG: qual escolher

Existem três caminhos para entregar HTML completo:

• SSG (geração estática): as páginas são geradas no build. Ideal para sites institucionais, landing pages e blogs. É rápido e barato de hospedar.
• SSR (renderização no servidor): o HTML é montado a cada requisição. Útil para páginas muito dinâmicas ou personalizadas.
• Pré-renderização de rotas: um meio-termo para quem já tem um projeto Vite. Ferramentas como vite-react-ssg ou plugins de prerender geram o HTML das rotas conhecidas durante o build.

Para a maioria das landing pages e sites de empresas, SSG ou pré-renderização resolve. Se o projeto ainda vai nascer, frameworks como Next.js, Astro ou React Router em modo framework já trazem isso pronto.

Meta tags, canonical e sitemap no React

Mesmo com HTML renderizado, cada página precisa dos seus próprios metadados. Em React, o caminho comum é usar uma biblioteca como react-helmet-async (ou os recursos nativos de metadados do React 19).

Checklist mínimo por página:

1. Um title único com a palavra-chave principal, até cerca de 60 caracteres.
2. Uma meta description de 150 a 160 caracteres.
3. Uma tag canonical apontando para a URL oficial.
4. Tags Open Graph para boa aparência ao compartilhar.
5. Um único h1 por página, com hierarquia lógica de h2 e h3.

Além disso, publique um sitemap.xml e um robots.txt na raiz. Na Netlify, basta colocá-los na pasta public do projeto. Depois, envie o sitemap no Google Search Console.

Dados estruturados e GEO: como ser citado por IAs

GEO (Generative Engine Optimization) é a prática de estruturar o conteúdo para ser citado por ChatGPT, Perplexity, Gemini e Google AI Overviews. Três ações ajudam muito:

• Começar cada página com uma resposta direta e autocontida.
• Usar dados estruturados em JSON-LD (Organization, FAQPage, Article, LocalBusiness).
• Manter perguntas e respostas curtas em formato de FAQ.

O JSON-LD pode ser injetado no head de cada página. O vocabulário vem do Schema.org, mantido por Google, Microsoft e outras empresas, e é lido tanto por buscadores quanto por sistemas de IA.

Performance importa: Core Web Vitals no Vite

O Google usa os Core Web Vitals (LCP, INP e CLS) como sinais de experiência. Em projetos Vite, vale aplicar code splitting com React.lazy, otimizar imagens (formatos WebP ou AVIF, com largura e altura definidas) e evitar bibliotecas pesadas no carregamento inicial. Um site rápido ajuda no ranqueamento e também reduz a taxa de rejeição.

Perguntas Frequentes

React é ruim para SEO? Não. O que prejudica é entregar HTML vazio. Com pré-renderização, SSG ou SSR, um site em React ranqueia normalmente.

O Google indexa sites feitos com Vite? Sim. O Googlebot executa JavaScript, mas a indexação pode demorar mais. Entregar HTML pronto acelera e garante o conteúdo.

IAs como ChatGPT leem sites em React? Muitos rastreadores de IA não executam JavaScript, então o conteúdo precisa estar no HTML inicial para ser lido e citado com segurança.

Preciso trocar para Next.js para ter SEO? Não necessariamente. Em projetos Vite já existentes, plugins de pré-renderização resolvem a maioria dos casos de sites institucionais e landing pages.

Como testar se meu site está legível para robôs? Use a Inspeção de URL do Google Search Console e abra a página com o JavaScript desativado. Se o texto principal aparecer, está certo.

Conclusão

Para ter um bom SEO para site em React e Vite, o essencial é simples: entregue o conteúdo no HTML, cuide dos metadados, adicione JSON-LD e mantenha a performance em dia. Na Stormcore, criamos sites e landing pages em React já preparados para SEO e GEO, e também atuamos com automações, sistemas e gestão de redes sociais.