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~