SEO tecnico per sviluppatori Next.js: trucchi e strumenti

La 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.

1. Meta tag dinamici e Open Graph

Next.js 13+ permette di gestire i meta tag in modo centralizzato tramite la funzione 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',
    },
  };
}

Tip: Ricorda di aggiornare i meta tag per ogni lingua e pagina, sfruttando le traduzioni dinamiche.

2. Sitemap e robots.txt automatici

Per generare sitemap e robots.txt usa next-sitemap:

npm install next-sitemap

Configura next-sitemap.config.js per supportare le lingue:

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

Strumento extra: Prova anche next-seo per una gestione avanzata dei meta tag e dei dati strutturati.

3. Internationalization (i18n) e SEO multilingua

Next.js supporta le rotte localizzate. Ricorda di:

• Usare il tag hreflang per ogni lingua.
• Generare sitemap multilingua.
• Tradurre i meta tag.

Esempio di tag hreflang:

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

Best practice: Offri sempre la possibilità di cambiare lingua tramite un selettore visibile e mantieni la coerenza delle URL.

4. Performance e Core Web Vitals

• Usa <Image /> di Next.js per immagini ottimizzate.
• Attiva il lazy loading.
• Analizza con Lighthouse e Vercel Analytics.
• Minimizza JavaScript e CSS inutilizzati.
• Sfrutta la cache e il CDN di Vercel.

5. Structured Data (JSON-LD)

Aggiungi dati strutturati per migliorare la visibilità nei rich snippet:

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

Consiglio: Inserisci anche dati strutturati per breadcrumb, articoli e prodotti se il sito lo prevede.

6. Gestione degli errori e pagine 404 personalizzate

Crea una pagina not-found.tsx localizzata per ogni lingua. Questo migliora l’esperienza utente e la SEO.

Tip: Personalizza anche le pagine 500 e le pagine di errore lato server.

7. Strumenti utili

• next-sitemap: sitemap e robots.txt
• next-seo: gestione avanzata dei meta tag
• Google Search Console: monitoraggio SEO
• Ahrefs Webmaster Tools: analisi tecnica
• Screaming Frog: crawling avanzato
• Mermaid: per visualizzare flussi e architetture SEO

8. Monitoraggio e analisi

Integra Google Analytics, Vercel Analytics e monitora i Core Web Vitals.

• Usa Google Tag Manager per una gestione centralizzata dei tag.
• Monitora i log di accesso e gli errori con strumenti come Sentry.

Conclusione

La 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!

Checklist finale:

• [x] Meta tag dinamici
• [x] Sitemap multilingua
• [x] Structured data
• [x] Performance ottimizzata
• [x] Monitoraggio attivo