SEO no Next.js: renderização, metadados, sitemap e um blog que ranqueia

SEO no Next.js é, acima de tudo, fazer a escolha certa em cada rota: o que é renderizado no servidor, o que fica em cache e o que chega ao HTML antes de qualquer script rodar. O Google explica 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". O Next.js faz isso por padrão. Este guia cobre o App Router (Next.js 13 em diante), com observações sobre o antigo Pages Router.

O Next.js é bom para SEO?

Sim. Um app React clássico renderizado no cliente envia um arquivo HTML quase vazio e monta a página no navegador; os buscadores precisam renderizá-la, e muitos bots nunca fazem isso. O Next.js renderiza o React no servidor, então a resposta HTML já contém títulos, texto, links e metadados. Nosso guia de SEO para JavaScript explica por que essa diferença importa para a indexação.

No App Router, os componentes são Server Components por padrão. Mesmo os componentes marcados com 'use client' são pré-renderizados em HTML no servidor. O ponto fraco são os dados: tudo o que você carrega dentro de useEffect, ou só depois de um clique, fica fora do HTML inicial. Busque o conteúdo em Server Components e reserve os componentes de cliente para a interatividade.

SSG, SSR, ISR ou CSR: qual modo de renderização escolher?

O Next.js permite combinar modos rota por rota. A escolha afeta a atualização, a velocidade e o que os rastreadores recebem.

A documentação do Next.js sobre ISR lista as vantagens: atualizar conteúdo estático "sem reconstruir o site inteiro" e lidar com grandes volumes de páginas sem builds demorados. Uma rota com export const revalidate = 3600 é regenerada no máximo uma vez por hora; para controle exato, chame revalidatePath ou revalidateTag quando o conteúdo mudar. O ISR não funciona com exportação estática (output: 'export'). Para apps que precisam continuar renderizados no cliente, nosso guia de SEO para aplicações de página única mostra as alternativas.

Como definir títulos, descrições e canônicas com a Metadata API?

A Metadata API substitui o next/head no App Router. Segundo a documentação do Next.js sobre metadados, você exporta um objeto metadata estático de um layout ou de uma página, ou uma função generateMetadata quando os valores dependem de dados, e o Next.js gera as tags do head. Os dois só funcionam em Server Components.

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

Cinco regras que evitam a maioria dos problemas:

• Defina metadataBase no layout raiz (seu domínio de produção), para que canônicas relativas e URLs de Open Graph virem absolutas.
• Use um modelo de título no layout raiz, como '%s | Marca', para que cada página tenha um título único com a marca uma vez só.
• Dê a cada página indexável uma canônica autorreferente via alternates.canonical; ela protege contra duplicatas criadas por parâmetros de URL e barras finais. Nosso verbete sobre a tag canônica resume as regras.
• Escreva uma descrição por página, gerada a partir do conteúdo em generateMetadata, nunca um padrão para o site todo.
• Adicione imagens Open Graph com um arquivo opengraph-image na pasta da rota e confira o resultado com uma ferramenta de prévia Open Graph.

Em páginas dinâmicas, o Next.js envia os metadados por streaming depois dos primeiros bytes para acelerar a renderização. A documentação informa que o streaming fica desativado para bots que esperam os metadados no head, detectados pelo user agent (Bingbot, Twitterbot e Slackbot estão entre os exemplos), e que a opção htmlLimitedBots permite ajustar a lista. Se um rastreador importante para você não estiver nela, adicione-o. No Pages Router, o equivalente é o componente Head do next/head, com um atributo key para evitar tags duplicadas.

Como gerar sitemap.xml e robots.txt no Next.js?

Os dois são arquivos especiais da pasta app. Um arquivo sitemap.ts que exporta uma função que retorna URLs vira /sitemap.xml; um arquivo robots.ts vira /robots.txt. A referência do sitemap observa que o arquivo fica em cache por padrão e que o limite do Google é de 50.000 URLs por sitemap; acima disso, generateSitemaps o divide em vários arquivos.

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

Inclua apenas URLs canônicas, indexáveis e que respondem 200, com a data real de atualização em lastModified. O sitemap também aceita alternates.languages para sites multilíngues. No robots.ts, aponte para o sitemap e decida quais bots de IA podem rastrear o site; nosso artigo sobre robots.txt para rastreadores de IA lista todos eles. Mais sobre o formato no nosso verbete sobre sitemap XML.

Quais detalhes técnicos mais quebram o SEO de um site Next.js?

Todos esses problemas reduzem a rastreabilidade: um rastreador precisa descobrir cada URL por links e receber um código de status limpo.

Como adicionar dados estruturados no Next.js?

A documentação do Next.js recomenda renderizar o JSON-LD em uma tag script do tipo application/ld+json diretamente no componente de página ou de layout, a partir dos mesmos dados da página, e escapar o caractere < no JSON serializado para evitar injeção. Como é renderizado no servidor, o Google e os rastreadores de IA o veem no HTML bruto. Use Article (ou BlogPosting) para posts, Organization no layout raiz, BreadcrumbList para páginas profundas e Product no e-commerce. Um gerador de schema fornece um bloco válido para começar; depois, valide a página com o teste de pesquisa aprimorada do Google.

Como deixar um site Next.js rápido o bastante para as Core Web Vitals?

O Next.js traz componentes que resolvem as causas comuns de Core Web Vitals ruins:

• next/image: redimensiona imagens, entrega formatos modernos, usa carregamento lento por padrão e exige dimensões, o que evita mudanças de layout. Marque a imagem principal acima da dobra como prioritária para que ela não seja adiada (geralmente é o elemento do Largest Contentful Paint).
• next/font: hospeda as fontes no seu domínio e evita o deslocamento causado pela troca tardia de fonte.
• next/script: carrega scripts de terceiros com uma estratégia (afterInteractive, lazyOnload) em vez de bloquear a página.
• Menos JavaScript no cliente: cada fronteira 'use client' acrescenta código para baixar e hidratar, o que pesa no Interaction to Next Paint no celular.

Meça dados de campo, não só uma nota de laboratório: nosso guia do PageSpeed Insights mostra como ler os dois.

Como manter um blog em Next.js que ranqueia?

Um blog em Next.js costuma ter uma de três formas: arquivos MDX ou Markdown no repositório (simples, mas cada post exige um commit e um deploy), um CMS headless (Sanity, Contentful, Strapi, Payload) consultado em Server Components, ou um webhook de publicação que recebe artigos de uma ferramenta externa. Nos três casos o padrão de SEO é o mesmo: uma rota dinâmica app/blog/[slug] com generateStaticParams, generateMetadata, ISR, um sitemap alimentado pela mesma fonte e uma página de índice que linka todos os posts.

O webhook tira a publicação do ciclo de deploy. Um Route Handler recebe o artigo, salva e revalida as páginas afetadas:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Como o SEO no Next.js ajuda você a ser citado pelas IA?

A renderização no servidor é a primeira condição do GEO (otimização para motores generativos). 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, e contou 569 milhões de requisições do GPTBot e 370 milhões do Claude em sua rede em um mês. Uma página Next.js que pré-renderiza texto, títulos e JSON-LD é legível para todos eles; uma página renderizada no cliente, não.

A segunda condição é um conteúdo que mereça ser citado: artigos que respondem a uma pergunta por seção, com fontes, números e definições claras, publicados com regularidade. É essa parte que a Sorank, nosso produto, automatiza. A Sorank é um software de SEO e GEO no autopilot: encontra suas palavras-chave, e o seu gerador de artigos para blog escreve 20, 60 ou 120 artigos por mês com fontes, links internos e imagens. Em um site Next.js, ela se conecta pelo webhook personalizado descrito na página de instalação: seu Route Handler recebe cada artigo, salva e revalida o blog. O monitoramento de menções nas IA verifica depois, toda semana, se ChatGPT, Claude e Gemini citam sua marca.

Resumindo: pré-renderize cada página que você quer que seja encontrada, defina os metadados no servidor e alimente o sitemap pela mesma fonte do conteúdo. O Next.js oferece as ferramentas; posições e citações nas IA vêm do que você publica com elas. Para manter um blog em Next.js abastecido de artigos, veja os planos da Sorank, a partir de 49 € por mês com 3 dias de teste grátis.