Seleziona una pagina

TAG HREFLANG

Cos'è e come implementarlo sul tuo sito

Il tag hreflang è un codice HTML utile ai motori di ricerca per capire che un determinato sito ha contenuti in più lingue.

Nonostante Google sia in grado di riconoscere la presenza di tali pagine, consiglia comunque di intervenire, in modo da permettergli di indirizzare più facilmente gli utenti al contenuto più adatto.

Se hai un sito web in più lingue o stai pensando di crearlo, è importante che tu capisca, come è strutturato e quanto sia importante, il tag hreflang.

Dopo aver letto questo articolo, avrai tutte le risposte ai tuoi dubbi e saprai come implementarlo in autonomia.

Cominciamo!

Sapevi che il Tag Hreflang è un attributo utilizzato dai professionisti SEO
SCOPRI LA CERTIFICAZIONE SEO SPECIALIST!

Che cos’è il Tag Hreflang

Come anticipato precedentemente, il tag hreflang o markup hreflang è un attributo HTML, ovvero un pezzo di codice che può essere utilizzato su tutti i siti web (e-commerce e non) con target in diversi paesi.

Per capire nella pratica come funziona, ti riporto un esempio.

Inserendo nella barra di ricerca di Google, la keyword Digital Coach, ci verrà mostrato questo risultato in SERP:

Esempio in Italiano risultato della ricerca Digital-Coach per tag hreflang

Per quale motivo?
Il motore di ricerca ha identificato che mi trovo in Italia e di conseguenza mi riporta i contenuti di Digital Coach in lingua italiana.

Se mi trovassi in Spagna, ed effettuassi la stessa ricerca, quale risultato mi verrà mostrato?
Come avrai intuito, ci appariranno i contenuti di Digital Coach in lingua spagnola.

Esempio in spagnolo risultato della ricerca Digital-Coach per tag hreflang

Grazie all’implementazione del tag hreflang, il motore di ricerca fa apparire un determinato contenuto rispetto a un altro, in base alla lingua e all’area geografica in cui si trova l’utente.

Sappi però che questo tag è un’indicazione e non è vincolante. È un segnale che i motori di ricerca potrebbero non rispettare.
Può capitare infatti, che alcuni fattori SEO la scavalchino e di conseguenza l’utente visualizzerà una pagina differente da quella indicata nel tag.

Attenzione! Il tag hreflang viene utilizzato solo da alcuni motori di ricerca tra cui Google e Yandex. Baidu e Bing utilizzano l’attributo HTML content-language.

Quando deve essere utilizzato

Immagine motore di ricerca GoogleIl tag hreflang viene usato se il sito ha contenuti o versioni in più lingue.

Aiuta il crawler di Google a capire che è presente una relazione tra queste pagine e fa sì che i contenuti tradotti, completamente o in parte, non vengano identificati come contenuti duplicati.

Il problema dei contenuti duplicati si realizza quando si hanno più pagine indirizzate a persone che si trovano in diverse aree geografiche ma che parlano la stessa lingua.

Caso più comune: l’inglese americano per gli Stati Uniti e l’inglese britannico per l’Inghilterra, infatti il contenuto per questi utenti è pressoché identico, se non per alcune varianti lessicali e la valuta (l’hreflang è utile anche per le restrizioni di mercato).

Quali sono i suoi vantaggi

Mostrare agli utenti di Google i contenuti nella lingua corretta, migliora la User Experience (UX) e ha un effetto positivo sulla SEO.

L’utente, trovandosi in SERP un contenuto nella sua lingua, sarà più propenso a selezionarlo rispetto a un altro che è in un idioma diverso dal suo.

Il tag hreflang influisce positivamente sulla SEO per i seguenti motivi:

  • Riduce la frequenza di rimbalzo
  • Aumenta il tempo di permanenza dell’utente
  • Aumenta il CTR (Click through rate)
  • Evita che il nostro sito venga considerato di bassa qualità a causa della questione dei contenuti duplicati
  • Le pagine collegate condividono i segnali di ranking.

Che dire, sono tutti motivi validi per implementare il Tag Hreflang.

Com’è impostato un Tag Hreflang

La sintassi del tag hreflang si presenta nel seguente modo:

<link rel=”alternate” hreflang=”x” href=”URL” />

Spiegazione:

  • link rel=”alternate”: esiste una versione alternativa della pagina.
  • hreflang=”x”: la pagina alternativa è in lingua “x”.
  • href=”URL”: la versione alternativa ha questo “URL”

Come costruirlo

Bisogna tenere a portata di mano:

Prendendo come esempio il sito di Digital Coach, troveremo nella <head> questi codici html:

Versione inglese: <link rel=”alternate” hreflang=”en” href=”https://www.digital-coach.com/” />

Versione italiana: <link rel=”alternate” hreflang=”it” href=”https://www.digital-coach.com/it/” />

Versione spagnola: <link rel=”alternate” hreflang=”es” href=”https://www.digital-coach.com/es/” />

Quindi, per costruire un tag hreflang funzionante bisogna compilare il codice in questo modo:

  • hreflang=”x”: indicare tra le virgolette il codice lingua ISO 639-1 (nel nostro esempio en= inglese, it= italiano e es= spagnolo)
  • href=”URL”: indicare tra le virgolette l’indirizzo URL della pagina tradotta (nel nostro caso https://www.digital-coach.com, https://www.digital-coach.com/it/ e https://www.digital-coach.com/es/).

Codici lingua e aree geografiche

Per i contenuti indirizzati a utenti che si trovano in una determinata area geografica, la differenza la troviamo in questa parte della sintassi: hreflang=”lingua-paese”.

Esempio:

Sito in inglese (en) per gli utenti negli Stati Uniti (us): <link rel=”alternate” hreflang=”en-us” href=”https://www.esempio.com/us/” />

Sito in francese (fr) per gli utenti in Belgio (be): <link rel=”alternate” hreflang=”fr-be” href=”https://www.esempio.com/be/” />

Il codice lingua è obbligatorio, mentre il codice Paese è facoltativo.

Vuoi migliorare il posizionamento dei tuoi contenuti sui motori di ricerca?
Diventa un esperto SEO!
SCOPRI I NOSTRI CORSI!

Particolarità dell’attributo Hreflang

Per funzionare, il tag hreflang deve rispettare due importanti aspetti, deve essere: bidirezionale e autoreferenziale.

Tag bidirezionale

È necessario inserire un tag hreflang nella pagina principale (originale) che rimandi verso la pagina tradotta, e viceversa.
Questi due attributi mettono in relazione le due pagine e dimostrano ai motori di ricerca che sono entrambi contenuti del tuo sito e che tra di loro c’è un collegamento.

Per spiegarti meglio:
se decidessimo di inserire un tag, a una contenuto in inglese indirizzato a una pagina in lingua italiana, quest’ultima deve riportare all’interno del suo codice, il tag hreflang che fa riferimento alla pagina in inglese.

Questa regola è importantissima ed è stata inserita per tutelare i proprietari dei vari siti.
Pensa se questo principio non esistesse, ogni soggetto terzo potrebbe nominarsi versione alternativa di pagine senza tag e non di sua proprietà.

Quindi fai attenzione e ricorda sempre che devi mettere in relazione le due pagine, altrimenti Google ignorerà l’attributo.

Tag autoreferenziale

Come dice il nome stesso, si tratta di implementare un tag hreflang indirizzato a se stesso.
Google ha affermato che è un tag facoltativo, ma è altamente consigliato il suo utilizzo.

Quindi, prendendo l’esempio di due pagine (una in inglese e una in italiano) per far in modo che i due principi vengano rispettati, è necessario che in entrambe le pagine ci siano questi attributi:

<link rel=”alternate” hreflang=”it” href=”https://esempio.com/it/” />
<link rel=”alternate” hreflang=”en” href=”https://esempio.com/” />

Vuoi sapere se la professione del SEO Specialist è in linea con le tue attitudini
Scoprilo con questo test!
test seo specialist

Cos’è il Tag x-default, quando e perché implementarlo

È un tag hreflang che al posto del codice lingua e regione, riporta la dicitura x-default.

<link rel=”alternate” hreflang=”x-default” href=”https://www.esempio.com/” />

Il motore di ricerca riceve l’input di mostrare una determinata pagina (URL indicato nel tag), qualora fra le nostre opzioni non sia presente la variante corrispondente alla lingua e all’area geografica dell’utente.

Questo tag è stato realizzato per quelle pagine dove si ha la possibilità di scegliere l’idioma che si preferisce.
Nessuno vieta però, di implementarlo qualora si voglia indirizzare gli utenti in una pagina specifica.

Ricapitolando:
Il tag hreflang x-default comunica che sul sito è presente una pagina predefinita o di fallback, da mostrare agli utenti qualora non avessimo creato contenuti nella loro lingua.

3 metodi per implementare il Tag Hreflang

Implementare dei tag in htmlIl Tag hreflang è un attributo che può essere implementato in completa autonomia tramite questi 3 metodi:

  1. Tag HTML
  2. Header HTTP
  3. Sitemap XML

Vediamo nella pratica come si fa!

1. Tag HTML

Questo metodo è sicuramente il modo più veloce e semplice per implementare un tag hreflang.

Segui questa guida passo passo per non sbagliare:

  1. Crea l’attributo hreflang per ogni versione della tua pagina (sintassi da utilizzare: <link rel=”alternate” hreflang=”x” href=”URL” />)
  2. Posizionati nell’intestazione della pagina (<head>)
  3. Copia e incolla i tag hreflang creati, ricordando di inserire anche il tag x-default (l’ordine non è importante)
  4. Ricorda di fare lo stesso passaggio per le altre pagine, in modo da rispettare la regola del tag bidirezionale e autoreferenziale.

Prendendo come esempio, il sito di Digital Coach, troviamo nella <head> di tutte le pagine principali questi codici:

<link rel=”alternate” hreflang=”en” href=”https://www.digital-coach.com”>
<link rel=”alternate” hreflang=”it” href=”https://www.digital-coach.com/it/”>
<link rel=”alternate” hreflang=”es” href=”https://www.digital-coach.com/es/”>
<link rel=”alternate” hreflang=”x-default” href=”https://www.digital-coach.com”>

Pro e Contro di questo metodo

Finché il numero delle pagine si aggira a tre idiomi è semplice da gestire, ma quando iniziano a essere più di cinque/dieci (non esiste limite al numero di tag hreflang che si possono implementare), questo metodo può confondere e consumare molto tempo.

Infatti, se in futuro, decidessimo di creare una nuova versione di Digital Coach in tedesco, questo comporterebbe il dover ritoccare nuovamente il codice HTML della pagina principale per inserire il nuovo tag e così via per ogni contenuto tradotto.

2. Header HTTP

Se la tua pagina ha un contenuto non HTML, come ad esempio il PDF, il primo metodo di implementazione del tag hreflang non può essere utilizzato.
In questi casi specifici bisognerà inserire il tag nell’intestazione HTTP.

La sintassi è la seguente:

Link: <URL1>; rel=”alternate”; hreflang=”x-default“,
<URL1>; rel=”alternate”; hreflang=”x1“,
<URL2>; rel=”alternate”; hreflang=”x2“…

Prendendo come esempio delle versioni in inglese, italiano e spagnolo, questi sono i codici che dovranno apparire nell’header HTTP

HTTP/1.1 200 OK
Content-Type: application/pdf
Link: <https://esempio.com/file.pdf>; rel=”alternate”;hreflang=”x-default”,
<https://esempio.com/file.pdf>; rel=”alternate”;hreflang=”en”,
<https://esempio.com/it/file.pdf>; rel=”alternate”;hreflang=”it”,
<https://esempio.com/es/file.pdf>; rel=”alternate”;hreflang=”es”

3. Sitemap XML

La sitemap, oltre a contenere tutti gli URL di un sito, può essere utilizzato per mettere a conoscenza i motori di ricerca della presenza di una pagina e delle sue varianti.

Per implementare correttamente il tag hreflang sono necessari questi due elementi<loc> e <xhtml:link>.

La sintassi per ogni URL si presenterà in questo modo:

<URL>
<loc>URL1</loc>
<xhtml:link rel=”alternate” hreflang=”x-default” href=”URL1” />
<xhtml:link rel=”alternate” hreflang=”x” href=”URL1” />
<xhtml:link rel=”alternate” hreflang=”x” href=”URL2” />
<xhtml:link rel=”alternate” hreflang=”x” hreflang=”URL3” />
</URL>

Prendendo come esempio, il sito di Digital Coach, il codice si presenterà nel seguente modo:

<URL>
<loc>https://www.digital-coach.com/</loc>
<xhtml:link rel=”alternate” hreflang=”x-default” href=”https://www.digital-coach.com” />
<xhtml:link rel=”alternate” hreflang=”en” href=”https://www.digital-coach.com” />
<xhtml:link rel=”alternate” hreflang=”it” href=”https://www.digital-coach.com/it/” />
<xhtml:link rel=”alternate” hreflang=”es” hreflang=”es” href=”https://www.digital-coach.com/es/” />
</URL>
<URL>
<loc>https://www.digital-coach.com/it/</loc>
<xhtml:link rel=”alternate” hreflang=”x-default” href=”https://www.digital-coach.com” />
<xhtml:link rel=”alternate” hreflang=”en” href=”https://www.digital-coach.com” />
<xhtml:link rel=”alternate” hreflang=”it” href=”https://www.digital-coach.com/it/” />
<xhtml:link rel=”alternate” hreflang=”es” hreflang=”es” href=”https://www.digital-coach.com/es/” />
</URL>
<URL>
<loc>https://www.digital-coach.com/es/</loc>
<xhtml:link rel=”alternate” hreflang=”x-default” href=”https://www.digital-coach.com” />
<xhtml:link rel=”alternate” hreflang=”en” href=”https://www.digital-coach.com” />
<xhtml:link rel=”alternate” hreflang=”it” href=”https://www.digital-coach.com/it/” />
<xhtml:link rel=”alternate” hreflang=”es” hreflang=”es” href=”https://www.digital-coach.com/es/” />
</URL>

Pro e Contro di questo metodo

È consigliato l’utilizzo di questo metodo se la quantità delle versioni non è gestibile tramite il primo procedimento.
Nonostante sia poco efficiente, questo metodo prevede di non modificare più volte il codice HTML delle pagine ogni volta che si presenta una variante, ma sarà necessario inserirlo una volta sola e fornirlo ai motori di ricerca.

Scarica GRATIS l’E-book e scopri la professione del SEO Specialist!
ebook guida seo specialist

"*" indica i campi obbligatori

Hidden
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.


Errori frequenti nell’utilizzo del Tag Hreflang

errori nel tag hreflangCome abbiamo visto, l’implementazione del tag hreflang è di per sé molto semplice, ma allo stesso tempo può diventare velocemente molto complicato, soprattutto nel momento in cui si gestiscono diverse varianti (esempio: marchi multinazionali).
Trattandosi di un meccanismo non automatizzato, ma manuale, spesso possono sfuggire degli errori.

Gli errori più comuni sono:

  • Assenza dei tag autoreferenziali
  • Assenza dei tag bidirezionali
  • Codici lingua e Paese sbagliati
  • Una pagina associata per più lingue e viceversa
  • URL incompleti o errati nell’annotazione hreflang
  • Incongruenze con URL senza il tag canonical
  • Mancanza del tag hreflang x-default

Esistono tools che funzionano come i crawler dei motori di ricerca, scansionano le pagine per verificare che i tag operino nel modo corretto e qualora riscontrassero degli errori, questi ci verranno segnalati e saranno da risolvere.

1 – Assenza dei tag autoreferenziali

Spesso capita che focalizzandosi sulle diverse versioni, ci si dimentichi di inserire il tag autoreferenziale.
Per risolvere questo problema è necessario analizzare le pagine di riferimento, e se mancante, inserire il tag hreflang che dichiari la lingua e la regione della pagina corrente.

2 – Assenza dei tag bidirezionali

Ricordiamo che se sono presenti due pagine, ad esempio una in lingua inglese (A) e una in lingua italiana (B), nella prima pagina deve essere implementato l’attributo che punta verso la seconda (A verso B) e nella seconda il tag che punta verso la prima (B verso A).

Verifica che il tag hreflang sia stato inserito nel modo corretto e dove manca implementalo.

3 – Codici lingua e Paese sbagliati

Spesso capita che al posto del codice lingua (obbligatorio) venga inserito nel tag hreflang il codice Paese (facoltativo).

Un errore che porta Google a ignorare il codice, come se non fosse stato implementato.

Ricorda che il codice regione, fa riferimento agli utenti che si trovano in un determinato Paese, indicare Unione Europea (hreflang=”en-eu“) non è un’opzione accettata dai motori di ricerca. Può essere scontato ma con questo errore si sono registrati più di 500 casi.

Quindi, verifica più volte di aver utilizzato l’elenco e il codice corretto: ISO 639–1 (obbligatorio) e ISO 3166-1 Alpha 2 (facoltativo)

4 – Una pagina associata per più lingue e viceversa

Bisogna fare attenzione anche a non implementare più codici lingua (o lingua-paese) verso un solo URL

Esempio:

<link rel=”alternate” hreflang=”en” href=”http://example.com/” />
<link rel=”alternate” hreflang=”it” href=”http://example.com/” />

e più URL verso una sola lingua.

Esempio:

<link rel=”alternate” hreflang=”en” href=”http://example.com/” />
<link rel=”alternate” hreflang=”en” href=”http://example.com/it” />

Per risolvere il problema, verifica le pagine interessate e rimuovi il markup inserito erroneamente.

5 – URL incompleti o errati nell’annotazione Hreflang

Un altro errore comune è indicare nel tag, URL rotti che fanno riferimento a contenuti inesistenti o rimossi.

I motori di ricerca, sapendo a priori che la pagina indicata non è funzionante, ignoreranno il tag e mostreranno all’utente un contenuto in una versione differente.

6 – Incongruenze con URL senza il Tag Canonical

Il tag canonical è un attributo che mette a conoscenza i motori di ricerca relativamente alla versione ufficiale di una pagina web.

In una situazione di incertezza, tramite questo attributo, comunichiamo a Google che deve mostrare all’utente quel determinato contenuto rispetto ad altri, in quanto da nostre indicazioni, risulta essere la pagina principale.

Il problema sorge nel momento in cui, in una pagina, sono presenti sia il tag hreflang e sia il tag canonical.
In questi casi bisogna fare molta attenzione perché questi due tag (insieme) confondono e creano equivoci ai motori di ricerca.

Verifica che i tag hreflang siano diretti verso URL canonici o, in caso contrario puoi scegliere di eliminare il canonical in modo che l’hreflang funzioni.

7 – Mancanza del Tag Hreflang x-default

Abbiamo visto che il tag x-default è facoltativo, ma altamente consigliato da Google.
Verifica che in tutte le pagine sia inserito l’attributo e qualora fosse mancante, aggiungilo.

Sei già un esperto SEO e stai pensando di guadagnare come libero professionista?
Partecipa al Webinar Gratuito e scopri da dove cominciare!
webinar freelance digitale

Accorgimenti da tenere a mente

Ti elenco ora alcune best practices da tenere in considerazione, in modo da offrire una User Experience migliore e per poter ottimizzare lato SEO le tue pagine.

Reindirizzamento degli utenti

reindirizzare gli utenti con il tag hreflangI motori di ricerca a seconda di alcuni fattori sono in grado di reindirizzare gli utenti, nelle pagine che ritiene più adatte a loro per lingua, regione e interessi.

Manipolare manualmente il proprio sito, in modo da indirizzare le persone in maniera automatica sulle pagine che vogliamo, è un’azione che potrebbe essere penalizzata da Google. Può capitare, che attuando questa modifica, si sbagli qualcosa e di conseguenza, allo spider e all’utente potrebbero essere mostrati contenuti diversi (cloaking).

Per evitare di fare danni, consigliamo semplicemente di inserire un piccolo banner che consenta all’utente di selezionare la lingua di suo interesse.

Motori di ricerca e dichiarazioni multiple

Utilizza solo un metodo per implementare il tag hreflang.
Utilizzarli tutti e tre confonderà il crawler che potrebbe fraintendere le indicazioni che gli hai dato.

Tag Hreflang su WordPress

Non mi sorprenderebbe sapere che stai cercando un software che ti aiuti a implementare il tag hreflang sul tuo sito WordPress, ma sappi che i plugin sono in continuo aggiornamento e ciò che potrebbe andar bene ora non sempre andrà bene in futuro.

Tieni sempre aggiornato il sito e i vari software all’ultima versione possibile e qualora fosse necessario, sostituisci i plugin precedentemente installati con altri.

I software che si occupano del tag hreflang danno anche la possibilità di tradurre il sito in diverse lingue e sono:

Purtroppo, ad oggi non è presente la traduzione in lingua italiana di questi due plugin, ma sono i più installati e con più recensioni positive.

Tools Utili

Ahrefs: Site Explorer

Per verificare la corretta implementazione del tag hreflang è possibile utilizzare la sezione Site Explorer di Ahrefs.

Inserendo l’URL del sito che vogliamo analizzare, abbiamo la possibilità di avere innumerevoli informazioni: tra cui i paesi raggiunti e la quantità di traffico.

primo tool paesi raggiunti con il tag hreflang

Prendiamo come esempio un contenuto che abbiamo tradotto in francese.
Inseriamo il dominio della pagina nella barra del Site Explorer e avviamo la ricerca.

Per capire se un tag hreflang funziona, basta andare nella sezione “Ricerca Organica” e verificare l’elenco dei paesi raggiunti.
Se il primo paese che troviamo è la Francia, il tool ci sta dando segno che l’attributo è stato inserito correttamente.
Un ulteriore conferma lo abbiamo quando in elenco troviamo: Belgio, Lussemburgo e altri paesi in cui si parla il francese.

Il problema si presenta nel momento in cui, come primo Paese, appare l’Italia.
In questi casi è necessario effettuare un controllo e capire perché la pagina viene visualizzata dagli utenti sbagliati.
È stato implementato un tag hreflang sbagliato?

Qualunque sia il motivo è importante che il problema si risolvi il prima possibile.

Hreflang Tags Generator di Aleyda Solis

The hreflang Tags Generator Tool è uno strumento in grado di generare tag hreflang in maniera semiautomatica.

Generare tag hreflang per digital coach con hreflang tags generatorTi mostro come funziona!
Devi compilare i campi presenti nella pagina, quindi:

  1. inserire gli URL delle pagine tradotte (puoi anche caricare un file in csv),
  2. selezionare la lingua (obbligatorio) e il paese (facoltativo).

Terminato questo passaggio, devi selezionare se ti serve l’elenco in HTML (primo metodo di implementazione) o un elenco da inserire nella Sitemap XML (terzo metodo).

Cliccando su “Generate the hreflang tags for these URLS” ti compariranno tutti i codici hreflang per le pagine che hai indicato, dovrai copiarli e implementarli o nella <head> o nel file XML (sitemap). Ricorda di creare e implementare anche il tag hreflang x-default.

Merkle: Hreflang Tags Testing

È un tool che fornisce una serie di informazioni e verifica se i tag sono funzionanti rilevandone eventuali errori, possiamo dire che è un hreflang checker.

Accedi all’hreflang Tags Testing, seleziona che metodo hai utilizzato per implementare i tag hreflang nelle tue pagine.
Incolla nella barra, l’URL della pagina che ti interessa analizzare e seleziona un User Agent, dopodiché avvia la ricerca.
In poco tempo ti apparirà l’elenco delle lingue che hai implementato.

Qualora il tag sia stato implementato correttamente, troverai una bella spunta verde, in caso contrario troverai una X rossa e il motivo dell’errore (es. no tag bidirezionale…) che sarà da risolvere.

Errore riscontrato al tag hreflang con tool checker

CONCLUSIONE

Adesso che hai capito l’importanza del tag hreflang per il posizionamento (SEO) e la User Experience, non ti resta che implementarlo in autonomia. Tieni sempre a mente le best practices e gli errori che potresti commettere durante l’inserimento del tag e fidati che non sbaglierai.

Vuoi aumentare il traffico e la visibilità del tuo sito web? 
Richiedi subito una CONSULENZA STRATEGICA è gratuita!
RICHIEDI UNA CONSULENZA STRATEGICA GRATUITA