SEO Técnico para Desenvolvedores Next.js: Dicas e Ferramentas

O SEO técnico é essencial para garantir que seu site Next.js seja facilmente indexável, rápido e competitivo nos resultados de busca. Este guia aborda estratégias, ferramentas e trechos de código práticos para levar seu SEO ao próximo nível, com foco especial em sites multilíngues.

1. Meta Tags Dinâmicas e Open Graph

O Next.js 13+ permite o gerenciamento centralizado de meta tags usando a função generateMetadata:

export async function generateMetadata({ params }) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'common' });
  return {
    title: t('title'),
    description: t('description'),
    openGraph: {
      title: t('title'),
      description: t('description'),
      images: ['/public/placeholder.svg'],
    },
    icons: {
      icon: '/favicon.ico',
    },
  };
}

Dica: Lembre-se de atualizar as meta tags para cada idioma e página usando traduções dinâmicas.

2. Sitemap Automático e robots.txt

Para gerar sitemaps e robots.txt, use next-sitemap:

npm install next-sitemap

Configure next-sitemap.config.js para suportar idiomas:

module.exports = {
  siteUrl: 'https://spinny.dev',
  generateRobotsTxt: true,
  i18n: {
    locales: [
      'it',
      'en',
      'fr',
      'de',
      'es',
      'ar',
      'hi',
      'ja',
      'zh',
      'pt',
      'bn',
      'ru',
      'id',
      'ur',
      'ko',
      'tr',
      'vi',
      'th',
      'pl',
    ],
    defaultLocale: 'it',
  },
};

Ferramenta Extra: Experimente next-seo para gerenciamento avançado de meta tags e dados estruturados.

3. Internacionalização (i18n) e SEO Multilíngue

O Next.js suporta rotas localizadas. Lembre-se de:

• Usar a tag hreflang para cada idioma.
• Gerar sitemaps multilíngues.
• Traduzir meta tags.

Exemplo de tag hreflang:

<link rel="alternate" href="https://spinny.dev/it" hreflang="it" />
<link rel="alternate" href="https://spinny.dev/en" hreflang="en" />

Melhor Prática: Sempre ofereça um seletor de idioma visível e mantenha a consistência das URLs.

4. Desempenho e Core Web Vitals

• Use o <Image /> do Next.js para imagens otimizadas.
• Ative o lazy loading.
• Analise com Lighthouse e Vercel Analytics.
• Minimize JavaScript e CSS não utilizados.
• Aproveite o cache e CDN da Vercel.

5. Dados Estruturados (JSON-LD)

Adicione dados estruturados para melhorar a visibilidade em rich snippets:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'BlogPosting',
      headline: 'Technical SEO for Next.js Developers',
      datePublished: '2025-07-28',
      author: { '@type': 'Person', name: 'Filippo Spinella' },
      inLanguage: 'en',
    }),
  }}
/>

Dica: Inclua também dados estruturados para breadcrumbs, artigos e produtos, se aplicável.

6. Tratamento de Erros e Páginas 404 Personalizadas

Crie uma página not-found.tsx localizada para cada idioma. Isso melhora a experiência do usuário e o SEO.

Dica: Personalize também as páginas de erro 500 e de servidor.

7. Ferramentas Úteis

• next-sitemap: sitemaps e robots.txt
• next-seo: gerenciamento avançado de meta tags
• Google Search Console: monitoramento de SEO
• Ahrefs Webmaster Tools: análise técnica
• Screaming Frog: crawling avançado
• Mermaid: para visualizar fluxos e arquiteturas de SEO

8. Monitoramento e Análise

Integre Google Analytics, Vercel Analytics e monitore os Core Web Vitals.

• Use o Google Tag Manager para gerenciamento centralizado de tags.
• Monitore logs de acesso e erros com ferramentas como Sentry.

Conclusão

O SEO técnico no Next.js requer atenção a detalhes como meta tags, desempenho, internacionalização e dados estruturados. Automatize sempre que possível e monitore os resultados constantemente!

Checklist Final:

• [x] Meta tags dinâmicas
• [x] Sitemap multilíngue
• [x] Dados estruturados
• [x] Desempenho otimizado
• [x] Monitoramento ativo