Benvenuto su CyberAlchimista! Se stai lavorando a progetti web moderni, basati su Single Page Application (SPA) o sul framework Next.js, e ti trovi a gestire siti multilingua o rivolti a diverse aree geografiche, ti sarai sicuramente imbattuto nella sfida di indicare correttamente ai motori di ricerca le diverse versioni localizzate dei tuoi contenuti. È qui che entra in gioco l’attributo hreflang. In questo articolo, esploreremo come implementare hreflang in SPA / Next.js, affrontando le sfide specifiche di queste architetture e fornendo soluzioni pratiche per garantire una SEO internazionale impeccabile.
L’ottimizzazione per i motori di ricerca (SEO) in contesti multilingua richiede precisione, e hreflang è lo standard de facto per comunicare le relazioni tra pagine equivalenti in lingue diverse o destinate a regioni specifiche. Ignorarlo significa rischiare problemi di contenuto duplicato e offrire un’esperienza utente subottimale, con potenziali ricadute negative sul posizionamento.
L’Importanza Cruciale di hreflang per la SEO Internazionale
Gestire un sito web in più lingue o per diverse aree geografiche non significa semplicemente tradurre i testi. Significa offrire un’esperienza pertinente a ciascun utente, presentandogli la versione del sito nella sua lingua e con contenuti (prezzi, valuta, ecc.) rilevanti per la sua località.
Per i motori di ricerca come Google, la presenza di contenuti molto simili (magari solo tradotti) su URL diversi può essere interpretata come contenuto duplicato. Questo è un segnale negativo che può portare a penalizzazioni o, nel migliore dei casi, a un posizionamento confuso in cui i motori di ricerca non sanno quale versione della pagina mostrare agli utenti di una determinata lingua o regione.
L’attributo hreflang risolve questo problema in modo elegante. Funziona come un “segnale” che dice ai motori di ricerca: “Queste pagine (A, B, C, …) sono versioni equivalenti dello stesso contenuto, ma ciascuna è destinata a utenti con preferenze linguistiche o geografiche specifiche”.
Cosa fa hreflang e perché è essenziale
Tecnicamente, hreflang è un attributo che viene utilizzato all’interno di un tag <link> nella sezione <head> di una pagina HTML. La sua sintassi base è:
<link rel="alternate" hreflang="[codice-lingua]-[codice-regione]" href="[URL-della-versione-localizzata]">
rel="alternate": Indica che questo link punta a una versione alternativa della pagina corrente.hreflang="[codice-lingua]-[codice-regione]": Specifica la lingua e, opzionalmente, la regione a cui questa versione alternativa è destinata. Il codice lingua deve essere nel formato ISO 639-1 (es.it,en,es). Il codice regione (opzionale) deve essere nel formato ISO 3166-1 Alpha 2 (es.en-US,en-GB,fr-CA). Puoi specificare solo la lingua (it) per coprire tutti gli utenti di quella lingua, indipendentemente dalla loro regione.href="[URL-della-versione-localizzata]": L’URL completo (preferibilmente assoluto) della versione localizzata.
Perché è essenziale?
- Prevenire Contenuti Duplicati: Come accennato, distingue le versioni localizzate dal vero contenuto duplicato.
- Targeting Preciso: Aiuta i motori di ricerca a servire la versione corretta della pagina agli utenti in base alle loro impostazioni di lingua del browser o alla loro posizione geografica. Un utente in Italia con browser in italiano vedrà la versione
/it/, mentre un utente negli Stati Uniti con browser in inglese vedrà la versione/en-US/(se specificata) o/en/. - Migliorare l’Esperienza Utente: Un utente che trova immediatamente la versione del sito nella sua lingua è più propenso a rimanere e interagire, riducendo il tasso di rimbalzo.
Differenza tra contenuti duplicati e versioni localizzate
È fondamentale capire che i motori di ricerca non penalizzano intenzionalmente i contenuti tradotti o leggermente modificati per diverse regioni, a patto che vengano correttamente segnalati. Il problema nasce quando questi contenuti simili appaiono su URL diversi senza una chiara indicazione della loro relazione e destinazione.
hreflang fornisce questa chiara indicazione, trasformando quelle che altrimenti potrebbero essere viste come pagine duplicate in un insieme coerente di versioni alternative della stessa risorsa informativa o commerciale.
Benefici diretti su SEO e targeting linguistico/geografico
L’implementazione corretta di hreflang si traduce in benefici tangibili:
- Aumento della visibilità: Le tue pagine hanno maggiori probabilità di posizionarsi bene nelle ricerche effettuate da utenti dei mercati target.
- Riduzione del tasso di rimbalzo: Gli utenti trovano subito la versione a loro più pertinente.
- Migliore allocazione del budget di crawl: I motori di ricerca capiscono rapidamente la struttura del tuo sito multilingua, evitando di sprecare risorse su versioni che non dovrebbero indicizzare per una data query/utente.
Per approfondire i concetti di base della SEO tecnica, puoi consultare la nostra guida completa alla SEO tecnica per developer.
Implementare hreflang in SPA
Le Single Page Application (SPA), costruite con framework come React, Vue o Angular, presentano una sfida unica per l’implementazione di hreflang rispetto ai siti web tradizionali renderizzati lato server (SSR). Nelle SPA, gran parte del contenuto della pagina viene generato e manipolato dinamicamente dal browser tramite JavaScript dopo il caricamento iniziale del file HTML vuoto o minimale.
Problematiche principali nelle SPA: routing client-side, SEO dinamica
Il problema principale è che i motori di ricerca tradizionalmente si basano sul contenuto HTML statico ricevuto dal server per capire la struttura e i metadati di una pagina. Se i tag <link hreflang> vengono iniettati nel <head> solo in un secondo momento tramite JavaScript eseguito lato client, c’è il rischio che i bot dei motori di ricerca non li rilevino o li rilevino in modo inconsistente.
Alcuni motori di ricerca, come Google, sono diventati molto più bravi nell’eseguire JavaScript per l’indicizzazione, ma non c’è mai la garanzia che l’esecuzione sia completa, tempestiva e priva di errori su tutte le pagine e in ogni momento. Affidarsi esclusivamente all’iniezione lato client per metadati SEO critici come hreflang è rischioso.
Soluzioni generali per applicare hreflang correttamente
Le soluzioni generali per le SPA “pure” (client-side rendering) includono:
- Pre-rendering o SSR parziale: Utilizzare tecniche di pre-rendering o renderizzazione parziale lato server per assicurarsi che il codice HTML iniziale consegnato al browser (e ai bot) contenga già i tag
hreflangcorretti nel<head>. Strumenti come Prerender.io o librerie specifiche per framework possono aiutare, ma aggiungono complessità all’architettura. - Renderizzazione Ibrida (Islands Architecture): Approcci più moderni combinano rendering server-side per parti critiche (come l’
<head>) con interattività client-side per altre sezioni. Questo è un principio alla base di framework come Astro o, in modo più gestito, di Next.js. - Utilizzo di Header HTTP
Link: Un’alternativa ai tag HTML è specificare le relazionihreflangnegli header HTTP della risposta del server. Questo è più robusto per le SPA pure, in quanto non dipende dall’esecuzione di JavaScript lato client. Tuttavia, gestire gli header HTTP dinamicamente per ogni pagina in una SPA può essere complesso a livello di configurazione del server o del service worker. La sintassi negli header è:
Link: <https://example.com/en/page.html>; rel="alternate"; hreflang="en", <https://example.com/it/pagina.html>; rel="alternate"; hreflang="it", <https://example.com/x/pagina.html>; rel="alternate"; hreflang="x-default"
(Nota: tutti i link per la pagina corrente devono essere inclusi in un singolo header Link, separati da virgole).
Mentre l’approccio degli header HTTP è tecnicamente valido per le SPA, nella pratica è spesso meno gestibile rispetto all’inserimento dei tag nel <head> per la maggior parte dei team di sviluppo frontend. Ed è qui che framework come Next.js offrono un enorme vantaggio.
Implementare hreflang in Next.js
Next.js, essendo un framework React che supporta nativamente la renderizzazione lato server (SSR), la generazione di siti statici (SSG) e il rendering ibrido, semplifica notevolmente la gestione dei metadati SEO, inclusi i tag hreflang. Grazie alla sua capacità di renderizzare il codice React sul server prima che venga inviato al browser, possiamo assicurarci che il tag <head> contenga già le informazioni corrette al primo caricamento.
Uso del componente next/head
La chiave per gestire i metadati SEO in Next.js è il componente next/head. Questo componente ti permette di inserire elementi nella sezione <head> del documento HTML da qualsiasi componente della tua applicazione. Quando la pagina viene renderizzata lato server, Next.js raccoglie tutti i contenuti di next/head definiti nei componenti della pagina e li include nell’HTML iniziale.
Ecco un esempio base:
// pages/chi-siamo.js (esempio pagina)
import Head from 'next/head';
function AboutPage() {
return (
<>
<Head>
<title>Chi Siamo - MySite Italia</title>
<meta name="description" content="Scopri chi siamo noi di MySite Italia." />
{/* Altri meta tag... */}
</Head>
<h1>Chi Siamo</h1>
{/* Contenuto della pagina... */}
</>
);
}
export default AboutPage;
Creazione dinamica di tag link rel=”alternate” hreflang=”…” nelle pagine
Per hreflang, useremo next/head per inserire dinamicamente i tag <link rel="alternate" hreflang="..."> per tutte le versioni localizzate della pagina corrente. L’elenco degli URL alternativi dovrà essere generato in base all’URL della pagina che si sta visualizzando e alla lista delle lingue/regioni supportate dal sito.
Supponiamo di avere una struttura di routing basata su slug multilingua, ad esempio:
/it/chi-siamo/en/about-us/es/sobre-nosotros
E di supportare le lingue it, en, es, con un fallback x-default che punta alla versione italiana /it/.
In Next.js, puoi accedere al percorso corrente (pathname) e, se utilizzi il routing internazionale integrato o personalizzato, alla locale corrente all’interno del componente pagina (ad esempio, usando il hook useRouter o ottenendo i parametri nel contesto di getStaticProps/getServerSideProps).
Ecco come potresti generare i tag hreflang dinamicamente:
// components/HreflangLinks.js
import Head from 'next/head';
import { useRouter } from 'next/router';
const supportedLocales = ['it', 'en', 'es']; // La tua lista di lingue/regioni supportate
const baseUrl = 'https://www.tuosito.com'; // Sostituisci con la base URL del tuo sito
// Funzione helper per generare gli URL per le altre lingue
const generateAlternateUrls = (currentPathname, currentLocale) => {
const alternates = [];
const pathWithoutLocale = currentPathname.startsWith(`/${currentLocale}`)
? currentPathname.substring(`/${currentLocale}`.length)
: currentPathname; // Rimuovi la locale attuale dal path
supportedLocales.forEach(locale => {
if (locale !== currentLocale) {
alternates.push({
hreflang: locale,
href: `${baseUrl}/${locale}${pathWithoutLocale}`,
});
}
});
// Aggiungi la versione self-referential
alternates.push({
hreflang: currentLocale,
href: `${baseUrl}${currentPathname}`
});
// Aggiungi l'x-default, puntando ad esempio alla versione italiana
alternates.push({
hreflang: 'x-default',
href: `${baseUrl}/it${pathWithoutLocale}` // Punta alla tua versione di fallback
});
return alternates;
};
function HreflangLinks() {
const router = useRouter();
const currentPathname = router.asPath; // Ottiene il path con query params
const currentLocale = router.locale; // Se usi il routing internazionale di Next.js
if (!currentLocale) {
// Gestire il caso in cui il routing internazionale non è configurato così
// Potrebbe essere necessario estrarre la locale dal pathname
console.warn("Router locale non disponibile. Assicurati che il routing internazionale sia configurato.");
return null; // O implementa logica di estrazione locale dal pathname
}
const alternates = generateAlternateUrls(currentPathname, currentLocale);
return (
<Head>
{alternates.map((alt) => (
<link
key={alt.hreflang}
rel="alternate"
hreflang={alt.hreflang}
href={alt.href}
/>
))}
</Head>
);
}
export default HreflangLinks;
Quindi, in ogni pagina o nel layout principale (se applicabile a tutte le pagine allo stesso modo), importerai e userai questo componente:
// pages/[lang]/[slug].js (esempio di pagina dinamica)
import Head from 'next/head';
import { useRouter } from 'next/router';
import HreflangLinks from '../../components/HreflangLinks'; // Percorso corretto
function DynamicPage({ content }) {
const router = useRouter();
const { lang, slug } = router.query; // Ottieni lang e slug dai parametri URL
// Assicurati che i dati 'content' includano titolo e meta description per la locale corrente
const pageTitle = content?.title || 'Titolo di default';
const pageDescription = content?.description || 'Descrizione di default';
return (
<>
<Head>
<title>{pageTitle}</title>
<meta name="description" content={pageDescription} />
{/* Altri meta tag specifici della pagina */}
</Head>
{/* Inserisci il componente hreflang */}
<HreflangLinks />
<h1>{pageTitle}</h1>
{/* Renderizza il resto del contenuto della pagina */}
<div>{content?.body}</div>
</>
);
}
// Esempio di data fetching (puoi usare getStaticProps o getServerSideProps)
// Questo è solo un esempio semplificato
export async function getServerSideProps(context) {
const { lang, slug } = context.params;
// Qui recuperi i dati della pagina per la lingua e lo slug specifici
// Ad esempio da un CMS headless o un'API
const content = await fetch(`https://api.tuosito.com/content/${lang}/${slug}`).then(res => res.json());
if (!content) {
return {
notFound: true, // Ritorna 404 se il contenuto non esiste per questa locale/slug
};
}
return {
props: {
content,
},
};
}
export default DynamicPage;
In questo esempio, il componente HreflangLinks ottiene la locale e il percorso corrente da useRouter e genera l’elenco completo dei tag <link hreflang> per tutte le lingue supportate, includendo il link self-referential e l’x-default. Poiché questo componente è incluso nella pagina (e usato all’interno di next/head), i tag hreflang saranno presenti nell’HTML renderizzato lato server.
Questo approccio è robusto per la SEO perché i tag hreflang sono disponibili per i bot dei motori di ricerca già nell’HTML iniziale, prima che venga eseguito qualsiasi JavaScript lato client.
Best practice SEO per hreflang
Implementare hreflang richiede attenzione ai dettagli. Anche un piccolo errore può rendere i tag inefficaci o addirittura dannosi per la SEO.
Specificare sempre anche x-default
Il tag hreflang="x-default" è fondamentale. Indica ai motori di ricerca qual è la versione predefinita della pagina da mostrare agli utenti per i quali nessuna delle altre lingue/regioni specificate corrisponde. Questo include utenti con impostazioni linguistiche non supportate o utenti provenienti da paesi non targettizzati esplicitamente. Spesso si punta alla versione inglese o alla lingua principale del sito. Nel codice di esempio, abbiamo puntato alla versione italiana (/it/).
<link rel="alternate" hreflang="x-default" href="https://www.tuosito.com/it/pagina.html" />Evitare errori comuni (URL errati, mismatch lingue)
I problemi più frequenti nell’implementazione di hreflang includono:
- URL non corretti: Assicurati che gli URL negli attributi
hrefsiano corretti, raggiungibili e preferibilmente assoluti (https://...). - Mancanza di reciprocità: Se la pagina A (in italiano) linka alla pagina B (in inglese) con
hreflang, la pagina B deve linkare indietro alla pagina A con il taghreflangcorrispondente. Questa è una regola fondamentale che viene spesso dimenticata. Il nostro helpergenerateAlternateUrlsgestisce automaticamente la reciprocità per tutte le lingue supportate per la stessa pagina. - Codici lingua/regione errati: Usa i codici ISO corretti (ISO 639-1 per lingua, ISO 3166-1 Alpha 2 per regione).
- Puntare a contenuti non equivalenti: I tag
hreflangdevono puntare a versioni della stessa pagina, non a pagine completamente diverse.
Testing tramite Google Search Console e strumenti di analisi hreflang
Dopo aver implementato hreflang, è essenziale verificarne la correttezza.
- Google Search Console: GSC ha una sezione specifica per il targeting internazionale (precedentemente nelle “Vecchie versioni” -> “Targeting internazionale”, ora spesso integrata negli strumenti di ispezione URL o report specifici). Monitora eventuali errori o avvisi relativi a
hreflang. Lo strumento di ispezione URL ti mostrerà anche i taghreflangche Google ha rilevato per una specifica URL. - Strumenti di validazione online: Esistono diversi tool online (come quello di Ahrefs o altri) in cui puoi inserire un URL e verificare se i tag
hreflangsono implementati correttamente e se la reciprocità è rispettata per tutte le versioni indicate.
Il testing e il monitoraggio periodico sono cruciali, specialmente dopo modifiche alla struttura del sito o l’aggiunta di nuove lingue.
Se vuoi approfondire la SEO tecnica e come essa si applica allo sviluppo frontend moderno, leggi la nostra checklist SEO tecnica per sviluppatori frontend.
Conclusione
Gestire correttamente il multilingua in un progetto web moderno basato su SPA o Next.js è vitale per raggiungere e servire un pubblico globale. L’attributo hreflang è lo strumento standard per comunicare efficacemente ai motori di ricerca le diverse versioni linguistiche e regionali delle tue pagine, evitando problemi di contenuto duplicato e migliorando il targeting.
Mentre le SPA “pure” richiedono soluzioni alternative (come header HTTP o pre-rendering) che possono essere complesse, framework come Next.js, grazie al supporto nativo per la renderizzazione lato server e al comodo componente next/head, semplificano notevolmente l’implementazione di hreflang.
Seguendo le best practice – specificando sempre x-default, garantendo la reciprocità dei link, usando URL e codici corretti – e testando l’implementazione con strumenti come Google Search Console, puoi assicurarti che il tuo sito multilingua sia correttamente indicizzato e offra la migliore esperienza possibile agli utenti di tutto il mondo.
L’implementazione di hreflang SPA Next.js non è solo una questione tecnica, ma un investimento diretto nel successo internazionale del tuo progetto. Verifica periodicamente la tua configurazione e mantieniti aggiornato sulle linee guida dei motori di ricerca per assicurare performance SEO ottimali nel tempo.
LINK INTERNI UTILIZZATI:
LINK ESTERNI SUGGERITI:
