Idiomas

SEO de frameworks JavaScript

SEO para frameworks JavaScript — React, Next.js, Vue, Nuxt, Angular, Svelte e Astro. Como o modo de renderização (SSR, SSG, CSR) determina o que o Google pode indexar e quais frameworks lidam melhor com SEO por padrão.

Publicado pela primeira vez: 26 de jun. de 2026 · Última atualização: 3 de ago. de 2026 · Avançado
Idiomas
AIEscrito porAI v2

O SEO de frameworks JavaScript se resume ao modo de renderização: SSG e SSR fornecem ao Googlebot HTML pré-construído; CSR exige execução de JavaScript que pode ou não ser bem-sucedida. Next.js e Nuxt têm o maior suporte integrado de SEO (SSR, SSG, ISR, APIs de metadados). React e Vue puros em modo CSR são os mais arriscados para SEO. A arquitetura de ilhas do Astro é excelente para SEO por padrão. Angular requer SSR via @angular/ssr (antigo Angular Universal) para indexação confiável.

TL;DR — No nível técnico, o SEO de frameworks JS trata de: (1) arquitetura de renderização para o payload HTML inicial, (2) injeção de metadados no <head> antes do envio da resposta, (3) como o framework lida com hidratação e descoberta de links, e (4) obsolescência do cache ISR. Next.js tem o conjunto de ferramentas de SEO integrado mais completo (API de Metadados, app/sitemap.ts integrado, otimização de imagens). Astro é o mais seguro para SEO por arquitetura.

Modo de renderização, API de metadados e suporte a ISR por framework

As capacidades e padrões dos frameworks mudam conforme a versão; verifique-os na documentação oficial de cada framework. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: web.dev: Rendering on the Web Nenhum modo de renderização garante indexação ou ranqueamento. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: Google: JavaScript SEO basics Ao comparar frameworks para uma decisão, teste as mesmas rotas, conteúdo, destino de implantação e ferramentas para cada candidato — um benchmark que altera qualquer um desses não está medindo o framework, está medindo a diferença na configuração.

FrameworkRenderização padrãoAPI de metadados integradaSuporte a SSR/SSGSuporte de SEO do ecossistema
AstroSSG (ilhas)Sim (<head> em arquivos .astro, Content Collections para dados estruturados)AmbosForte
Next.jsSSR/SSG (configurável)Sim (Metadata API no App Router)Ambos + ISRExcelente
NuxtSSR por padrãoSim (useHead, useSeoMeta)Ambos + ISRExcelente
SvelteKitSSR por padrãoSim (svelte:head)AmbosBom
React Router (modo framework)SSR por padrãoSim (exportação meta)SSR + DeferredBom
AngularCSR por padrãoVia serviços Meta/Title do AngularVia @angular/ssrModerado
React (puro)CSRManual (react-helmet-async; react-helmet não é mantido)Via Next.js/GatsbyDepende do wrapper
Vue (puro)CSRManual (@unhead/vue; vue-meta não é mantido)Via NuxtDepende do wrapper

Remix v2 e React Router v7 se fundiram — o modelo de renderização no servidor e carregamento de dados do Remix agora é enviado como “modo framework” do React Router, e esse é o caminho de atualização estável para aplicativos Remix v2. Remix 3 é uma reescrita separada e experimental sem React (beta), não o sucessor do Remix v2 — não o trate como uma opção de SSR plug-and-play para uma base de código React.

Tempo de injeção de metadados — Os metadados (<title>, <meta>) devem estar na resposta do servidor, não adicionados por JavaScript após o carregamento da página. A Metadata API do Next.js, o useSeoMeta do Nuxt e o componente <head> do Astro lidam com isso corretamente. document.title = '...' ou React Helmet em modo CSR não — eles são executados após o HTML inicial ser servido.

Descoberta de links — O Googlebot descobre links analisando HTML. Links adicionados via JavaScript (onClick, roteamento dinâmico sem tags <a>) podem não ser descobertos. Use elementos reais <a href> para navegação importante.

Hidratação e conteúdo duplicado — Se SSR e CSR renderizarem conteúdo diferente (incompatibilidade de hidratação), você pode acabar com conteúdo indexado que não corresponde ao que os usuários veem. Teste erros de hidratação no console do navegador.

Soft 404s — Roteadores do lado do cliente podem renderizar silenciosamente uma interface de “página não encontrada” enquanto retornam um status HTTP 200. Os mecanismos de busca indexam essas como páginas reais. Certifique-se de que sua página 404 retorne um status 404 real, e redirecionamentos do lado do servidor retornem 301.

Invalidação de cache ISR — Em configurações ISR do Next.js e Nuxt, páginas obsoletas podem ser servidas aos rastreadores durante a janela de revalidação. Defina um intervalo de revalidate baseado em tempo, e para conteúdo que muda em um cronograma que você não controla (um salvamento de CMS, por exemplo), combine-o com revalidação sob demanda acionada por um manipulador de rota baseado em webhook — veja o guia ISR do Next.js para a API completa.

// app/blog/[id]/page.tsx — time-based revalidation
export const revalidate = 3600 // re-check this page at most once an hour

// app/api/revalidate/route.ts — on-demand revalidation, called by a CMS webhook
import { revalidatePath } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const { path, secret } = await request.json()
  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ message: 'Invalid secret' }, { status: 401 })
  }
  revalidatePath(path) // e.g. '/blog/1' — next request regenerates fresh HTML
  return NextResponse.json({ revalidated: true })
}

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.