SEO Técnico para Sites Next.js e React: Guia Completo

Você investiu tempo e dinheiro para construir um site bonito em React, mas o Google simplesmente ignora suas páginas? O site aparece na página 5, 10, ou nem aparece? Se esse cenário parece familiar, o problema provavelmente não é o seu conteúdo — é como o Google enxerga (ou não enxerga) seu site.

Aplicações React tradicionais (SPA — Single Page Application) têm um problema fundamental com SEO: quando o Googlebot acessa a página, recebe um HTML praticamente vazio com um <div id="root"></div> e um monte de JavaScript. O crawler precisa executar esse JavaScript para ver o conteúdo — e nem sempre faz isso corretamente. O resultado é que páginas inteiras podem ficar fora do índice.

O Next.js resolve esse problema de forma elegante, mas ter Next.js não garante SEO automático. É preciso implementar corretamente uma série de elementos técnicos. Neste guia, vamos cobrir tudo o que você precisa para transformar seu site Next.js em uma máquina de tráfego orgânico.

Por que SPAs puras têm problemas com SEO

Para entender a solução, é preciso entender o problema. Em uma SPA React tradicional (criada com Vite ou Create React App), o fluxo é:

1. O navegador (ou crawler) faz a requisição.
2. O servidor retorna um HTML mínimo com referências a arquivos JavaScript.
3. O JavaScript é baixado, executado e renderiza o conteúdo na tela.

O Googlebot lida com isso em duas fases:

• Fase 1 (crawl): o bot baixa o HTML e vê... quase nada. Apenas o shell vazio da aplicação.
• Fase 2 (render): em algum momento posterior (pode levar dias ou semanas), o bot executa o JavaScript e vê o conteúdo renderizado.

Os problemas dessa abordagem são vários:

• Crawl budget desperdiçado: o Google tem um "orçamento" de crawl para cada site. Se ele precisa renderizar JavaScript para ver o conteúdo, gasta mais recursos e rastreia menos páginas.
• Indexação atrasada: o conteúdo pode levar semanas para ser indexado, pois depende da fila de renderização do Google.
• Metadados ausentes: se o <title> e <meta description> são gerados por JavaScript, eles podem não ser lidos corretamente.
• Links internos invisíveis: se a navegação depende de JavaScript, o Google pode não descobrir todas as páginas do site.
• Conteúdo dinâmico perdido: dados carregados via API podem não estar disponíveis quando o bot renderiza.

O resultado prático é que sites React SPA puro raramente rankeiam bem para termos competitivos. Pode funcionar para termos de marca (quando alguém busca o nome da empresa), mas para termos genéricos a competição com sites server-rendered é desigual.

Como o Next.js resolve esses problemas

O Next.js oferece três estratégias de renderização que resolvem os problemas de SEO:

SSR (Server-Side Rendering)

A página é renderizada no servidor a cada requisição. O HTML completo — com todo o conteúdo, metadados e links — é enviado ao navegador (e ao crawler). O Google vê o conteúdo imediatamente, sem precisar executar JavaScript.

No Next.js App Router, componentes são server components por padrão. Isso significa que a maioria do seu conteúdo já é renderizada no servidor automaticamente.

SSG (Static Site Generation)

A página é gerada no momento do build e servida como HTML estático. É a abordagem mais rápida (o HTML já está pronto) e ideal para conteúdo que não muda frequentemente: posts de blog, páginas institucionais, landing pages.

ISR (Incremental Static Regeneration)

Combina o melhor dos dois mundos: a página é gerada estaticamente, mas pode ser revalidada em intervalos definidos. Ideal para catálogos de produtos, listagens e conteúdo que muda periodicamente.

Para SEO, todas as três estratégias são excelentes — o HTML completo está disponível para o crawler sem necessidade de renderização JavaScript. A escolha entre elas depende da frequência de atualização do conteúdo e do volume de páginas.

Metadata API: o básico bem feito

O Next.js App Router tem uma API nativa para metadados que torna a implementação de tags SEO simples e organizada.

Metadata estática

Para páginas com metadados fixos, basta exportar um objeto metadata do arquivo layout.tsx ou page.tsx:

export const metadata = {
  title: "Sua Empresa | Serviço X",
  description: "Descrição otimizada com até 160 caracteres.",
  openGraph: {
    title: "Sua Empresa | Serviço X",
    description: "Descrição para redes sociais.",
    type: "website",
  },
};

Metadata dinâmica

Para páginas com metadados que dependem de dados (como posts de blog), use a função generateMetadata:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: "article",
      publishedTime: post.date,
    },
  };
}

Checklist de metadados essenciais

Para cada página do seu site, garanta que estes metadados estão presentes:

• title: único para cada página, com a palavra-chave principal. Entre 50-60 caracteres.
• description: resumo atraente que incentiva o clique. Entre 120-160 caracteres.
• canonical: URL canônica para evitar conteúdo duplicado.
• og:title, og:description, og:image: para compartilhamento em redes sociais.
• robots: se a página deve ser indexada ou não.

Structured Data (JSON-LD)

Structured data (dados estruturados) é como você "fala" com o Google em uma linguagem que ele entende perfeitamente. Ao adicionar marcação JSON-LD às suas páginas, você fornece informações explícitas sobre o conteúdo: é um artigo? Um produto? Uma empresa? Um FAQ?

O benefício direto é a possibilidade de rich snippets nos resultados de busca — aqueles resultados enriquecidos com estrelas de avaliação, FAQ expandido, breadcrumbs e outros elementos que aumentam significativamente a taxa de clique (CTR).

Tipos mais úteis para empresas

Organization: informações sobre a empresa.

{
  "@type": "Organization",
  "name": "Sua Empresa",
  "url": "https://seusite.com.br",
  "logo": "https://seusite.com.br/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+55-11-99999-9999",
    "contactType": "customer service"
  }
}

Article: para posts de blog.

{
  "@type": "Article",
  "headline": "Título do Post",
  "author": { "@type": "Person", "name": "Autor" },
  "datePublished": "2026-01-01",
  "publisher": { "@type": "Organization", "name": "Empresa" }
}

FAQPage: para páginas com perguntas frequentes — gera o FAQ expandido no Google.

LocalBusiness: para empresas com atendimento local — exibe no Google Maps e Knowledge Panel.

Implementação no Next.js

A forma mais limpa de implementar JSON-LD no Next.js é com um componente dedicado:

function JsonLd({ data }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
}

Inclua o componente no layout ou em cada página com os dados específicos. Valide sempre com o Rich Results Test do Google para garantir que a marcação está correta.

Sitemap e robots.txt

Sitemap XML

O sitemap é um mapa do seu site para o Google. Ele lista todas as URLs que devem ser indexadas, com informações sobre prioridade e frequência de atualização.

No Next.js, o sitemap pode ser gerado automaticamente com a função sitemap() no arquivo app/sitemap.ts:

export default async function sitemap() {
  const posts = await getAllPosts();
  const postUrls = posts.map((post) => ({
    url: `https://seusite.com.br/blog/${post.slug}`,
    lastModified: post.date,
  }));

  return [
    { url: "https://seusite.com.br", lastModified: new Date() },
    { url: "https://seusite.com.br/servicos", lastModified: new Date() },
    ...postUrls,
  ];
}

robots.txt

O robots.txt controla quais páginas o Google pode e não pode rastrear. No Next.js, crie o arquivo app/robots.ts:

export default function robots() {
  return {
    rules: { userAgent: "*", allow: "/", disallow: "/admin/" },
    sitemap: "https://seusite.com.br/sitemap.xml",
  };
}

Dicas importantes:

• Nunca bloqueie CSS e JavaScript no robots.txt — o Google precisa deles para renderizar a página.
• Bloqueie áreas administrativas, páginas de busca interna e URLs com parâmetros duplicados.
• Submeta o sitemap no Google Search Console para acelerar a indexação.

Core Web Vitals: performance é SEO

Desde 2021, o Google usa Core Web Vitals como fator de rankeamento. Os três indicadores são:

LCP (Largest Contentful Paint)

Tempo para o maior elemento visível da página ser renderizado. Meta: abaixo de 2,5 segundos.

Para otimizar no Next.js:

• Use o componente <Image> do Next.js com priority para a imagem principal.
• Evite fontes que bloqueiam a renderização — use next/font com display: swap.
• Minimize o JavaScript que executa antes do conteúdo ser renderizado.
• Use SSG ou ISR para páginas de conteúdo — o HTML já está pronto.

INP (Interaction to Next Paint)

Tempo de resposta da página a interações do usuário (cliques, teclas). Meta: abaixo de 200ms.

Para otimizar:

• Evite JavaScript pesado no thread principal.
• Use dynamic() do Next.js para lazy loading de componentes pesados.
• Evite re-renders desnecessários em componentes React.
• Use useTransition para atualizações de baixa prioridade.

CLS (Cumulative Layout Shift)

Mede a estabilidade visual — quanto os elementos da página "pulam" durante o carregamento. Meta: abaixo de 0,1.

Para otimizar:

• Sempre defina width e height em imagens (o <Image> do Next.js faz isso automaticamente).
• Reserve espaço para anúncios e embeds antes de carregarem.
• Evite inserir conteúdo acima do viewport após o carregamento inicial.
• Use font-display: swap mas com fallback de tamanho similar.

Erros comuns de SEO em sites React

Mesmo usando Next.js, alguns erros de SEO são extremamente comuns:

1. Usar client component para conteúdo principal

Se o conteúdo principal da página está em um componente marcado com "use client", ele é renderizado no cliente, não no servidor. O Google pode não ver esse conteúdo. Regra: conteúdo que precisa ser indexado deve estar em server components.

2. Carregar dados só no cliente

Usar useEffect + fetch para carregar dados que deveriam estar no HTML inicial. Use fetch em server components ou getServerSideProps (Pages Router) para que os dados estejam no HTML renderizado pelo servidor.

3. Links com onClick em vez de <Link>

Links internos implementados com <div onClick={() => router.push('/url')}> não são reconhecidos pelo Google como links. Use sempre o componente <Link> do Next.js.

4. Ignorar o título e description de cada página

Usar o mesmo título em todas as páginas ou deixar a description vazia. Cada página precisa de metadados únicos e otimizados.

5. Imagens sem alt text

Imagens sem alt são invisíveis para o Google Images e prejudicam a acessibilidade. Descreva o conteúdo da imagem de forma objetiva e inclua a palavra-chave quando relevante.

6. Não ter sitemap

Sem sitemap, o Google depende de links internos para descobrir todas as páginas. Em sites com muitas páginas ou estrutura profunda, páginas podem ficar fora do índice.

7. URLs com hash (#)

Rotas com hash (/#/sobre, /#/contato) não são indexadas pelo Google. Use rotas reais (/sobre, /contato). O Next.js faz isso por padrão, mas migrações de SPAs antigas podem manter esse padrão.

Ferramentas para auditoria de SEO

Para validar e monitorar o SEO do seu site:

• Google Search Console: obrigatório. Mostra como o Google vê seu site, quais páginas estão indexadas, erros de rastreamento e queries que trazem tráfego.
• Lighthouse (Chrome DevTools): auditoria de performance, acessibilidade e SEO. Rode em cada página importante.
• Rich Results Test: valida structured data e mostra como o resultado aparecerá no Google.
• PageSpeed Insights: analisa Core Web Vitals com dados reais de usuários.
• Screaming Frog: crawler que analisa todas as páginas do site e identifica problemas técnicos (links quebrados, metadados ausentes, redirecionamentos).

SEO técnico não é glamuroso, mas é o que permite que todo o seu conteúdo e investimento em marketing encontrem o público certo. Um site tecnicamente sólido com conteúdo relevante é a combinação que gera tráfego orgânico sustentável — sem depender exclusivamente de anúncios pagos.