1~
2La SEO tecnica è fondamentale per garantire che il tuo sito Next.js sia facilmente indicizzabile, veloce e competitivo nei risultati di ricerca. In questa guida vedremo strategie, strumenti e snippet pratici per portare la tua SEO al livello successivo, con attenzione particolare ai siti multilingua.
3~
4## 1. Meta tag dinamici e Open Graph
5~
6Next.js 13+ permette di gestire i meta tag in modo centralizzato tramite la funzione `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> **Tip:** Ricorda di aggiornare i meta tag per ogni lingua e pagina, sfruttando le traduzioni dinamiche.
28~
29## 2. Sitemap e robots.txt automatici
30~
31Per generare sitemap e robots.txt usa [next-sitemap](https://www.npmjs.com/package/next-sitemap):
32~
33```bash
34npm install next-sitemap
35```
36~
37Configura `next-sitemap.config.js` per supportare le lingue:
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> **Strumento extra:** Prova anche [next-seo](https://github.com/garmeeh/next-seo) per una gestione avanzata dei meta tag e dei dati strutturati.
71~
72## 3. Internationalization (i18n) e SEO multilingua
73~
74Next.js supporta le rotte localizzate. Ricorda di:
75~
76- Usare il tag `hreflang` per ogni lingua.
77- Generare sitemap multilingua.
78- Tradurre i meta tag.
79~
80Esempio di tag `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> **Best practice:** Offri sempre la possibilità di cambiare lingua tramite un selettore visibile e mantieni la coerenza delle URL.
88~
89## 4. Performance e Core Web Vitals
90~
91- Usa `<Image />` di Next.js per immagini ottimizzate.
92- Attiva il lazy loading.
93- Analizza con [Lighthouse](https://developers.google.com/web/tools/lighthouse) e [Vercel Analytics](https://vercel.com/analytics).
94- Minimizza JavaScript e CSS inutilizzati.
95- Sfrutta la cache e il CDN di Vercel.
96~
97## 5. Structured Data (JSON-LD)
98~
99Aggiungi dati strutturati per migliorare la visibilità nei rich snippet:
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 tecnico per sviluppatori Next.js',
109      datePublished: '2025-07-28',
110      author: { '@type': 'Person', name: 'Filippo Spinella' },
111      inLanguage: 'it',
112    }),
113  }}
114/>
115```
116~
117> **Consiglio:** Inserisci anche dati strutturati per breadcrumb, articoli e prodotti se il sito lo prevede.
118~
119## 6. Gestione degli errori e pagine 404 personalizzate
120~
121Crea una pagina `not-found.tsx` localizzata per ogni lingua. Questo migliora l’esperienza utente e la SEO.
122~
123> **Tip:** Personalizza anche le pagine 500 e le pagine di errore lato server.
124~
125## 7. Strumenti utili
126~
127- **next-sitemap**: sitemap e robots.txt
128- **next-seo**: gestione avanzata dei meta tag
129- **Google Search Console**: monitoraggio SEO
130- **Ahrefs Webmaster Tools**: analisi tecnica
131- **Screaming Frog**: crawling avanzato
132- **Mermaid**: per visualizzare flussi e architetture SEO
133~
134## 8. Monitoraggio e analisi
135~
136Integra Google Analytics, Vercel Analytics e monitora i Core Web Vitals.
137~
138- Usa [Google Tag Manager](https://tagmanager.google.com/) per una gestione centralizzata dei tag.
139- Monitora i log di accesso e gli errori con strumenti come Sentry.
140~
141~
142## Conclusione
143~
144La SEO tecnica in Next.js richiede attenzione a dettagli come meta tag, performance, internazionalizzazione e dati strutturati. Automatizza dove possibile e monitora costantemente i risultati!
145~
146> **Checklist finale:**
147>
148> - [x] Meta tag dinamici
149> - [x] Sitemap multilingua
150> - [x] Structured data
151> - [x] Performance ottimizzata
152> - [x] Monitoraggio attivo
153~