Il tuo sito Next.js carica fulmineo, ma Google non lo indicizza bene. I meta tag sono un disastro. I link sui social mostrano solo un URL nudo. È il problema che vediamo più spesso nei progetti che arrivano da noi: stack modernissimo, ma SEO dimenticata. E senza SEO, un sito è un sito vuoto.

Noi, di Meteora Web, lavoriamo con Next.js dal 2021. Abbiamo accompagnato clienti dal primo deploy a posizioni stabili su Google. In questa guida non ti raccontiamo la teoria dei motori di ricerca. Ti mostriamo esattamente come usare le API di Next.js per metadata, sitemap e Open Graph — il triplo pilastro della SEO tecnica su questo framework.

Come usare la Metadata API di Next.js per controllare title e description?

Next.js App Router ha introdotto una Metadata API nativa. Niente più plugin esterni, niente più react-helmet. Si dichiara tutto in un oggetto export const metadata o tramite la funzione generateMetadata. Google, Facebook, Twitter leggono questi tag senza intermediari.

Metadata statica: il caso più semplice

Per pagine statiche (es. chi siamo, contatti) esporti un oggetto:

// app/chi-siamo/page.tsx
export const metadata = {
  title: 'Chi Siamo | Meteora Web - Agenzia Digitale a Sciacca',
  description: 'Da 8 anni sviluppiamo siti web e strategie digitali per PMI italiane. Scopri il nostro team e la nostra filosofia.',
};

export default function ChiSiamo() {
  return 
Chi Siamo
;
}

Attenzione: l'oggetto metadata va esportato da un file page.tsx o layout.tsx. Non funziona in componenti client.

Metadata dinamica con generateMetadata

Per pagine prodotto, articoli, schede — dove title e description cambiano in base ai dati — usi generateMetadata:

// app/prodotti/[id]/page.tsx
import { notFound } from 'next/navigation';

type Props = {
  params: { id: string }
};

export async function generateMetadata({ params }: Props): Promise {
  const prodotto = await getProdottoById(params.id);
  if (!prodotto) return {}; // oppure notFound()

  return {
    title: `${prodotto.nome} | Negozio Online`,
    description: prodotto.metaDescription || prodotto.descrizioneBreve,
    openGraph: {
      title: prodotto.nome,
      description: prodotto.metaDescription,
      images: [prodotto.immagine],
    },
  };
}

Questo pattern è il più importante per la SEO dinamica. Lo vediamo usato male spesso: title troppo lunghi, description duplicate. Ricorda: title max 60 caratteri, description max 160. Google taglia il resto.

Come generare una sitemap XML dinamica con Next.js App Router?

La sitemap è il file che dici a Google: "Ecco tutte le pagine del mio sito". Next.js permette di generarla automaticamente via sitemap.ts nella cartella app. Niente plugin, niente script esterni.

Esempio di sitemap dinamica con prodotti e categorie

// app/sitemap.ts
import { MetadataRoute } from 'next';

export default async function sitemap(): Promise {
  const baseUrl = 'https://tuodominio.com';

  // Pagine statiche
  const staticPages = [
    { url: baseUrl, lastModified: new Date() },
    { url: `${baseUrl}/chi-siamo`, lastModified: new Date('2025-01-15') },
    { url: `${baseUrl}/contatti`, lastModified: new Date('2025-01-10') },
  ];

  // Pagine dinamiche dai dati
  const prodotti = await fetch('https://api.tuo.com/prodotti').then(res => res.json());
  const productPages = prodotti.map((prod: any) => ({
    url: `${baseUrl}/prodotti/${prod.slug}`,
    lastModified: new Date(prod.aggiornatoIl),
    changeFrequency: 'weekly' as const,
    priority: 0.8,
  }));

  const categorie = await fetch('https://api.tuo.com/categorie').then(res => res.json());
  const categoryPages = categorie.map((cat: any) => ({
    url: `${baseUrl}/categorie/${cat.slug}`,
    lastModified: new Date(cat.aggiornatoIl),
    changeFrequency: 'monthly' as const,
    priority: 0.5,
  }));

  return [...staticPages, ...productPages, ...categoryPages];
}

Errori comuni: dimenticare di gestire pagine non trovate (404), non aggiornare lastModified quando il contenuto cambia, o mettere troppe voci con priority=1. Google ignora le priority gonfiate.

Come configurare i robots.txt con Next.js

Accanto alla sitemap, un buon robots.txt aiuta i crawler. Next.js lo genera con un file robots.ts:

// app/robots.ts
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/admin/',
    },
    sitemap: 'https://tuodominio.com/sitemap.xml',
  };
}

Inserisci il link alla sitemap qui sopra. Google la trova più velocemente.

Come impostare Open Graph per Facebook, LinkedIn e Twitter?

Open Graph controlla come appare il tuo link quando viene condiviso. Un buon OG tag può aumentare il click-through rate del 30% — parole nostre, non teoria. Su Next.js si dichiara direttamente nell'oggetto metadata.openGraph.

Open Graph di base per una pagina prodotto

// app/prodotti/[id]/page.tsx
export const metadata = {
  openGraph: {
    title: 'Scarpe Running Pro X | SportShop',
    description: 'Leggere e reattive, ideali per asfalto. Consegna in 24h.',
    url: 'https://tuodominio.com/prodotti/scarpe-running-pro-x',
    siteName: 'SportShop',
    images: [
      {
        url: 'https://tuodominio.com/og/scarpe-running.jpg',
        width: 1200,
        height: 630,
        alt: 'Scarpe Running Pro X su fondo stradale',
      },
    ],
    locale: 'it_IT',
    type: 'website',
  },
};

Dettaglio cruciale: l'immagine deve essere almeno 1200x630 pixel. Altrimenti i social la ritagliano male. Noi lo risolviamo con un generatore automatico di OG immagini server-side — ma anche un PNG statico va bene.

Twitter Card: non dimenticare

Twitter usa un tag parallelo. Puoi impostarlo nello stesso oggetto:

metadata.twitter = {
  card: 'summary_large_image',
  title: 'Scarpe Running Pro X',
  description: 'Leggere e reattive. Consegna in 24h.',
  images: ['https://tuodominio.com/og/scarpe-running.jpg'],
};

Se non lo imposti, Twitter usa i tag OG. Ma per ottimizzare, meglio dichiararli esplicitamente.

Quali errori di SEO tecnica evitare su Next.js?

Vediamo gli stessi errori ogni settimana. Eccoli.

• Title e description identici su tutte le pagine: Google percepisce contenuti duplicati e penalizza. Ogni pagina deve avere un titolo unico e una descrizione diversa.
• Metadata non gestiti per pagine 404: se un prodotto non esiste, la pagina 404 dovrebbe comunque avere un title e description sensati (es. "Prodotto non trovato | Nome Sito").
• Sitemap con URL di staging o localhost: capita quando si builda in locale e si dimentica di cambiare l'url base. Verifica sempre che baseUrl sia corretto.
• Open Graph senza URL assoluto: l'attributo url deve essere l'URL completo, non una stringa relativa.
• Non testare con validatori: usa Facebook Sharing Debugger e Twitter Card Validator per verificare.

Come verificare che la SEO su Next.js funzioni?

Noi abbiamo un flusso preciso in ogni progetto:

1. Lighthouse: esegui il test SEO. Deve segnare 100.
2. Google Search Console: invia la sitemap e controlla che non ci siano errori di indicizzazione.
3. Validatori OG e Twitter: testa le anteprime sui social.
4. Controllo manuale: apri il sorgente della pagina e cerca i meta tag. Devono apparire come li hai impostati.

Un consiglio che diamo sempre: non fermarti al deploy. Monitora ogni mese la posizione delle tue pagine. Se cali, controlla prima il metadata.

Cosa fare adesso

1. Apri la tua app Next.js e verifica che ogni page.tsx abbia un export const metadata o generateMetadata.
2. Crea il file app/sitemap.ts con il codice sopra, personalizzando le API di fetch.
3. Aggiungi il file app/robots.ts e verifica che punti alla sitemap corretta.
4. Testa un paio di pagine con il validatore Facebook: se l'anteprima è vuota, correggi l'immagine OG.
5. Leggi la documentazione ufficiale di Next.js Metadata API.
6. Se vuoi approfondire l'architettura Next.js, abbiamo un pillar dedicato: Next.js App Router — dalla teoria al deploy.

La SEO su Next.js non è un mistero. È disciplina. I tag si scrivono una volta, ma si controllano sempre. E se hai un progetto che non decolla, sai dove trovarci.