1 
2El 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.
3 
4## 1. Meta etiquetas dinámicas y Open Graph
5 
6Next.js 13+ permite la gestión centralizada de meta etiquetas mediante la función `generateMetadata`:
7 
8```tsx
9export async function generateMetadata({ params }) {
10  const { locale } = await params;
11  const t = await getTranslations({ locale, namespace: 'common' });
12  return {
13    title: t('title'),
14    description: t('description'),
15    openGraph: {
16      title: t('title'),
17      description: t('description'),
18      images: ['/public/placeholder.svg'],
19    },
20    icons: {
21      icon: '/favicon.ico',
22    },
23  };
24}
25```
26 
27> **Consejo:** Recuerda actualizar las meta etiquetas para cada idioma y página utilizando traducciones dinámicas.
28 
29## 2. Sitemap y robots.txt automáticos
30 
31Para generar sitemaps y robots.txt, utiliza [next-sitemap](https://www.npmjs.com/package/next-sitemap):
32 
33```bash
34npm install next-sitemap
35```
36 
37Configura `next-sitemap.config.js` para soportar idiomas:
38 
39```js
40module.exports = {
41  siteUrl: 'https://spinny.dev',
42  generateRobotsTxt: true,
43  i18n: {
44    locales: [
45      'it',
46      'en',
47      'fr',
48      'de',
49      'es',
50      'ar',
51      'hi',
52      'ja',
53      'zh',
54      'pt',
55      'bn',
56      'ru',
57      'id',
58      'ur',
59      'ko',
60      'tr',
61      'vi',
62      'th',
63      'pl',
64    ],
65    defaultLocale: 'it',
66  },
67};
68```
69 
70> **Herramienta extra:** Prueba [next-seo](https://github.com/garmeeh/next-seo) para una gestión avanzada de meta etiquetas y datos estructurados.
71 
72## 3. Internacionalización (i18n) y SEO multilingüe
73 
74Next.js soporta rutas localizadas. Recuerda:
75 
76- Usar la etiqueta `hreflang` para cada idioma.
77- Generar sitemaps multilingües.
78- Traducir las meta etiquetas.
79 
80Ejemplo de etiqueta `hreflang`:
81 
82```tsx
83<link rel="alternate" href="https://spinny.dev/it" hreflang="it" />
84<link rel="alternate" href="https://spinny.dev/en" hreflang="en" />
85```
86 
87> **Mejor práctica:** Ofrece siempre un selector de idioma visible y mantén la coherencia de las URL.
88 
89## 4. Rendimiento y Core Web Vitals
90 
91- Usa `<Image />` de Next.js para imágenes optimizadas.
92- Activa el lazy loading.
93- Analiza con [Lighthouse](https://developers.google.com/web/tools/lighthouse) y [Vercel Analytics](https://vercel.com/analytics).
94- Minimiza JavaScript y CSS no utilizados.
95- Aprovecha la caché y el CDN de Vercel.
96 
97## 5. Datos estructurados (JSON-LD)
98 
99Agrega datos estructurados para mejorar la visibilidad en los rich snippets:
100 
101```tsx
102<script
103  type="application/ld+json"
104  dangerouslySetInnerHTML={{
105    __html: JSON.stringify({
106      '@context': 'https://schema.org',
107      '@type': 'BlogPosting',
108      headline: 'SEO técnico para desarrolladores de Next.js',
109      datePublished: '2025-07-28',
110      author: { '@type': 'Person', name: 'Filippo Spinella' },
111      inLanguage: 'es',
112    }),
113  }}
114/>
115```
116 
117> **Consejo:** Incluye también datos estructurados para breadcrumbs, artículos y productos si aplica.
118 
119## 6. Gestión de errores y páginas 404 personalizadas
120 
121Crea una página `not-found.tsx` localizada para cada idioma. Esto mejora la experiencia del usuario y el SEO.
122 
123> **Consejo:** Personaliza también las páginas 500 y las páginas de error del servidor.
124 
125## 7. Herramientas útiles
126 
127- **next-sitemap**: sitemaps y robots.txt
128- **next-seo**: gestión avanzada de meta etiquetas
129- **Google Search Console**: monitoreo SEO
130- **Ahrefs Webmaster Tools**: análisis técnico
131- **Screaming Frog**: crawling avanzado
132- **Mermaid**: para visualizar flujos y arquitecturas SEO
133 
134## 8. Monitoreo y análisis
135 
136Integra Google Analytics, Vercel Analytics y monitorea los Core Web Vitals.
137 
138- Usa [Google Tag Manager](https://tagmanager.google.com/) para una gestión centralizada de etiquetas.
139- Monitorea los registros de acceso y errores con herramientas como Sentry.
140 
141 
142## Conclusión
143 
144El 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.
145 
146> **Lista de verificación final:**
147>
148> - [x] Meta etiquetas dinámicas
149> - [x] Sitemap multilingüe
150> - [x] Datos estructurados
151> - [x] Rendimiento optimizado
152> - [x] Monitoreo activo
153