Por que single page apps têm dificuldade na busca e como resolver: SSR, geração estática ou prerendering, títulos por rota no React 19 ou com react-helmet-async, URLs reais, soft 404, sitemaps, Inspeção de URL e um verificador de código-fonte.
Single page apps costumam enviar aos buscadores um HTML quase vazio e montar a página depois com JavaScript. O Google consegue renderizar JavaScript, mas isso acontece com atraso, e outros crawlers podem não fazer isso. Resolva servindo HTML real por URL com renderização no servidor, geração estática ou prerendering, com title, description e canonical únicos em cada rota.
As três correções que mais importam
Este site é ele mesmo uma single page app em React que faz o prerendering de todas as páginas públicas no build, então estas são as verificações que fazemos nas nossas próprias páginas. Cole o código-fonte de uma página no verificador para ver o que um crawler recebe antes de qualquer JavaScript rodar.
Sim. O Google renderiza JavaScript, mas as páginas esperam em uma fila de renderização e tudo o que não carrega fica de fora. Outros buscadores e bots de prévia de links renderizam menos ou nada, então servir HTML é a escolha mais segura.
Não. O Next.js facilita a renderização no servidor e a geração estática, mas uma SPA no estilo Vite ou Create React App pode fazer o prerendering das rotas públicas no build e ter o mesmo HTML rastreável.
Não para as tags básicas. O React 19 renderiza elementos title, meta e link a partir de qualquer componente e os move para o head. O react-helmet-async continua útil no React 18 e em versões anteriores.
Não quando crawlers e pessoas recebem o mesmo conteúdo. O prerendering só salva a página que os seus usuários veriam de qualquer forma. Vira cloaking se o HTML servido aos bots disser algo diferente.
Formas de entregar HTML real aos crawlers
O React 19 permite que qualquer componente renderize tags title, meta e link; o React as move para o head do documento. Cada rota define as suas.
Envolva o app uma vez em HelmetProvider e depois defina as tags em cada página. A versão async é segura para renderização no servidor e prerendering.
O Google ignora tudo depois de um # ao decidir o que é uma URL. Use a History API (BrowserRouter, createBrowserRouter) para que cada tela tenha o seu próprio caminho.
Os crawlers seguem elementos a com href. Um handler de clique em uma div é invisível para eles. Os componentes Link dos roteadores renderizam uma âncora real.
Um app só de cliente responde a toda URL com status 200, então uma página inexistente parece real. Adicione noindex à tela de não encontrado, ou sirva um 404 real pelo servidor ou pela etapa de prerendering.
Liste cada URL pública uma vez, com o seu endereço canônico. Gere o sitemap a partir da mesma lista de rotas que o seu app usa, para que os dois nunca se desencontrem.
Quer as tags escritas para você? Experimente o
Verificador de código-fonte
Cole o HTML de Exibir código-fonte da página para verificar o que um crawler recebe.
Código-fonte da página (o exemplo é uma estrutura de SPA vazia típica)
Checklist de SEO para SPA
Title
"{title}" ({n} caracteres)
Nenhum title no HTML
Meta description
{n} caracteres
Ausente
Link canonical
Título principal (h1)
Nenhum h1 antes de o JavaScript rodar
Texto visível
{n} palavras no body antes de o JavaScript rodar
Links rastreáveis
{n} elementos a com href real
Título Open Graph (prévias de links)
Indexação permitida
meta robots: {robots}
Sem meta robots (indexável)
Comece grátis · Sem cartão de crédito