La Guida Completa a Hreflang 2026 (con Esempi Next.js)

Il tuo sito web può essere tecnicamente perfetto in inglese e rimanere comunque invisibile alla maggior parte del mondo.

L'inglese copre solo il 49,7% di tutti i contenuti web (W3Techs, maggio 2026). Ciò significa che l'altra metà del web opera in altre lingue — e senza il segnale giusto, Google deve indovinare quale versione della tua pagina appartiene a quale pubblico. I tuoi visitatori tedeschi ottengono una pagina in inglese. Rimbalzano. Perdi la conversione.

Hreflang è l'attributo HTML che risolve questo problema. Ed è malfunzionante sulla maggior parte dei siti multilingue.

In questa guida, esamineremo cos'è hreflang, come scriverlo senza gli errori comuni che ostacolano la maggior parte degli sviluppatori e esattamente come implementarlo in un progetto Next.js 15 App Router — inclusi i modelli che utilizziamo per gestire 10 varianti linguistiche in build multilingue.

Punti chiave

• Il 58% dei siti web multilingue presenta conflitti interni di hreflang nel codice sorgente (Semrush, 2023)
• Il 76% degli acquirenti online preferisce acquistare nella propria lingua madre — il 40% non acquisterà affatto da un sito in una lingua diversa (CSA Research, 2020)
• Google tratta hreflang come un suggerimento, non una direttiva — i tag inaffidabili vengono ignorati, ma il problema dei contenuti duplicati rimane
• In Next.js 15 App Router, alternates.languages all'interno di generateMetadata() è il metodo di implementazione corretto a zero dipendenze
• Il 96% dei siti con conflitti hreflang non ha il tag auto-referenziale — una semplice omissione rompe l'intero cluster (Semrush, 2023)

Cos'è Hreflang e perché è importante per il tuo posizionamento?

Solo il 25,9% degli utenti internet naviga principalmente online in inglese (Internet World Stats via Wikipedia, 2025). Eppure il compito di Google è servire a ogni utente contenuti nella propria lingua — e senza hreflang, deve indovinare solo dai segnali di contesto. Hreflang è un attributo HTML che indica a Google precisamente quale lingua e versione regionale di una pagina mostrare a quale utente.

La sintassi di base è la seguente:

``html ``

Questo blocco deve apparire su tutte le versioni linguistiche della pagina — inclusa la versione inglese che si collega a se stessa. Se si dimentica quel riferimento a se stesso su una singola pagina, l'intero cluster hreflang per quell'URL diventa inaffidabile agli occhi di Google.

Perché fare le cose per bene porta a risultati commerciali? Un sondaggio di CSA Research su 8.709 consumatori in 29 paesi ha rilevato che il 76% preferisce acquistare prodotti con informazioni nella propria lingua madre, e il 65% sceglierebbe una pagina nella propria lingua anche se la qualità della traduzione è inferiore a un'alternativa in lingua inglese (CSA Research "Can't Read, Won't Buy", 2020). Hreflang non aiuta solo il posizionamento — determina se il traffico tradotto si converte.

Il tasso di conflitto interno del 58% è sorprendente, ma la causa principale è quasi sempre la stessa: gli sviluppatori aggiungono hreflang al template della pagina inglese e dimenticano di replicare l'intero cluster sulle pagine tradotte. Un riferimento a se stesso mancante sulla pagina tedesca invalida la connessione di cui Google ha bisogno per confermare che le pagine inglese e tedesca sono varianti autentiche l'una dell'altra — non duplicati.

Come utilizza Google Hreflang?

Ecco cosa la maggior parte delle guide hreflang tralascia: Google ha confermato che i tag hreflang sono trattati come suggerimenti, non direttive. Google non penalizzerà hreflang non corretto — ignorerà silenziosamente i tag che ritiene inaffidabili. Il pericolo sta in ciò che accade senza il suggerimento: Google tratta le tue varianti linguistiche come pagine separate che competono per la stessa parola chiave, spesso mostrando la lingua sbagliata ai cercatori o creando una situazione di contenuto duplicato auto-competitivo.

Il requisito di reciprocità è la regola fondamentale. Ogni versione linguistica di una pagina deve includere tag hreflang che puntano a tutte le altre versioni, inclusa se stessa. Se la tua pagina inglese si collega alla pagina tedesca ma la pagina tedesca non si collega a sua volta alla pagina inglese, il cluster è rotto.

Cosa Google convalida su ogni tag hreflang: - Il valore hreflang corrisponde alla lingua effettiva della pagina collegata - L'href è l'URL canonico assoluto — gli URL relativi falliscono silenziosamente - Tutte le pagine nel cluster si riferiscono reciprocamente in modo bidirezionale

Una mancata corrispondenza linguistica — dichiarare hreflang="de" su una pagina che è effettivamente in inglese — segnala a Google che l'intera configurazione hreflang potrebbe essere inaffidabile. Lo studio Semrush ha rilevato che il 21% dei siti multilingue ha questo problema (Semrush, 2023). Ciò accade di solito quando una pagina non è ancora stata tradotta ma porta ancora tag hreflang che puntano al contenuto inglese.

Come scrivere correttamente gli attributi Hreflang

La parte più soggetta a errori di hreflang non è il nome dell'attributo — è il valore del codice lingua. Uno studio Semrush ha rilevato che il 15% dei siti multilingue utilizza formati di codice hreflang non validi, solitamente a causa della confusione del carattere separatore o della mescolanza di codici lingua e paese (Semrush, 2023).

Le regole: - Usa i codici lingua a due lettere ISO 639-1: en, de, fr, sv - Opzionalmente combina con i codici paese ISO 3166-1 Alpha-2 usando un trattino: en-GB, de-CH, pt-BR - Non usare mai i trattini bassi — en_US è sbagliato; en-US è corretto - Includi sempre x-default per la pagina di fallback

| Lingua Intesa | Hreflang Corretto | Valore errato comune | |---|---|---| | Inglese (globale) | en | en-EN, english | | Inglese (UK) | en-GB | en_GB, eng-UK | | Tedesco (Germania) | de | ger, de_DE con trattino basso | | Tedesco (Svizzera) | de-CH | ch, de_CH con trattino basso | | Svedese | sv | sw, swe | | Norvegese Bokmål | nb | no | | Portoghese (Brasile) | pt-BR | pt_BR con trattino basso | | Fallback / selettore | x-default | default, x_default |

Le voci svedese e norvegese sono le più fraintese. Il codice ISO 639-1 dello svedese è sv, non sw. Il norvegese ha due standard scritti: nb (Bokmål) e nn (Nynorsk). La maggior parte dei siti norvegesi dovrebbe usare nb. Usare no in hreflang è tecnicamente scorretto — non si mappa a un sottotag di lingua IANA valido.

Il tedesco svizzero merita una nota a parte: ch è il codice paese della Svizzera, non un codice lingua. Il valore hreflang per i contenuti in tedesco svizzero è de-CH. Usare ch da solo come valore hreflang non è valido e verrà ignorato.

Come implementare Hreflang in Next.js 15 App Router

L'App Router di Next.js 15 rende l'implementazione di hreflang pulita e nativa del framework — senza bisogno di pacchetti SEO di terze parti. Gestiamo 10 varianti linguistiche nelle nostre build multilingue (inglese, finlandese, francese, tedesco, italiano, norvegese, tedesco svizzero, serbo, spagnolo e svedese) e il modello seguente è quello che utilizziamo in produzione.

La chiave è il campo alternates.languages all'interno di generateMetadata(). Next.js lo renderizza automaticamente come tag in , senza bisogno di rendering personalizzato.

Passo 1: Costruire una mappatura esplicita dei codici lingua

Le chiavi interne della lingua dell'URL non sempre corrispondono ai codici hreflang ISO. Costruisci una mappa esplicita per evitare bug a runtime:

``typescript // src/lib/hreflang.ts export const HREFLANG_CODE: Record = { en: 'en', fi: 'fi', fr: 'fr', de: 'de', it: 'it', no: 'nb', // Norwegian Bokmål — ISO hreflang code is nb, not no ch: 'de-CH', // Swiss German — URL prefix /ch, hreflang value de-CH sr: 'sr', es: 'es', sw: 'sv', // Swedish — internal key sw, ISO hreflang code sv }; ``

Due veri "gotcha" di produzione: il valore hreflang del norvegese è nb, non no. E il codice ISO dello svedese è sv — usare sw (che è internamente conveniente come prefisso di tabella DB) nell'attributo hreflang non è valido. Questa mappa esplicita è ciò che impedisce a questi bug di raggiungere la produzione.

Passo 2: Costruire un helper getAlternates centralizzato

```typescript // src/lib/hreflang.ts (continued) const BASE_URL = 'https://fridamarketing.com'; const LANG_CODES = ['fi', 'fr', 'de', 'it', 'no', 'ch', 'sr', 'es', 'sw']; // URL prefix for each lang key (ch → no prefix needed? no → /no) const LANG_URL: Record = { fi: 'fi', fr: 'fr', de: 'de', it: 'it', no: 'no', ch: 'ch', sr: 'sr', es: 'es', sw: 'sv', };

export function getAlternates(routeKey: string, currentLang?: string) { const languages: Record = { en: ${BASE_URL}/${routeKey}, };

for (const lang of LANG_CODES) { const urlPrefix = LANG_URL[lang]; const hreflangCode = HREFLANG_CODE[lang]; languages[hreflangCode] = ${BASE_URL}/${urlPrefix}/${routeKey}; }

const canonical = currentLang ? ${BASE_URL}/${LANG_URL[currentLang] || currentLang}/${routeKey} : ${BASE_URL}/${routeKey};

return { canonical, languages: { ...languages, 'x-default': ${BASE_URL}/${routeKey} }, }; } ```

Passo 3: Usarlo all'interno di generateMetadata()

Per la pagina inglese:

```typescript // app/about/page.tsx import { getAlternates } from '@/lib/hreflang';

export async function generateMetadata() { return { title: 'About Us | Frida Marketing', description: 'Next.js development and multilingual SEO agency.', alternates: getAlternates('about'), }; } ```

Per le varianti linguistiche:

```typescript // app/[lang]/about/page.tsx import { getAlternates } from '@/lib/hreflang';

export async function generateMetadata({ params }: { params: { lang: string } }) { return { title: 'About Us | Frida Marketing', description: 'Next.js development and multilingual SEO agency.', alternates: getAlternates('about', params.lang), }; } ```

Next.js compila l'oggetto alternates.languages nell'insieme completo di tag automaticamente. Ogni lingua, incluso il riferimento a se stessa per la pagina corrente, viene renderizzata correttamente purché la mappatura sia completa.

Secondo un sondaggio di DeepL e Regina Corso Consulting su marketer senior negli Stati Uniti, Germania, Giappone e Francia, il 96% ha riportato un ROI positivo dagli sforzi di traduzione e localizzazione, e il 65% ha riportato un ritorno di 3x o superiore (BusinessWire, 2024). Il sovraccarico tecnico di un hreflang corretto è modesto rispetto ai ricavi che ne derivano.

Quale metodo Hreflang dovresti usare?

Ci sono tre modi per dichiarare hreflang: tag HTML, voci nella sitemap XML o intestazioni di risposta HTTP. Tutti e tre sono validi per Google — la scelta giusta dipende dal tuo stack e dal volume di contenuti.

| Metodo | Come funziona | Ideale per | |---|---|---| | Tag HTML | iniettato nella di ogni pagina | Next.js App Router tramite generateMetadata() | | Sitemap XML | all'interno di ogni blocco in sitemap.xml | Siti gestiti da CMS, grandi volumi di pagine | | Intestazioni HTTP | Intestazione Link: nella risposta del server | Contenuti non HTML (PDF, endpoint JSON) |

Per Next.js, l'approccio generateMetadata() è il default corretto. Mantiene le dichiarazioni hreflang co-locate con la logica della pagina, è controllato in fase di build e non richiede una manutenzione separata della sitemap. L'approccio della sitemap è un utile supplemento per siti di grandi dimensioni, ma non dovrebbe essere l'unica fonte di hreflang quando il framework lo gestisce nativamente.

Una cosa da notare: puoi dichiarare hreflang sia nei tag che nella sitemap sullo stesso sito. Google accetta entrambi e non entrano in conflitto. Ma mantenere due fonti di verità per gli stessi dati è qualcosa da evitare — mantienilo in generateMetadata() e lascia che la sitemap gestisca la priorità di scansione separatamente.

Come testare e convalidare la tua configurazione Hreflang

Implementare hreflang è metà del lavoro. Convalidare che Google l'abbia rilevato correttamente è l'altra metà. Questi quattro strumenti coprono diverse modalità di errore — usane almeno due.

Google Search Console — Rapporto Targeting internazionale Dopo l'implementazione, apri GSC → Strumenti legacy → Targeting internazionale. Mostra quali varianti linguistiche Google ha indicizzato e segnala eventuali errori di configurazione hreflang rilevati. Questa è la tua verità fondamentale — se GSC mostra una bandiera di lingua o regione sollevata, indaga prima di ogni altra cosa.

Semrush Site Audit Esegui un audit completo e filtra per problemi hreflang. Semrush rileva riferimenti a se stessi mancanti, URL hreflang rotti e mancate corrispondenze linguistiche — le tre modalità di errore più comuni su 20.000 siti testati.

Ahrefs Site Audit Ahrefs segnala quali pagine mancano da un cluster hreflang completo, il che è prezioso quando hai 10 lingue e devi confermare che ogni variante si riferisca a tutte le altre. Trova lacune che Semrush a volte non rileva.

hreflang.org — checker gratuito per singolo URL Incolla un URL, ottieni tutti i suoi tag hreflang visualizzati e verifica che il cluster sia reciproco. Veloce per controlli spot una tantum durante lo sviluppo prima di un audit completo del sito.

Una cosa che gli strumenti di audit non rileveranno: hreflang tecnicamente valido ma semanticamente sbagliato. Se dichiari hreflang="de-CH" su una pagina che serve contenuti generici in tedesco anziché contenuti in tedesco svizzero, i tag supereranno ogni validatore. Ma Google alla fine inferirà dai segnali comportamentali che gli utenti svizzeri non sono ben serviti, e la fiducia nel tuo cluster hreflang diminuirà nel tempo. La validazione tecnica è solo la base — abbinare il contenuto alla locale dichiarata è l'obiettivo reale.

---

Costruiamo siti Next.js multilingue con implementazione hreflang completa fin dal primo giorno — mappatura corretta dei codici lingua, sitemap tradotte, markup schema specifico per lingua e audit hreflang strutturati dopo il lancio. Contattaci per discutere il tuo progetto, o consulta i nostri prezzi per pacchetti di sviluppo multilingue e SEO.

---

Domande Frequenti

Cos'è hreflang e cosa fa?

Hreflang è un attributo di link HTML che indica a Google quale versione linguistica di una pagina servire agli utenti in regioni o lingue specifiche. L'implementazione corretta impedisce a Google di mostrare la versione linguistica sbagliata, riduce la frequenza di rimbalzo ed evita penalizzazioni per contenuti duplicati tra le varianti linguistiche.

Hreflang migliora direttamente il posizionamento su Google?

Google tratta hreflang come un suggerimento, non una direttiva — ignora i tag che ritiene inaffidabili. L'implementazione corretta impedisce che la lingua sbagliata venga mostrata ai cercatori, riducendo la frequenza di rimbalzo e migliorando i segnali di coinvolgimento che indirettamente migliorano il posizionamento. Un hreflang non corretto crea una competizione di contenuti duplicati tra le tue stesse varianti linguistiche.

Quali sono gli errori hreflang più comuni?

Uno studio Semrush su 20.000 siti web multilingue ha rilevato che il 58% presenta conflitti interni nel codice sorgente, il 37% si collega a URL rotti o reindirizzati, il 21% presenta una mancata corrispondenza linguistica tra il valore hreflang dichiarato e la lingua effettiva della pagina, e il 15% utilizza codici lingua o paese non validi (Semrush, 2023).

Come implemento hreflang in Next.js 15 App Router?

In Next.js 15, esporta un oggetto alternates.languages da generateMetadata(). Usa i codici lingua ISO 639-1 come chiavi e URL canonici assoluti come valori. Includi x-default che punta alla tua locale predefinita. Next.js renderizza automaticamente questi come tag nell'intestazione del documento — non è necessario un rendering separato o una libreria di terze parti.

A cosa serve x-default hreflang?

x-default designa una pagina di fallback per gli utenti la cui lingua o regione non corrisponde a nessuno dei tuoi valori hreflang dichiarati. È tipicamente la versione inglese o una pagina di atterraggio per la selezione della lingua. Includila sempre — segnala a Google che hai intenzionalmente tenuto conto dei visitatori da locali non elencati piuttosto che semplicemente aver dimenticato il tag.

Conclusione

Hreflang è uno di quegli elementi SEO tecnici che è facile ottenere parzialmente corretto e difficile ottenere completamente corretto. La sintassi è semplice, ma le modalità di errore — riferimenti a se stessi mancanti, URL relativi, codici ISO errati, link non reciproci tra varianti linguistiche — sono sottili e non emergono come errori visibili finché non vedi la lingua sbagliata posizionarsi nel mercato sbagliato.

In Next.js 15, l'API alternates.languages in generateMetadata() gestisce il rendering in modo pulito e senza pacchetti aggiuntivi. Il vero investimento è nel livello di mappatura: assicurarsi che ogni chiave di lingua interna si risolva in un codice hreflang ISO valido e che gli URL canonici che passi siano assoluti e puntino alla pagina effettivamente indicizzata.

Se stai costruendo un sito Next.js multilingue e desideri una revisione della tua configurazione hreflang, contattaci — identificheremo esattamente quali cluster presentano problemi prima che Google li segnali.