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
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 — At the technical level, JS framework SEO is about: (1) rendering

architecture for the initial HTML payload, (2) metadata injection into <head> before the response is sent, (3) how the framework handles hydration and link discovery, and (4) ISR cache staleness. Next.js has the most complete built-in SEO tooling (Metadata API, built-in app/sitemap.ts, image optimization). Astro is the most SEO-safe by architecture. » (Tradução) (Síntese localizada do trecho quinze, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Rendering mode, metadata API, and ISR support by framework » (Tradução) (Síntese localizada do trecho dezesseis, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Framework capabilities and defaults change by version; verify them in each framework’s official documentation. Evidência desta afirmação Primary standard or official documentation supporting the adjacent article claim. Escopo: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confiança: alta · Verificado: web.dev: Rendering on the Web No rendering mode guarantees indexing or rankings. Evidência desta afirmação Primary standard or official documentation supporting the adjacent article claim. Escopo: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confiança: alta · Verificado: Google: JavaScript SEO basics When you’re comparing frameworks for a decision, test the same routes, content, deployment target and tooling for each candidate — a benchmark that swaps any of those isn’t measuring the framework, it’s measuring the difference in setup. » (Tradução) (Síntese localizada do trecho dezessete, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«| Framework | Default rendering | Built-in metadata API | SSR/SSG support | Ecosystem SEO support | |---|---|---|---|---| | Astro | SSG (islands) | Yes (<head> in .astro files, Content Collections for structured data) | Both | Strong | | Next.js | SSR/SSG (configurable) | Yes (Metadata API in App Router) | Both + ISR | Excellent | | Nuxt | SSR by default | Yes (useHead, useSeoMeta) | Both + ISR | Excellent | | SvelteKit | SSR by default | Yes (svelte:head) | Both | Good | | React Router (framework mode) | SSR by default | Yes (meta export) | SSR + Deferred | Good | | Angular | CSR by default | Via Angular Meta/Title services | Via @angular/ssr | Moderate | | React (bare) | CSR | Manual (react-helmet-async; react-helmet is unmaintained) | Via Next.js/Gatsby | Depends on wrapper | | Vue (bare) | CSR | Manual (@unhead/vue; vue-meta is unmaintained) | Via Nuxt | Depends on wrapper | » (Tradução) (Síntese localizada do trecho dezoito, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Remix v2 and React Router v7 merged — Remix’s server rendering and data-loading model now ships as React Router’s “framework mode,” and that’s the stable upgrade path for Remix v2 apps. Remix 3 is a separate, experimental React-less rewrite (beta), not the successor to Remix v2 — don’t treat it as a drop-in SSR option for a React codebase. » (Tradução) (Síntese localizada do trecho dezenove, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«## Metadata timing, crawlable links, and ISR cache staleness » (Tradução) (Síntese localizada do trecho vinte, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Metadata injection timing — Metadata (<title>, <meta>) must be in the server response, not added by JavaScript after page load. Next.js’s Metadata API, Nuxt’s useSeoMeta, and Astro’s <head> component handle this correctly. document.title = '...' or React Helmet in CSR mode does not — it runs after the initial HTML is served. » (Tradução) (Síntese localizada do trecho vinte e um, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Link discovery — Googlebot discovers links by parsing HTML. Links added via JavaScript (onClick, dynamic routing without <a> tags) may not be discovered. Use real <a href> elements for important navigation. » (Tradução) (Síntese localizada do trecho vinte e dois, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Hydration and duplicate content — If SSR and CSR render different content (hydration mismatch), you may end up with indexed content that doesn’t match what users see. Test for hydration errors in the browser console. » (Tradução) (Síntese localizada do trecho vinte e três, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«Soft 404s — Client-side routers can silently render a “page not found” UI while returning a 200 HTTP status. Search engines index these as real pages. Make sure your 404 page returns a real 404 status, and server-side redirects return 301. » (Tradução) (Síntese localizada do trecho vinte e quatro, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

«ISR cache invalidation — In Next.js and Nuxt ISR setups, stale pages can be served to crawlers during the revalidation window. Set a time-based revalidate interval, and for content that changes on a schedule you don’t control (a CMS save, for example), pair it with on-demand revalidation triggered from a webhook-backed route handler — see the Next.js ISR guide for the full API. » (Tradução) (Síntese localizada do trecho vinte e cinco, parte um: o texto-fonte foi preservado para conferência na revisão nativa.)

// 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 })
}

Adicionar uma nota de especialista

Fixar uma citação de especialista

É uma pessoa nova? Crie o perfil não reivindicado dela em /admin/experts/ → Fixar uma citação de especialista primeiro.