Se você já publicou uma aplicação Nuxt que carrega instantaneamente no navegador, mas mal aparece no Google, saiba que não está sozinho. Muitas equipes tratam SEO como um checklist de última hora, quando deveria fazer parte da arquitetura desde o primeiro dia. O Nuxt oferece recursos poderosos para visibilidade em buscas, mas só funcionam quando você entende como os crawlers consomem suas páginas e qual estratégia de renderização combina com seu conteúdo.
Este guia percorre as decisões e implementações que realmente fazem diferença: renderização no servidor, gerenciamento do head, URLs canônicas, sitemaps, dados estruturados, performance e os erros comuns que derrubam o ranqueamento silenciosamente.
Comece pelo Modo de Renderização Certo
SEO começa com uma pergunta fundamental: o HTML retornado contém conteúdo relevante antes do JavaScript executar? SPAs que entregam um shell vazio obrigam os crawlers a executar seu bundle. O Google consegue fazer isso, mas é mais lento, menos confiável e inadequado para sites com muito conteúdo.
O Nuxt suporta vários modos de renderização, e sua escolha impacta diretamente o SEO:
- Server-side rendering (SSR) — ideal para páginas dinâmicas que mudam com frequência, como perfis públicos, listagens de e-commerce ou feeds de notícias. Cada requisição retorna HTML completamente renderizado.
- Geração de site estático (SSG) — melhor para páginas institucionais, documentação e blogs em que o conteúdo muda no deploy. As páginas são pré-renderizadas no build e servidas como arquivos estáticos.
- Renderização híbrida — o ponto ideal para a maioria dos apps em produção. Use route rules para pré-renderizar rotas estáticas enquanto mantém seções autenticadas ou muito dinâmicas em SSR ou renderização client-only.
Uma configuração híbrida prática no nuxt.config.ts pode ficar assim:
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/blog/**': { prerender: true },
'/app/**': { ssr: true },
'/admin/**': { ssr: false }
}
})Rotas públicas e indexáveis devem sempre retornar HTML completo. Reserve a renderização client-only para áreas que exigem autenticação ou alta interatividade e que não devem aparecer nos resultados de busca.
Domine o Head do Documento com useSeoMeta
Title tags e meta descriptions continuam entre os sinais on-page mais fortes. No Nuxt 3, useSeoMeta e useHead do Unhead oferecem uma API tipada e reativa para gerenciar tudo o que crawlers e redes sociais leem no head.
Defina metadados SEO no nível da página para que cada rota tenha conteúdo único e descritivo:
<script setup lang="ts">
const route = useRoute()
useSeoMeta({
title: 'Guia de SEO no Nuxt — Dicas Práticas para Devs',
description: 'Aprenda a configurar SSR, meta tags, sitemaps e dados estruturados no Nuxt para melhorar o ranqueamento.',
ogTitle: 'Guia de SEO no Nuxt',
ogDescription: 'Um passo a passo de boas práticas de SEO no Nuxt para desenvolvedores.',
ogImage: 'https://example.com/og/nuxt-seo.png',
ogUrl: `https://example.com${route.path}`,
twitterCard: 'summary_large_image'
})
</script>Algumas regras separam implementações bem feitas das apressadas:
- Títulos únicos por página — inclua a marca apenas uma vez, geralmente no final. Evite títulos duplicados entre rotas.
- Descriptions entre 140 e 160 caracteres — escreva para pessoas, não para keyword stuffing. Cada página precisa de um resumo distinto.
- Open Graph e Twitter completos — compartilhamentos sociais geram tráfego, e as plataformas usam metadados OG quando faltam tags específicas do Twitter.
- Atualizações reativas na navegação client-side — o useSeoMeta cuida disso automaticamente, mas valide as mudanças no DevTools após trocar de rota.
Configure Padrões Globais no nuxt.config
Meta por página cuida dos detalhes; config global garante consistência. Use o bloco site e os defaults do app head para que toda página herde uma base:
export default defineNuxtConfig({
site: {
url: 'https://example.com',
name: 'Meu App Nuxt'
},
app: {
head: {
htmlAttrs: { lang: 'pt-BR' },
link: [
{ rel: 'icon', href: '/favicon.ico' }
]
}
}
})Definir htmlAttrs.lang é fácil de esquecer, mas importante para acessibilidade e SEO internacional. Em sites multilíngues com @nuxtjs/i18n, altere o atributo lang dinamicamente por locale e use link tags hreflang para indicar variantes de idioma aos buscadores.
URLs Canônicas e Conteúdo Duplicado
Conteúdo duplicado dilui os sinais de ranqueamento. Fontes comuns em apps Nuxt incluem inconsistência de barra final, variações de query string e o mesmo conteúdo servido em múltiplos caminhos durante migrações.
Defina uma URL canônica em cada página indexável para declarar a versão preferida:
useHead({
link: [
{ rel: 'canonical', href: `https://example.com${route.path}` }
]
})
Com o módulo @nuxtjs/seo ou o Nuxt Site Config, URLs canônicas podem ser geradas automaticamente a partir da URL do site. Audite produção no Google Search Console para encontrar títulos duplicados, descriptions repetidas e páginas excluídas por conflito de canonical.
Gere Sitemaps e Controle o Rastreamento
Um sitemap informa aos buscadores quais URLs existem e com que frequência mudam. Sem ele, crawlers descobrem páginas apenas por links internos, o que deixa de fora rotas profundas ou recém-adicionadas.
O módulo @nuxtjs/sitemap integra bem com Nuxt 3. Após a instalação, ele descobre rotas automaticamente e expõe o endpoint /sitemap.xml. Para conteúdo dinâmico como posts de blog vindos de um CMS, forneça uma server route ou hook que adiciona URLs no build ou em tempo de requisição:
// server/api/__sitemap__/urls.ts
export default defineSitemapEventHandler(async () => {
const posts = await $fetch('/api/posts')
return posts.map(post => ({
loc: `/blog/${post.slug}`,
lastmod: post.updatedAt
}))
})Combine o sitemap com um robots.txt adequado. Bloqueie ambientes de staging por completo. Em produção, disallow em caminhos que nunca devem ser indexados — painéis admin, resultados de busca interna, URLs com filtros facetados — e aponte crawlers para a localização do sitemap.
Adicione Dados Estruturados para Rich Results
Dados estruturados ajudam buscadores a entender o tipo de conteúdo e podem liberar rich results: snippets de FAQ, cards de produto, breadcrumbs e previews de artigos. Implemente JSON-LD via script tag no head:
useHead({
script: [
{
type: 'application/ld+json',
children: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Article',
headline: 'Guia de SEO no Nuxt',
author: { '@type': 'Person', name: 'Jane Developer' },
datePublished: '2026-01-15'
})
}
]
})
Combine tipos de schema com o conteúdo real da página. Use Article para posts, Product para e-commerce, FAQPage para suporte e BreadcrumbList para contexto de navegação. Valide o markup com o Rich Results Test do Google antes do deploy.
Otimize Imagens e Core Web Vitals
O Google usa sinais de experiência de página, incluindo Core Web Vitals, como fatores de ranqueamento. O Nuxt oferece <NuxtImg> e <NuxtPicture> pelo módulo Image, com tamanhos responsivos, formatos modernos como WebP e AVIF e lazy loading nativos.
- Defina largura e altura explícitas em imagens above-the-fold para evitar layout shift (CLS).
- Lazy-load de mídia abaixo da dobra — o componente Image faz isso por padrão com o atributo loading.
- Sirva assets por CDN — configure um provider IPX ou CDN externa de imagens em produção.
- Preload de recursos críticos — fontes e imagens hero se beneficiam de link rel="preload" no useHead.
Rode Lighthouse e PageSpeed Insights no build de produção, não só no localhost. SSR pode melhorar o Largest Contentful Paint se o servidor responder rápido, mas uma API lenta upstream prejudica independentemente do framework.
Trate Componentes Client-Only com Cuidado
Envolver widgets interativos em <ClientOnly> é correto para gráficos, mapas e APIs exclusivas do browser, mas evite envolver conteúdo textual principal. Se seu H1, corpo do artigo ou descrição de produto renderiza só no client, crawlers podem nunca vê-lo.
Quando um componente precisa ser client-only, garanta que a página ao redor ainda entregue o texto essencial em HTML renderizado no servidor. Use skeletons para UX, não como substituto de conteúdo real na resposta inicial.
Meça, Itere e Evite Armadilhas Comuns
SEO não é configuração única. Após o lançamento, conecte o Google Search Console e monitore cobertura de indexação, erros de rastreamento e performance de queries. Verifique se o output SSR corresponde ao esperado executando:
curl -A "Googlebot" https://example.com/blog/nuxt-seoO HTML retornado deve conter title, meta description, link canonical e conteúdo principal — não apenas uma div com id="__nuxt" e tags script.
Fique atento a estes erros recorrentes em projetos Nuxt:
- noindex deixado em produção — meta tags de staging deployadas por engano bloqueiam toda indexação.
- SSR ausente em rotas públicas — páginas de marketing com ssr: false por conveniência.
- Meta hard-coded no app.vue — sobrescreve SEO por página e cria duplicatas.
- Paginação ignorada no SEO — página 2 do blog precisa de title, description e links rel="prev" / rel="next" próprios.
- Assets bloqueados no robots.txt — disallow incorreto em /_nuxt/ ou /api/ impede a renderização.
O Nuxt não ranqueia seu site automaticamente. Ele oferece flexibilidade de renderização, gerenciamento de head e ecossistema de módulos para implementar SEO corretamente. Escolha a estratégia certa por rota, defina metadados únicos em todo lugar, gere sitemaps, adicione dados estruturados onde fizer sentido e trate performance como parte da stack de SEO. Feito isso com consistência, seu site Nuxt estará preparado para usuários e crawlers desde a base.