<Igor Kaliel/>
SEO em React: Boas práticas para aplicações modernas com Next.js, Astro e outros frameworks

SEO em React: Boas práticas para aplicações modernas com Next.js, Astro e outros frameworks

React revolucionou o desenvolvimento web com a ideia de componentes e SPAs (Single Page Applications). Porém, quando falamos de SEO (Search Engine Optimization), os desenvolvedores enfrentam desafios únicos. Como garantir que Google, Bing e outros mecanismos de busca consigam ler, entender e indexar o conteúdo das suas aplicações de forma eficiente?

Este guia completo aborda as melhores práticas de SEO para projetos React modernos, incluindo frameworks populares como Next.js, Astro e Remix. Além disso, vamos explorar técnicas para performance, acessibilidade, uso correto da semântica HTML5, meta tags e dicas avançadas para SEO em 2025, além das práticas clássicas que ainda são essenciais.

Por que SEO é um desafio em React?

React tradicionalmente é usado para criar Single Page Applications (SPAs). Nessas aplicações, o conteúdo da página é gerado no cliente, via JavaScript. Ou seja, o HTML inicial enviado pelo servidor é praticamente vazio, e o conteúdo visível só é renderizado depois que o JavaScript roda no navegador.

Isso gera vários problemas para SEO:

  • Conteúdo invisível para crawlers: Nem todos os bots de busca executam JavaScript perfeitamente. Mesmo o Google, que executa, pode levar mais tempo para indexar conteúdo renderizado no cliente.
  • Performance: SPAs podem demorar mais para mostrar conteúdo visível, impactando indicadores importantes como o LCP (Largest Contentful Paint), que afetam o ranking.
  • URLs e navegação: Como o conteúdo é carregado dinamicamente, o uso inadequado de URLs e roteamento pode causar páginas inacessíveis para buscadores.

Dessa forma, sites React SPA sem cuidados tendem a apresentar baixa performance SEO, prejudicando a visibilidade orgânica.

Soluções modernas para SEO em React

Felizmente, o ecossistema React evoluiu bastante. Hoje, frameworks e técnicas modernas permitem entregar conteúdo em HTML estático ou renderizado no servidor, facilitando o trabalho dos mecanismos de busca.

1. SSR (Server-Side Rendering)

Com SSR, o servidor gera a página já com o conteúdo completo em HTML, enviando ao cliente uma página pronta para ser lida e indexada imediatamente. Isso melhora o desempenho do SEO e a experiência do usuário.

  • Ideal para sites dinâmicos que precisam mostrar conteúdo atualizado a cada requisição.
  • No Next.js, usa-se getServerSideProps() para implementar SSR.

Exemplo básico em Next.js:

export async function getServerSideProps() {
  const data = await fetch('https://api.meusite.com/posts').then(res => res.json());
  return { props: { posts: data } };
}

export default function Home({ posts }) {
  return (
    <>
      <Head>
        <title>Blog React SEO</title>
        <meta name="description" content="Conteúdo atualizado de posts React SEO" />
      </Head>
      <main>
        {posts.map(post => (
          <article key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </article>
        ))}
      </main>
    </>
  );
}

2. SSG (Static Site Generation)

Com SSG, as páginas são pré-geradas em HTML no momento do build. Excelente para sites com conteúdo que muda pouco, como blogs, portfólios e landing pages.

Resulta em alta performance, já que o servidor só entrega arquivos estáticos.

No Next.js, implementa-se com getStaticProps() e getStaticPaths().

Exemplo Next.js SSG:

export async function getStaticProps() {
  const data = await fetch('https://api.meusite.com/posts').then(res => res.json());
  return { props: { posts: data } };
}

export default function Blog({ posts }) {
  return (
    <main>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </main>
  );
}

3. ISR (Incremental Static Regeneration)

Combina o melhor dos dois mundos: páginas estáticas, mas que são revalidadas e atualizadas automaticamente em intervalos definidos.

Ideal para sites que precisam conteúdo quase sempre atualizado, mas com alta performance.

Em Next.js, adiciona-se a propriedade revalidate no retorno de getStaticProps().

Exemplo:

export async function getStaticProps() {
  const data = await fetch('https://api.meusite.com/posts').then(res => res.json());
  return { props: { posts: data }, revalidate: 60 }; // revalida a cada 60 segundos
}

4. Astro: minimalismo em JS e SEO

Astro é um framework que permite gerar sites estáticos com pouco ou nenhum JavaScript no cliente por padrão, aumentando a performance e SEO.

A interatividade é adicionada de forma seletiva (“partial hydration”).

Ideal para sites onde a velocidade e SEO são prioridade máxima.

Boas práticas técnicas para SEO em React (2025)

Metadados essenciais e meta tags

Título e descrição

Cada página deve ter títulos (<title>) e descrições (<meta name="description" />) únicas e relevantes.

  • O título deve conter palavras-chave importantes, mas ser natural e atraente.
  • A descrição deve resumir o conteúdo e incentivar o clique.

Em React, utilize o componente <Head> do Next.js ou equivalente para definir essas tags dinamicamente.

Meta Robots

Controle quais páginas devem ser indexadas ou não:

<meta name="robots" content="index, follow" />
<meta name="robots" content="noindex, nofollow" />

Use para páginas internas, admin, ou duplicadas que não devem aparecer nos resultados.

Canonical URL

Evita conteúdo duplicado ao informar a URL principal de uma página:

<link rel="canonical" href="https://meusite.com/pagina" />

Meta viewport e charset

Essenciais para responsividade e correta renderização:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />

Meta tags sociais (Open Graph, Twitter Cards)

Melhore o visual e o engajamento em redes sociais com tags que definem título, descrição, imagem e tipo do conteúdo:

<meta property="og:title" content="Título da Página" />
<meta property="og:description" content="Descrição para social" />
<meta property="og:image" content="https://meusite.com/imagem.jpg" />
<meta property="og:url" content="https://meusite.com/pagina" />
<meta name="twitter:card" content="summary_large_image" />

Imagens: atributo alt, title e otimização

  • O atributo alt descreve a imagem para buscadores e leitores de tela, sendo fundamental para acessibilidade e SEO.
  • O atributo title pode ser usado para informações adicionais, mas não substitui o alt.
  • Imagens otimizadas (peso e tamanho corretos) são essenciais para performance.
  • Use formatos modernos como WebP e AVIF.
  • Utilize loading="lazy" para carregar imagens só quando estiverem próximas da visualização.

Exemplo:

<img
  src="/imagens/produto.webp"
  alt="Tênis esportivo azul para corrida"
  title="Tênis azul coleção 2025"
  loading="lazy"
/>

URLs amigáveis e hierarquia lógica

  • URLs devem ser curtas, descritivas e conter palavras-chave.
  • Use hífens para separar palavras (ex: /produtos/tenis-esportivo).
  • Evite parâmetros desnecessários e IDs confusos.
  • Estruture URLs de forma hierárquica, refletindo a arquitetura do site.

Estrutura semântica HTML5

Usar tags semânticas melhora a compreensão da página por buscadores e auxilia na acessibilidade:

  • <h1>: título principal da página — uma única vez.
  • <h2>, <h3>, etc: subtítulos para dividir conteúdo.
  • <main>: área principal de conteúdo.
  • <article>: conteúdo independente, como posts ou notícias.
  • <section>: divisão temática dentro da página.
  • <nav>: links de navegação.
  • <aside>: conteúdo complementar.
  • <footer>: rodapé da página.

Manter a hierarquia correta das tags de título e organização ajuda o SEO e leitores de tela a interpretar o conteúdo.

Conteúdo original e de qualidade

  • Invista em conteúdo relevante, profundo e atualizado.
  • Use palavras-chave naturalmente e relacionadas.
  • Evite cópias e duplicação de conteúdo.
  • Adicione links internos que facilitem a navegação e aumentem o tempo de permanência.
  • Use dados estruturados (Schema.org) para destacar FAQs, reviews, produtos, eventos, etc., nos resultados do Google.

Exemplo básico de JSON-LD para FAQ:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Como faço SSR com Next.js?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Usando a função getServerSideProps()..."
    }
  }]
}
</script>

Performance: Core Web Vitals e Lighthouse

O Google usa sinais de performance para ranquear sites:

  • LCP (Largest Contentful Paint): tempo para o maior elemento visível carregar — ideal abaixo de 2.5 segundos.
  • FID (First Input Delay): tempo para a página responder à primeira interação — ideal menor que 100ms.
  • CLS (Cumulative Layout Shift): evita mudanças bruscas de layout — ideal menos que 0.1.

Como melhorar?

  • Otimização de imagens: compressão, dimensionamento correto, formatos modernos (WebP, AVIF).
  • Lazy loading: carregue imagens e componentes somente quando necessário.
  • Minificação: CSS, JS e HTML.
  • Code splitting: carregue apenas o necessário para cada página.
  • Caching: configure cache HTTP para recursos estáticos.
  • Servidor rápido: utilize CDN e servidores com boa latência.
  • Pré-carregamento: preload e prefetch para recursos críticos.

Ferramentas para medir e monitorar

  • Google Lighthouse: auditando performance, acessibilidade, SEO.
  • PageSpeed Insights: análises detalhadas e sugestões.
  • Web Vitals Extension: monitoramento em tempo real no navegador.

Acessibilidade (a11y)

Sites acessíveis agradam a todos os usuários e ajudam o SEO:

  • Use atributos ARIA para elementos interativos.
  • Garanta contraste adequado de cores.
  • Navegação por teclado e foco visível.
  • Evite elementos que causam confusão em leitores de tela.
  • Teste com ferramentas como Axe, Lighthouse e NVDA.

Exemplo de uso ARIA:

<button aria-label="Fechar menu">X</button>

Mobile-First Indexing

O Google usa a versão mobile para indexação e ranqueamento:

  • Garanta responsividade total usando media queries e design adaptativo.
  • Evite conteúdo escondido ou bloqueado em versões mobile.
  • Otimize imagens para dispositivos móveis.
  • Teste frequentemente a experiência em dispositivos reais.

Sitemap XML e arquivo robots.txt

Sitemap

Um sitemap XML ajuda os buscadores a encontrarem e entenderem sua estrutura.

  • Mantenha atualizado.
  • Envie para o Google Search Console.

Robots.txt

Controle o acesso de bots a partes do seu site:

User-agent: *
Disallow: /admin/
Allow: /
Sitemap: https://meusite.com/sitemap.xml

Técnicas SEO tradicionais que ainda são válidas em 2025

  • Uso correto das heading tags: Use <h1> uma vez, depois <h2>, <h3> para organizar o conteúdo.
  • Texto âncora claro nos links: Use textos descritivos para links internos e externos.
  • Evitar conteúdo duplicado: URLs canônicas, redirects e conteúdo único são cruciais.
  • Velocidade do site: continua sendo fator importante.
  • Conteúdo fresco: atualize páginas relevantes regularmente.
Voltar ao Blog