SEO técnico para desarrolladores de Next.js: consejos y herramientas

El SEO técnico es fundamental para garantizar que tu sitio Next.js sea fácilmente indexable, rápido y competitivo en los resultados de búsqueda. Esta guía cubre estrategias, herramientas y fragmentos prácticos para llevar tu SEO al siguiente nivel, con un enfoque especial en sitios multilingües.

1. Meta etiquetas dinámicas y Open Graph

Next.js 13+ permite la gestión centralizada de meta etiquetas mediante la función 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',
    },
  };
}

Consejo: Recuerda actualizar las meta etiquetas para cada idioma y página utilizando traducciones dinámicas.

2. Sitemap y robots.txt automáticos

Para generar sitemaps y robots.txt, utiliza next-sitemap:

npm install next-sitemap

Configura next-sitemap.config.js para soportar idiomas:

module.exports = {
  siteUrl: 'https://spinny.dev',
  generateRobotsTxt: true,
  i18n: {
    locales: ['it', 'en', 'fr', 'de', 'es', 'ar', 'hi', 'ja', 'zh'],
    defaultLocale: 'it',
  },
};

Herramienta extra: Prueba next-seo para una gestión avanzada de meta etiquetas y datos estructurados.

3. Internacionalización (i18n) y SEO multilingüe

Next.js soporta rutas localizadas. Recuerda:

• Usar la etiqueta hreflang para cada idioma.
• Generar sitemaps multilingües.
• Traducir las meta etiquetas.

Ejemplo de etiqueta hreflang:

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

Mejor práctica: Ofrece siempre un selector de idioma visible y mantén la coherencia de las URL.

4. Rendimiento y Core Web Vitals

• Usa <Image /> de Next.js para imágenes optimizadas.
• Activa el lazy loading.
• Analiza con Lighthouse y Vercel Analytics.
• Minimiza JavaScript y CSS no utilizados.
• Aprovecha la caché y el CDN de Vercel.

5. Datos estructurados (JSON-LD)

Agrega datos estructurados para mejorar la visibilidad en los rich snippets:

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

Consejo: Incluye también datos estructurados para breadcrumbs, artículos y productos si aplica.

6. Gestión de errores y páginas 404 personalizadas

Crea una página not-found.tsx localizada para cada idioma. Esto mejora la experiencia del usuario y el SEO.

Consejo: Personaliza también las páginas 500 y las páginas de error del servidor.

7. Herramientas útiles

• next-sitemap: sitemaps y robots.txt
• next-seo: gestión avanzada de meta etiquetas
• Google Search Console: monitoreo SEO
• Ahrefs Webmaster Tools: análisis técnico
• Screaming Frog: crawling avanzado
• Mermaid: para visualizar flujos y arquitecturas SEO

8. Monitoreo y análisis

Integra Google Analytics, Vercel Analytics y monitorea los Core Web Vitals.

• Usa Google Tag Manager para una gestión centralizada de etiquetas.
• Monitorea los registros de acceso y errores con herramientas como Sentry.

Conclusión

El SEO técnico en Next.js requiere atención a detalles como meta etiquetas, rendimiento, internacionalización y datos estructurados. Automatiza donde sea posible y monitorea constantemente los resultados.

Lista de verificación final:

• [x] Meta etiquetas dinámicas
• [x] Sitemap multilingüe
• [x] Datos estructurados
• [x] Rendimiento optimizado
• [x] Monitoreo activo