hreflang: l’attributo HTML per siti web multilingue

Se desideri dare un tocco più internazionale al tuo sito web e proporre i contenuti in diverse lingue, ti ritrovi a dover affrontare diversi compiti, tra cui l’ottimizzazione per i motori di ricerca delle diverse versioni linguistiche. Infatti, è solo sulla base di misure SEO specifiche per lingua e paese che i crawler dei motori di ricerca riescono a classificare correttamente le diverse versioni linguistiche di un sito web e mostrarle così al pubblico corrispondente. Uno degli strumenti più efficaci a disposizione dei SEO a questo scopo è l’attributo hreflang.

Che cos’è hreflang?

A dicembre 2011 Google ha presentato l’attributo hreflang come soluzione semplice ed efficace per informare i motori di ricerca sulle relazioni tra più varianti di un sito web. L’attributo segnala ai crawler delle applicazioni di ricerca che il contenuto del sito in questione è disponibile in lingue diverse. A questo scopo il tag hreflang viene inserito all’interno di un elemento link nel documento HTML, insieme all’abbreviazione della lingua disponibile per il sito internet. Se, ad esempio, si desidera mostrare agli utenti una pagina in spagnolo, bisogna implementare questo elemento con l’abbreviazione relativa al paese e alla lingua, in questo caso “es”. La sintassi dell’elemento completo si presenta così:

<link rel="alternate" hreflang="es" href="URL del sito web" />

Se, ad esempio, questo elemento è integrato in un sito internet in tedesco, gli utenti con un indirizzo IP spagnolo verranno automaticamente rimandati alla pagina equivalente in spagnolo.

L’attributo hreflang può essere anche utilizzato per contrassegnare le varianti di una stessa lingua. In questo caso viene ampliato semplicemente indicando la regione di destinazione. Prendiamo ancora una volta l’esempio della già citata pagina in spagnolo: si potrebbe pensare di distinguere la pagina utilizzata dagli utenti in Spagna (“hreflang=“es-ES”) dalla variante mostrata agli utenti in Messico (“hreflang=“es-MX”). Tutte le possibili abbreviazioni relative a paesi e lingue sono definite negli standard ISO 639 e ISO 3166.

Perché il tag hreflang è importante per la SEO?

La ragione principale dell’uso di attributi come canonical o hreflang è quella di evitare contenuti duplicati nei progetti web multilingue. Spesso si devono servire mercati diversi senza che il contenuto, escludendo la traduzione, sia fondamentalmente diverso. Per i paesi in cui si parla la stessa lingua, la situazione è ancora più complicata: ad alcune poche modifiche dovute a differenze culturali o regionali (vocabolario, valuta, informazioni di contatto, ecc.) si contrappongono contenuti quasi identici. Poiché di solito viene utilizzato lo stesso dominio, è molto importante inviare segnali chiari ai motori di ricerca per evitare valutazioni negative.

Mentre l’attributo canonical dichiara che un URL è la variante dominante ed esclude tutte le versioni alternative dall’indicizzazione, il tag hreflang segnala quale versione deve essere presentata a un target specifico (lingua e/o paese) durante la ricerca sui motori di ricerca. Per questo motivo, il markup HTML è sempre adatto se si vuole avere successo a livello internazionale con il proprio sito web e fornire i relativi contenuti multilingue. Anche se l’attributo non ha un’influenza diretta sul posizionamento nei motori di ricerca, un uso corretto darà i suoi frutti a lungo termine, perché sia i crawler che gli utenti di diversi paesi saranno in grado di trovare il tuo sito web.

Com’è strutturato l’attributo hreflang?

Il tag hreflang si basa sull’elemento HTML link. L’elemento link <link /> è un elemento vuoto e serve solo a designare un URL specifico con gli attributi corrispondenti. Può essere usato solo nella sezione “head”, ma senza limitazioni, quindi tutte le volte che serve. Per collegare più versioni linguistiche di una stessa pagina con hreflang, è necessario aggiungere i due attributi rel e href. Questi tre componenti hanno la seguente funzione:

• rel: specifica le relazioni tra un documento già esistente e quello da collegare. Il valore alternate indica al motore di ricerca che il documento esterno presenta una versione alternativa di quel determinato sito web.
• hreflang: questo attributo descrive in quale lingua è redatto il documento collegato; inoltre, può anche indicare per quale paese la pagina è particolarmente rilevante. Un elenco chiaro di tutte le possibili combinazioni è disponibile su lingoes.net.
• href: l’attributo href indica l’URL della versione linguistica alternativa.

Il seguente esempio di hreflang serve a illustrare questo aspetto:

<link rel="alternate" hreflang="Abbreviazione della lingua-abbreviazione del paese" href="URL del sito web" />

Se agli utenti non viene assegnata una versione linguistica appropriata, è il posizionamento a decidere quale delle varianti linguistiche viene visualizzata. Di conseguenza, potresti perdere potenziali lettori già dopo pochi secondi perché si trovano sulla versione linguistica sbagliata. Tuttavia, Google fornisce un’opzione con "x-default" che può essere utilizzata per evitare questa situazione. Questo elemento segnala al motore di ricerca che l’URL collegato è la soluzione predefinita per tutti gli utenti per i quali non esiste una versione linguistica specifica. Un esempio:

<link rel="alternate" hreflang="x-default" href="URL della pagina predefinita" />

Come implementare hreflang?

Il tag link hreflang può essere implementato in tre modi: il modo più comune è includerlo nella sezione head del rispettivo documento HTML. Per i documenti che non sono in formato HTML (ad esempio un file PDF), l’elemento può essere utilizzato in alternativa nell’header HTTP. Infine, c’è anche la possibilità di includere l’attributo specifico della lingua o del paese nella sitemap.

L’integrazione nell’header HTTP funziona in linea di principio allo stesso modo, poiché tutte le versioni linguistiche esistenti devono essere referenziate anche lì. Ci sono solo alcune piccole differenze nella sintassi:

Link: <http://esempiodominio.it/es/downloads/manuals.pdf/>; rel="alternate"; hreflang="es"

Se desideri realizzare un progetto web internazionale, l’implementazione degli attributi hreflang in una sitemap XML è un’utile alternativa all’inserimento del tag in ogni singola pagina. Infatti, se offri contenuti multilingue su larga scala, l’impegno necessario per la consueta implementazione HTML è relativamente alto. Anche in una sitemap tutte le versioni linguistiche devono essere elencate singolarmente specificando il rispettivo URL. Ogni URL è anche specificato da un elemento xhtml: link che fa riferimento alle altre varianti disponibili:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
	xmlns:xhtml="http://www.w3.org/1999/xhtml">
	<url>
		<loc>http://esempiodominio.it/</loc>
		<xhtml:link 
			rel="alternate"
			hreflang="it"
			href="http://esempiodominio.it/"
		/>
		<xhtml:link 
			rel="alternate"
			hreflang="de"
			href="http://esempiodominio.it/de/"
		/>
		<xhtml:link 
			rel="alternate"
			hreflang="es"
			href="http://esempiodominio.it/es/"
		/>
		<xhtml:link 
			rel="alternate"
			hreflang="en"
			href="http://esempiodominio.it/en/"
		/>
	</url>
</urlset>

È necessario ripetere il tag <url> allo stesso modo per ogni versione linguistica dell’articolo.

Una proprietà dell’attributo è di fondamentale importanza per capire come funziona hreflang: infatti, il tag collega due o più documenti in modo bidirezionale e non unidirezionale, come nel caso di un reindirizzamento. Non è quindi sufficiente che il sito web in lingua tedesca contenga un collegamento hreflang alla versione in lingua spagnola, che però non rimanda alla pagina in lingua tedesca. Solo se l’annotazione HTML hreflang è impostata in tutti i documenti in tutte le direzioni disponibili (versioni linguistiche), il motore di ricerca può riconoscere la struttura del tuo progetto web e adattare di conseguenza i risultati per chi effettua la ricerca.

Il seguente esempio di codice hreflang per il sito web esempiodominio.it con le versioni linguistiche in italiano, tedesco, spagnolo e inglese dovrebbe quindi essere inserito nell’intestazione di tutti e quattro i documenti HTML:

<link rel="alternate" href="http://esempiodominio.it/" hreflang="it" />
<link rel="alternate" href="http://esempiodominio.it/de/" hreflang="de" />
<link rel="alternate" href="http://esempiodominio.it/es/" hreflang="es" />
<link rel="alternate" href="http://esempiodominio.it/en/" hreflang="en" />

Errori frequenti nell’implementazione del tag hreflang

Gli esempi di hreflang per HTML riportati qui dimostrano che non è complicato implementare e assegnare automaticamente gli utenti alle pagine web nelle diverse lingue. Tuttavia, bisogna avere una certa attenzione nell’effettuare tutti i passaggi correttamente, indicando tutti i riferimenti giusti: non va sottovalutata la possibilità di fare errori. Infatti, talvolta può succedere di sbagliare e causare problemi di minore o maggiore entità, alcuni dei quali riguardano solo singole pagine, ma altri, di contro, mettono a repentaglio la funzionalità di hreflang per l’intero progetto web. Per questo motivo abbiamo riassunto alcune delle fonti di errore più comuni nei paragrafi seguenti.

hreflang non implementato a livello di URL

Poiché il tag hreflang è sempre collegato a un URL specifico, deve essere sempre implementato a questo livello. In altre parole: se viene etichettato esclusivamente l’URL di partenza delle diverse versioni linguistiche, il tag automatico si applica solo a queste pagine iniziali e non all’intero progetto web. Spetta quindi a te implementare singolarmente l’elemento link per tutte le pagine multilingue o URL o, in alternativa, lavorare con la variante della sitemap citata nei paragrafi precedenti.

Una o più versioni linguistiche mancano di autoreferenza

Molto spesso, chi gestisce un sito web contrassegna gli URL delle versioni linguistiche con l’attributo hreflang, ma dimentica che la pagina corrispondente deve anche fare riferimento a sé stessa. In questo caso, la struttura di collegamento è incompleta e non può essere considerata né da Google, né da altri motori di ricerca.

Si dovrebbe anche specificare una pagina predefinita usando hreflang x-default, altrimenti si lascerebbe inutilizzato un certo potenziale di ottimizzazione.

Codici ISO errati

Nell’immettere i codici ISO relativi alle abbreviazioni nazionali e linguistiche, molti SEO tendono a non seguire alla lettera il protocollo giusto, causando spesso la trascrizione di un codice hreflang non corretto. Ad esempio, se il contenuto della pagina è esplicitamente rivolto al pubblico britannico, la combinazione "en-uk" potrebbe, a prima vista, sembrare una scelta appropriata, ma il collegamento giusto è in realtà "en-gb". Verifica sempre le abbreviazioni dei paesi che utilizzi in base allo standard ISO 639-1.

Riferimento a URL obsoleti o inesistenti

Uno dei principali motivi di errore riguardo all’uso del tag hreflang è l’utilizzo di URL che non esistono più. Ciò capita quando i tag vengono automaticamente implementati in tutte le sottopagine, ma non sono tutte disponibili in ogni variante di lingua offerta. Un URL diventa obsoleto nel momento in cui si apportano modifiche alla struttura dell’URL senza che queste vengano trasmesse agli elementi link.

Implementazione discordante del tag canonical e hreflang

In molti siti internazionali si ricorre al tag canonical in modo da evitare che i crawler dei motori di ricerca indicizzino le pagine con contenuti uguali o simili. Questo modo di agire è sicuramente un’opzione valida per aggirare la problematica dei contenuti duplicati, tuttavia entra in conflitto con l’utilizzo dell’attributo hreflang. Di fatto se una pagina contiene entrambi i tag, i motori di ricerca ricevono informazioni contraddittorie e ignorano entrambi i segnali. Pertanto, si dovrebbe utilizzare il tag hreflang solo per le pagine che non si riferiscono a un’altra pagina tramite il tag canonical.

Le impostazioni nella Google Search Console inviano segnali contraddittori

Se registri il tuo sito web nella Search Console di Google, puoi definire l’orientamento internazionale di un dominio o di un URL, a condizione che vengano utilizzati domini generici di primo livello. In ogni caso, Google pensa anche alle estensioni di dominio specifiche per un determinato paese. Non c’è dubbio che tu, in qualità di gestore del sito web, trarrai vantaggio da questa funzione: Google utilizza queste informazioni per classificare le pagine in modo ottimale. Quindi vale sicuramente la pena di informare Google sulle versioni localizzate del tuo sito.

Tuttavia, non si dovrebbe mai dimenticare di includere queste impostazioni nelle attività SEO. Contrassegnando anche le pagine con il tag hreflang, non dovrebbero sorgere contraddizioni. Ad esempio, può succedere rapidamente che una pagina sia contrassegnata con un solo codice lingua e senza specifiche regionali, mentre allo stesso tempo un determinato paese è specificato nella console di Google.

Strumenti utili per il tag hreflang

Come è già stato detto in precedenza, l’integrazione del tag hreflang nelle pagine HTML rilevanti avviene tramite un certo numero di passaggi e di codici. Quanto più è complesso il tuo sito internet multilingue, tanto più è probabile che si commettano passi falsi durante l’implementazione dei tag, nonostante si sia a conoscenza delle probabili fonti di errore. Per questo motivo è consigliabile utilizzare alcuni strumenti per l’implementazione dei tag, al fine di poter controllare a intervalli regolari il funzionamento di tutti gli attributi. Di seguito, una lista di alcuni strumenti interessanti:

• Generatore hreflang di SISTRIX: grazie al generatore gratuito di tag hreflang ideato da SISTRIX potrai integrare facilmente gli elementi link con attributo hreflang per l’intestazione HTML dei tuoi contenuti multilingue. Per fare questo, è sufficiente inserire gli URL pertinenti e le abbreviazioni di paese e lingua desiderate. Successivamente per generare il codice basta cliccare sul pulsante apposito. È anche possibile stabilire una pagina predefinita.
• Verifica dei tag hreflang di SISTRIX: dopo aver implementato gli attributi per le differenti versioni linguistiche del tuo progetto web, potrai utilizzare il validatore di hreflang offerto da SISTRIX. Questo servizio online gratuito verifica se nell’URL indicato i tag hreflang sono stati implementati correttamente.
• flang: con flang, la società di marketing Dejan SEO ti offre una possibilità gratuita per la verifica dei tag hreflang. Dopo un breve tempo di attesa riceverai le lingue e le regioni di destinazione definite per tutte le alternative inserite e, in caso di problemi, ti verranno forniti anche dei suggerimenti per l’ottimizzazione dell’URL desiderato.
• Google Search Console: l’iscrizione a Google non solo facilita la comprensione del tuo sito da parte del motore di ricerca, ma ti consente anche di accedere a diversi strumenti di analisi per ottimizzare il tuo progetto web. Tramite l’opzione relativa alle versioni linguistiche, la dashboard fornisce anche informazioni sui tag hreflang utilizzati, incluso un elenco di backlink mancanti.
• Hreflang Checker: con questo strumento è possibile ottenere gli attributi hreflang di un URL inserito, presentati in modo rapido e chiaro. Viene indicata anche la fonte da cui sono stati presi gli attributi hreflang (HTML, HTTP, ecc.) e si ottengono dei suggerimenti su come migliorare gli attributi hreflang implementati.