hreflang: l’attributo HTML per siti web mul­ti­lin­gue

Se desideri dare un tocco più in­ter­na­zio­na­le al tuo sito web e proporre i contenuti in diverse lingue, ti ritrovi a dover af­fron­ta­re diversi compiti, tra cui l’ot­ti­miz­za­zio­ne per i motori di ricerca delle diverse versioni lin­gui­sti­che. Infatti, è solo sulla base di misure SEO spe­ci­fi­che per lingua e paese che i crawler dei motori di ricerca riescono a clas­si­fi­ca­re cor­ret­ta­men­te le diverse versioni lin­gui­sti­che di un sito web e mostrarle così al pubblico cor­ri­spon­den­te. Uno degli strumenti più efficaci a di­spo­si­zio­ne dei SEO a questo scopo è l’attributo hreflang.

Che cos’è hreflang?

A dicembre 2011 Google ha pre­sen­ta­to 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 ap­pli­ca­zio­ni di ricerca che il contenuto del sito in questione è di­spo­ni­bi­le in lingue diverse. A questo scopo il tag hreflang viene inserito all’interno di un elemento link nel documento HTML, insieme all’ab­bre­via­zio­ne della lingua di­spo­ni­bi­le per il sito internet. Se, ad esempio, si desidera mostrare agli utenti una pagina in spagnolo, bisogna im­ple­men­ta­re questo elemento con l’ab­bre­via­zio­ne 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 au­to­ma­ti­ca­men­te rimandati alla pagina equi­va­len­te in spagnolo.

L’attributo hreflang può essere anche uti­liz­za­to per con­tras­se­gna­re le varianti di una stessa lingua. In questo caso viene ampliato sem­pli­ce­men­te indicando la regione di de­sti­na­zio­ne. Prendiamo ancora una volta l’esempio della già citata pagina in spagnolo: si potrebbe pensare di di­stin­gue­re la pagina uti­liz­za­ta dagli utenti in Spagna (“hreflang=“es-ES”) dalla variante mostrata agli utenti in Messico (“hreflang=“es-MX”). Tutte le possibili ab­bre­via­zio­ni relative a paesi e lingue sono definite negli standard ISO 639 e ISO 3166.

Perché il tag hreflang è im­por­tan­te per la SEO?

La ragione prin­ci­pa­le dell’uso di attributi come canonical o hreflang è quella di evitare contenuti duplicati nei progetti web mul­ti­lin­gue. Spesso si devono servire mercati diversi senza che il contenuto, esclu­den­do la tra­du­zio­ne, sia fon­da­men­tal­men­te diverso. Per i paesi in cui si parla la stessa lingua, la si­tua­zio­ne è ancora più com­pli­ca­ta: ad alcune poche modifiche dovute a dif­fe­ren­ze culturali o regionali (vo­ca­bo­la­rio, valuta, in­for­ma­zio­ni di contatto, ecc.) si con­trap­pon­go­no contenuti quasi identici. Poiché di solito viene uti­liz­za­to lo stesso dominio, è molto im­por­tan­te inviare segnali chiari ai motori di ricerca per evitare va­lu­ta­zio­ni negative.

Mentre l’attributo canonical dichiara che un URL è la variante dominante ed esclude tutte le versioni al­ter­na­ti­ve dall’in­di­ciz­za­zio­ne, il tag hreflang segnala quale versione deve essere pre­sen­ta­ta 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 in­ter­na­zio­na­le con il proprio sito web e fornire i relativi contenuti mul­ti­lin­gue. Anche se l’attributo non ha un’influenza diretta sul po­si­zio­na­men­to 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’è strut­tu­ra­to 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 cor­ri­spon­den­ti. Può essere usato solo nella sezione “head”, ma senza li­mi­ta­zio­ni, quindi tutte le volte che serve. Per collegare più versioni lin­gui­sti­che di una stessa pagina con hreflang, è ne­ces­sa­rio ag­giun­ge­re i due attributi rel e href. Questi tre com­po­nen­ti 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 al­ter­na­ti­va di quel de­ter­mi­na­to sito web.
• hreflang: questo attributo descrive in quale lingua è redatto il documento collegato; inoltre, può anche indicare per quale paese la pagina è par­ti­co­lar­men­te rilevante. Un elenco chiaro di tutte le possibili com­bi­na­zio­ni è di­spo­ni­bi­le su lingoes.net.
• href: l’attributo href indica l’URL della versione lin­gui­sti­ca al­ter­na­ti­va.

Il seguente esempio di hreflang serve a il­lu­stra­re 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 lin­gui­sti­ca ap­pro­pria­ta, è il po­si­zio­na­men­to a decidere quale delle varianti lin­gui­sti­che viene vi­sua­liz­za­ta. Di con­se­guen­za, potresti perdere po­ten­zia­li lettori già dopo pochi secondi perché si trovano sulla versione lin­gui­sti­ca sbagliata. Tuttavia, Google fornisce un’opzione con "x-default" che può essere uti­liz­za­ta per evitare questa si­tua­zio­ne. Questo elemento segnala al motore di ricerca che l’URL collegato è la soluzione pre­de­fi­ni­ta per tutti gli utenti per i quali non esiste una versione lin­gui­sti­ca specifica. Un esempio:

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

Come im­ple­men­ta­re hreflang?

Il tag link hreflang può essere im­ple­men­ta­to in tre modi: il modo più comune è in­clu­der­lo nella sezione head del ri­spet­ti­vo documento HTML. Per i documenti che non sono in formato HTML (ad esempio un file PDF), l’elemento può essere uti­liz­za­to in al­ter­na­ti­va nell’header HTTP. Infine, c’è anche la pos­si­bi­li­tà di includere l’attributo specifico della lingua o del paese nella sitemap.

L’in­te­gra­zio­ne nell’header HTTP funziona in linea di principio allo stesso modo, poiché tutte le versioni lin­gui­sti­che esistenti devono essere re­fe­ren­zia­te anche lì. Ci sono solo alcune piccole dif­fe­ren­ze nella sintassi:

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

Se desideri rea­liz­za­re un progetto web in­ter­na­zio­na­le, l’im­ple­men­ta­zio­ne degli attributi hreflang in una sitemap XML è un’utile al­ter­na­ti­va all’in­se­ri­men­to del tag in ogni singola pagina. Infatti, se offri contenuti mul­ti­lin­gue su larga scala, l’impegno ne­ces­sa­rio per la consueta im­ple­men­ta­zio­ne HTML è re­la­ti­va­men­te alto. Anche in una sitemap tutte le versioni lin­gui­sti­che devono essere elencate sin­go­lar­men­te spe­ci­fi­can­do il ri­spet­ti­vo URL. Ogni URL è anche spe­ci­fi­ca­to da un elemento xhtml: link che fa ri­fe­ri­men­to alle altre varianti di­spo­ni­bi­li:

<?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>

È ne­ces­sa­rio ripetere il tag <url> allo stesso modo per ogni versione lin­gui­sti­ca dell’articolo.

Una proprietà dell’attributo è di fon­da­men­ta­le im­por­tan­za per capire come funziona hreflang: infatti, il tag collega due o più documenti in modo bi­di­re­zio­na­le e non uni­di­re­zio­na­le, come nel caso di un rein­di­riz­za­men­to. Non è quindi suf­fi­cien­te che il sito web in lingua tedesca contenga un col­le­ga­men­to hreflang alla versione in lingua spagnola, che però non rimanda alla pagina in lingua tedesca. Solo se l’an­no­ta­zio­ne HTML hreflang è impostata in tutti i documenti in tutte le direzioni di­spo­ni­bi­li (versioni lin­gui­sti­che), il motore di ricerca può ri­co­no­sce­re la struttura del tuo progetto web e adattare di con­se­guen­za i risultati per chi effettua la ricerca.

Il seguente esempio di codice hreflang per il sito web esempiodominio.it con le versioni lin­gui­sti­che in italiano, tedesco, spagnolo e inglese dovrebbe quindi essere inserito nell’in­te­sta­zio­ne 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’im­ple­men­ta­zio­ne del tag hreflang

Gli esempi di hreflang per HTML riportati qui di­mo­stra­no che non è com­pli­ca­to im­ple­men­ta­re e assegnare au­to­ma­ti­ca­men­te gli utenti alle pagine web nelle diverse lingue. Tuttavia, bisogna avere una certa at­ten­zio­ne nell’ef­fet­tua­re tutti i passaggi cor­ret­ta­men­te, indicando tutti i ri­fe­ri­men­ti giusti: non va sot­to­va­lu­ta­ta la pos­si­bi­li­tà di fare errori. Infatti, talvolta può succedere di sbagliare e causare problemi di minore o maggiore entità, alcuni dei quali ri­guar­da­no solo singole pagine, ma altri, di contro, mettono a re­pen­ta­glio la fun­zio­na­li­tà di hreflang per l’intero progetto web. Per questo motivo abbiamo riassunto alcune delle fonti di errore più comuni nei paragrafi seguenti.

hreflang non im­ple­men­ta­to a livello di URL

Poiché il tag hreflang è sempre collegato a un URL specifico, deve essere sempre im­ple­men­ta­to a questo livello. In altre parole: se viene eti­chet­ta­to esclu­si­va­men­te l’URL di partenza delle diverse versioni lin­gui­sti­che, il tag au­to­ma­ti­co si applica solo a queste pagine iniziali e non all’intero progetto web. Spetta quindi a te im­ple­men­ta­re sin­go­lar­men­te l’elemento link per tutte le pagine mul­ti­lin­gue o URL o, in al­ter­na­ti­va, lavorare con la variante della sitemap citata nei paragrafi pre­ce­den­ti.

Una o più versioni lin­gui­sti­che mancano di au­to­re­fe­ren­za

Molto spesso, chi gestisce un sito web con­tras­se­gna gli URL delle versioni lin­gui­sti­che con l’attributo hreflang, ma dimentica che la pagina cor­ri­spon­den­te deve anche fare ri­fe­ri­men­to a sé stessa. In questo caso, la struttura di col­le­ga­men­to è in­com­ple­ta e non può essere con­si­de­ra­ta né da Google, né da altri motori di ricerca.

Si dovrebbe anche spe­ci­fi­ca­re una pagina pre­de­fi­ni­ta usando hreflang x-default, al­tri­men­ti si la­sce­reb­be inu­ti­liz­za­to un certo po­ten­zia­le di ot­ti­miz­za­zio­ne.

Codici ISO errati

Nell’immettere i codici ISO relativi alle ab­bre­via­zio­ni nazionali e lin­gui­sti­che, molti SEO tendono a non seguire alla lettera il pro­to­col­lo giusto, causando spesso la tra­scri­zio­ne di un codice hreflang non corretto. Ad esempio, se il contenuto della pagina è espli­ci­ta­men­te rivolto al pubblico bri­tan­ni­co, la com­bi­na­zio­ne "en-uk" potrebbe, a prima vista, sembrare una scelta ap­pro­pria­ta, ma il col­le­ga­men­to giusto è in realtà "en-gb". Verifica sempre le ab­bre­via­zio­ni dei paesi che utilizzi in base allo standard ISO 639-1.

Ri­fe­ri­men­to a URL obsoleti o ine­si­sten­ti

Uno dei prin­ci­pa­li motivi di errore riguardo all’uso del tag hreflang è l’utilizzo di URL che non esistono più. Ciò capita quando i tag vengono au­to­ma­ti­ca­men­te im­ple­men­ta­ti in tutte le sot­to­pa­gi­ne, ma non sono tutte di­spo­ni­bi­li 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.

Im­ple­men­ta­zio­ne di­scor­dan­te del tag canonical e hreflang

In molti siti in­ter­na­zio­na­li si ricorre al tag canonical in modo da evitare che i crawler dei motori di ricerca in­di­ciz­zi­no le pagine con contenuti uguali o simili. Questo modo di agire è si­cu­ra­men­te un’opzione valida per aggirare la pro­ble­ma­ti­ca 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 in­for­ma­zio­ni con­trad­dit­to­rie e ignorano entrambi i segnali. Pertanto, si dovrebbe uti­liz­za­re il tag hreflang solo per le pagine che non si ri­fe­ri­sco­no a un’altra pagina tramite il tag canonical.

Le im­po­sta­zio­ni nella Google Search Console inviano segnali con­trad­dit­to­ri

Se registri il tuo sito web nella Search Console di Google, puoi definire l’orien­ta­men­to in­ter­na­zio­na­le di un dominio o di un URL, a con­di­zio­ne che vengano uti­liz­za­ti domini generici di primo livello. In ogni caso, Google pensa anche alle esten­sio­ni di dominio spe­ci­fi­che per un de­ter­mi­na­to paese. Non c’è dubbio che tu, in qualità di gestore del sito web, trarrai vantaggio da questa funzione: Google utilizza queste in­for­ma­zio­ni per clas­si­fi­ca­re le pagine in modo ottimale. Quindi vale si­cu­ra­men­te la pena di informare Google sulle versioni lo­ca­liz­za­te del tuo sito.

Tuttavia, non si dovrebbe mai di­men­ti­ca­re di includere queste im­po­sta­zio­ni nelle attività SEO. Con­tras­se­gnan­do anche le pagine con il tag hreflang, non do­vreb­be­ro sorgere con­trad­di­zio­ni. Ad esempio, può succedere ra­pi­da­men­te che una pagina sia con­tras­se­gna­ta con un solo codice lingua e senza spe­ci­fi­che regionali, mentre allo stesso tempo un de­ter­mi­na­to paese è spe­ci­fi­ca­to nella console di Google.

Strumenti utili per il tag hreflang

Come è già stato detto in pre­ce­den­za, l’in­te­gra­zio­ne del tag hreflang nelle pagine HTML rilevanti avviene tramite un certo numero di passaggi e di codici. Quanto più è complesso il tuo sito internet mul­ti­lin­gue, tanto più è probabile che si com­met­ta­no passi falsi durante l’im­ple­men­ta­zio­ne dei tag, no­no­stan­te si sia a co­no­scen­za delle probabili fonti di errore. Per questo motivo è con­si­glia­bi­le uti­liz­za­re alcuni strumenti per l’im­ple­men­ta­zio­ne dei tag, al fine di poter con­trol­la­re a in­ter­val­li regolari il fun­zio­na­men­to di tutti gli attributi. Di seguito, una lista di alcuni strumenti in­te­res­san­ti:

• Ge­ne­ra­to­re hreflang di SISTRIX: grazie al ge­ne­ra­to­re gratuito di tag hreflang ideato da SISTRIX potrai integrare fa­cil­men­te gli elementi link con attributo hreflang per l’in­te­sta­zio­ne HTML dei tuoi contenuti mul­ti­lin­gue. Per fare questo, è suf­fi­cien­te inserire gli URL per­ti­nen­ti e le ab­bre­via­zio­ni di paese e lingua de­si­de­ra­te. Suc­ces­si­va­men­te per generare il codice basta cliccare sul pulsante apposito. È anche possibile stabilire una pagina pre­de­fi­ni­ta.
• Verifica dei tag hreflang di SISTRIX: dopo aver im­ple­men­ta­to gli attributi per le dif­fe­ren­ti versioni lin­gui­sti­che del tuo progetto web, potrai uti­liz­za­re il va­li­da­to­re di hreflang offerto da SISTRIX. Questo servizio online gratuito verifica se nell’URL indicato i tag hreflang sono stati im­ple­men­ta­ti cor­ret­ta­men­te.
• flang: con flang, la società di marketing Dejan SEO ti offre una pos­si­bi­li­tà gratuita per la verifica dei tag hreflang. Dopo un breve tempo di attesa riceverai le lingue e le regioni di de­sti­na­zio­ne definite per tutte le al­ter­na­ti­ve inserite e, in caso di problemi, ti verranno forniti anche dei sug­ge­ri­men­ti per l’ot­ti­miz­za­zio­ne dell’URL de­si­de­ra­to.
• Google Search Console: l’iscri­zio­ne a Google non solo facilita la com­pren­sio­ne del tuo sito da parte del motore di ricerca, ma ti consente anche di accedere a diversi strumenti di analisi per ot­ti­miz­za­re il tuo progetto web. Tramite l’opzione relativa alle versioni lin­gui­sti­che, la dashboard fornisce anche in­for­ma­zio­ni sui tag hreflang uti­liz­za­ti, incluso un elenco di backlink mancanti.
• Hreflang Checker: con questo strumento è possibile ottenere gli attributi hreflang di un URL inserito, pre­sen­ta­ti 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 sug­ge­ri­men­ti su come mi­glio­ra­re gli attributi hreflang im­ple­men­ta­ti.