SEO em React: renderização, metadados e links para um app React que ranqueia

Quiz rápido

O SEO é para você, e como começar?

Pergunta 1 de 425%

As pessoas buscam no Google o que você vende?

Sim, acho que simNão, é novo ou muito de nichoNão sei

SEO em React é o trabalho de deixar uma aplicação React rastreável, indexável e compreensível para buscadores e assistentes de IA. O React em si é neutro: os problemas vêm de renderizar tudo no navegador. O Google confirma em seus princípios básicos de SEO para JavaScript que processa apps JavaScript em três fases (rastreamento, renderização e indexação) e que a renderização no servidor ou a pré-renderização "ainda é uma ótima ideia, porque deixa o site mais rápido para usuários e rastreadores, e nem todos os bots executam JavaScript".

Por que o React é difícil para SEO?

Um app React criado como aplicação de página única entrega um arquivo HTML que contém pouco mais do que uma div raiz vazia e uma tag script. O navegador baixa o JavaScript, executa e monta a página. Um rastreador que lê só o HTML não vê nada para indexar: nem títulos, nem texto, nem links.

O Googlebot executa JavaScript, mas em uma etapa separada: a página é rastreada, entra na fila de renderização, é renderizada em um Chromium sem interface e só então os links e o conteúdo renderizados são usados. Cada etapa extra é uma chance de falha (erro de script, API bloqueada, tempo esgotado) e acrescenta atraso antes de as páginas novas aparecerem nos resultados. Nosso guia de SEO para JavaScript detalha esse fluxo, e nosso artigo sobre indexação no Google mostra como indexar páginas mais rápido.

Outros bots são menos pacientes. A análise da Vercel de dezembro de 2024, The rise of the AI crawler, concluiu que "nenhum dos grandes rastreadores de IA renderiza JavaScript atualmente", citando GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot e PerplexityBot. Uma página React renderizada no cliente fica invisível para ChatGPT, Claude e Perplexity, mesmo quando o Google a indexa.

Qual abordagem de renderização usar em um site React?

A equipe do React passou a recomendar que novos apps comecem com um framework. Ao descontinuar o Create React App em 14 de fevereiro de 2025, ela escreveu no anúncio que "a renderização no servidor pode melhorar o SEO" e também melhora o desempenho ao reduzir o JavaScript que o usuário precisa baixar antes de ver o conteúdo. As opções, da mais fraca à mais sólida para a busca:

Sobre a renderização dinâmica, a documentação do Google é clara: ela "era um paliativo e não uma solução de longo prazo", e o Google recomenda no lugar a renderização no servidor, a renderização estática ou a hidratação. Se você está escolhendo um framework, nosso guia de SEO no Next.js detalha modos de renderização, Metadata API e sitemaps.

Se migrar não for possível, o Google ainda consegue indexar um app de página única com alguns cuidados. Nosso guia de SEO para aplicações de página única lista as condições; o restante deste artigo vale para os dois casos.

Como definir títulos e metatags no React?

Desde o React 19 (estável desde 5 de dezembro de 2024), os componentes podem renderizar diretamente tags title, meta e link, e o React as move para o head do documento. As notas de lançamento do React 19 afirmam que esse suporte nativo funciona "com apps só de cliente, SSR com streaming e Server Components". Antes do React 19, bibliotecas como react-helmet ou react-helmet-async faziam esse trabalho, e elas continuam úteis para sobrescrever padrões por rota.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Três regras valem para qualquer método:

• Um título por página, único e descritivo. A documentação do React avisa que, se vários componentes renderizarem um título ao mesmo tempo, "o comportamento de navegadores e buscadores é indefinido". Passe uma única string (um template literal), não uma mistura de texto e variáveis.
• Uma descrição e uma canônica por URL, geradas a partir dos dados da página. Um gerador de metatags ajuda a redigi-las, e um verificador de canônica confirma o que está no ar.
• Tags Open Graph no HTML inicial para as páginas compartilhadas, já que os bots de prévia de links geralmente leem o HTML bruto.

Quais erros de roteamento e de links bloqueiam a indexação?

O Google afirma que "só consegue descobrir seus links se eles forem elementos HTML a com um atributo href" e desaconselha usar fragmentos de URL para carregar conteúdos diferentes. A maioria das falhas de SEO em React vem de detalhes de roteamento:

Para ver o que o Google renderiza, use a ferramenta de inspeção de URL do Search Console e veja o HTML da página testada, ou passe os modelos de página principais por um verificador de indexabilidade.

Como lidar com sitemap e dados estruturados no React?

O React não tem sitemap embutido. Gere o sitemap.xml no build a partir das rotas e dos dados (ou com o recurso de sitemap do seu framework), liste só URLs canônicas que respondem 200 e indique o arquivo no robots.txt. Para um site estático pequeno, um gerador de sitemap XML resolve.

Os dados estruturados seguem a mesma regra dos metadados: renderize o script JSON-LD junto com a página, a partir dos mesmos dados, de preferência no servidor. O Google consegue ler JSON-LD injetado por JavaScript depois da renderização, mas a marcação ausente do HTML inicial também fica ausente para os rastreadores que não renderizam. Use Article para posts, Product no e-commerce, Organization em todo o site e BreadcrumbList para páginas profundas.

Como o desempenho afeta o SEO em React?

Pacotes grandes de JavaScript prejudicam as Core Web Vitals: o navegador precisa baixar, analisar e hidratar o código antes de a página responder, o que pesa no Largest Contentful Paint e no Interaction to Next Paint, sobretudo no celular. O anúncio da equipe do React sobre o Create React App lembra que a renderização no servidor envia menos JavaScript e um documento HTML completo, o que acelera o First Contentful Paint e pode reduzir o INP. Alavancas práticas: dividir o código por rota com React.lazy, servir imagens com dimensões explícitas, carregar sob demanda os componentes abaixo da dobra e revisar os scripts de terceiros.

O que deve ter um checklist de SEO para React?

1. Cada URL indexável retorna HTML completo (renderização no servidor ou pré-renderização), conferido com curl.
2. Um título, uma descrição e uma canônica autorreferente únicos por URL.
3. Rotas baseadas em histórico, nenhuma URL com hash e cada link interno renderizado como um a com href.
4. Códigos de status reais: 404 para páginas inexistentes, 301 ou 308 para páginas movidas.
5. Um sitemap.xml gerado com os mesmos dados das rotas e declarado no robots.txt.
6. JSON-LD renderizado com a página e validado no teste de pesquisa aprimorada.
7. Scripts, estilos e APIs necessários à renderização liberados no robots.txt.
8. Código dividido por rota e Core Web Vitals acompanhadas com usuários reais.

Como deixar um site React visível nas respostas das IA?

O GEO (otimização para motores generativos) começa pelo acesso. Como os rastreadores de IA buscam o HTML bruto, uma página React precisa entregar texto, títulos e JSON-LD sem JavaScript para ser lida, resumida e citada. Uma auditoria de rastreabilidade para IA mostra o que esses bots recebem das suas páginas. A segunda condição é um conteúdo que mereça ser citado: páginas que respondem a uma pergunta por seção, com fontes, números e definições claras.

É essa parte de conteúdo que a Sorank, nosso produto, automatiza. A Sorank é um software de SEO e GEO no autopilot: o seu gerador de artigos para blog escreve e publica 20, 60 ou 120 artigos por mês com fontes, links internos e imagens, e se conecta por webhook a stacks personalizados, como um site React ou Next.js. O SEO Chat responde em uma conversa às suas perguntas sobre o desempenho do site na busca.

Resumindo: sirva HTML pelo servidor, dê a cada URL seu próprio título, descrição e canônica, e use links reais. Assim o React ranqueia como qualquer outro site, e os assistentes de IA conseguem lê-lo. Para abastecer esse site com artigos feitos para o Google e para as IA, veja os planos da Sorank, a partir de 49 € por mês com 3 dias de teste grátis.