Hreflang: cos’è e a cosa serve

Hreflang è un tag HTML molto utile per i siti web con contenuti in più lingue. I tag hreflang consentono ai motori di ricerca di visualizzare il contenuto del tuo sito web nella lingua preferita dell’utente, quindi la loro implementazione è importante per migliorare l’esperienza utente e la visibilità del tuo sito web.

In questa guida per principianti, esamineremo i vantaggi dei tag hreflang, mostrandoti come inserirli nel tuo sito web.

Perché i tag hreflang sono importanti per la SEO?

Se desideri raggiungere utenti in più Paesi, i tag hreflang svolgono un ruolo cruciale per l’ottimizzazione dei motori di ricerca (SEO). Questo perché garantiscono che i motori di ricerca visualizzino i contenuti nella lingua corretta, aiutandoti a evitare contenuti duplicati.

Mostra contenuti in più lingue

Se stai pensando di creare un negozio online multilingue che si rivolge a clienti di diversi Paesi, è necessario aggiungere i tag hreflang, poiché i motori di ricerca li utilizzano per determinare in quale lingua deve essere visualizzato il contenuto.

Supponiamo che tu voglia guardare Netflix dalla Spagna. Anche se digiti Netflix.com nel campo di ricerca, è probabile che visualizzerai i contenuti del sito in spagnolo. Ecco come dovrebbero funzionare i tag hreflang se inseriti correttamente.

Lo stesso vale per i contenuti del tuo sito web o negozio online. Se la tua pagina non ha tag hreflang, rischi che i tuoi contenuti tradotti non vengano mostrati agli utenti giusti.

Evita contenuti duplicati 

Il tag hreflang può anche aiutarti a impedire ai motori di ricerca di registrare il contenuto tradotto delle tue pagine come contenuto duplicato. Un contenuto duplicato è identico a quello già esistente su altre pagine. Ciò vale sia per i contenuti identici a quelli del proprio sito web, sia per i contenuti di altri siti web. I contenuti duplicati sono un problema perché portano a un posizionamento inferiore nei risultati di ricerca.

In quest’ottica, i tag hreflang sono importanti perché segnalano ai motori di ricerca che le diverse versioni linguistiche di un contenuto si rivolgono a utenti in più Paesi o regioni. Se, ad esempio, hai scritto la descrizione prodotto di un vaso in ceramica che vendi nel tuo negozio online e hai fatto tradurre la descrizione in svedese, norvegese e finlandese, il tag hreflang impedirà che i tuoi testi quasi identici vengano registrati come contenuti duplicati.

Che aspetto hanno i tag hreflang?

I tag hreflang devono avere una sintassi semplice e uniforme. Una buona comprensione della struttura hreflang è essenziale quando si implementano i tag corretti sul tuo sito web. Di seguito diamo uno sguardo più da vicino a tre esempi specifici di tag hreflang che possono essere utilizzati in diversi contesti.

Hreflang – 3 esempi

1. Supponiamo che tu abbia un blog di viaggi in cui scrivi post sulle tue esperienze in giro per il mondo in italiano, inglese e francese. Hai passato molto tempo a scrivere e tradurre, quindi vuoi essere sicuro che i post del tuo blog vengano visualizzati correttamente nei motori di ricerca. In questo caso, utilizza questi tag hreflang per distinguere le tre diverse versioni:
   
   <link rel=”alternate” href=”https://example.com/it/pagina” hreflang=”it”> 
   <link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”> 
   <link rel=”alternate” href=”https://example.com/fr/page” hreflang=”fr”> 
   
2. Un altro esempio potrebbe essere una clinica dentistica in Spagna, che ha recentemente tradotto i contenuti del suo sito web in portoghese nella speranza di attirare clienti lusitani. Se lo studio dentistico ha pagine anche in inglese, i suoi tag hreflang dovrebbero assomigliare a questo:
   
   <link rel=”alternate” href=”https://example.com/es/pagina” hreflang=”es”> 
   <link rel=”alternate” href=”https://example.com/pt/pagina” hreflang=”pt”> 
   <link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”> 
   
3. Infine, esaminiamo un esempio in cui sono necessari tag diversi per diverse varianti della stessa lingua. Immagina una grande piattaforma di notizie online che scrive articoli in inglese britannico, inglese americano e inglese indiano. Queste varianti dell’inglese hanno i seguenti codici lingua regionali: EN-GB, EN-US ed EN-IN.
   
   I tag hreflang di questa piattaforma di notizie dovrebbero assomigliare a questo:
    
   <link rel=”alternate” href=”https://example.com/en-gb/page” hreflang=”en-gb”> 
   <link rel=”alternate” href=”https://example.com/en-in/page” hreflang=”en-in”> 
   <link rel=”alternate” href=”https://example.com/en-us/page” hreflang=”en-us”> 

Come vengono costruiti i tag hreflang?

Abbiamo appena visto tre esempi di come possono apparire i tag hreflang. Ora ne suddivideremo uno in parti più piccole per evidenziare il significato delle singole componenti.

Diamo un’occhiata a un tag del blog di viaggio dell’esempio nella sezione precedente.

<link rel=”alternate” href=”https://example.com/fr/page” hreflang=”fr”>

link rel=“alternate”: il collegamento in questo tag è una versione alternativa di questa pagina.

hreflang=“fr”:  è alternativo perché il contenuto è scritto in un’altra lingua e quella lingua è il francese.

href=“https://example.com/fr/page”: la pagina alternativa può essere trovata a questo URL.

Codici lingua Hreflang

Quando scrivi i tag hreflang per il tuo sito web o negozio online, puoi utilizzare la stessa sintassi vista negli esempi. L’unica cosa che devi modificare è il codice della lingua, ovvero le due lettere che indicano le lingue in cui è disponibile il contenuto. I codici lingua seguono lo standard ISO 639-1, utilizzato in tutto il mondo.

Ecco un elenco di alcuni di essi:

• Italiano: IT
• Danese: DA
• Svedese: SE
• Norvegese: NO
• Arabo: AR
• Inglese: EN
• Inglese britannico: EN-GB
• Inglese americano: EN-US
• Giapponese: JA

Online puoi trovare facilmente tutti i codici lingua esistenti.

Generatore di tag Hreflang 

Il processo effettivo di creazione dei tag hreflang è abbastanza semplice, ma se è necessario utilizzare tag per diverse lingue e pagine, può diventare molto lungo. Per risparmiare tempo, puoi utilizzare un generatore di tag hreflang come questo.

3 consigli prima di implementare i tag hreflang

Prima di approfondire come inserire i tag hreflang nel tuo sito web, diamo un’occhiata a tre regole pratiche che riducono al minimo il rischio di errore. Sebbene i tag stessi siano abbastanza semplici, possono facilmente verificarsi errori se li inserisci in modo errato.

1. I tag hreflang sono bidirezionali: ciò significa che devono sempre puntare in entrambe le direzioni. Quindi, se il tag sulla tua pagina francese punta a quella inglese, allora il tag sulla pagina inglese dovrà rimandare a quella francese. In questo modo segnali ai motori di ricerca che gestisci entrambe le pagine e che esse sono collegate tra loro.

2. I tag hreflang autoreferenziali sono una buona idea: ciò significa che i tag hreflang non dovrebbero puntare solo ad altre lingue, ma anche a se stessi. Supponiamo che nel tuo sito tu abbia la stessa pagina di categoria in inglese (https://example.com/cat-food) e in italiano (https://example.com/cibo-gatti). Ognuna di queste pagine dovrà avere questi tag hreflang:
    
   <link rel=”alternate” hreflang=”en” href=”https://example.com/cat-food”/> 
   
   <link rel=”alternate” hreflang=”it” href=”https://example.com/cibo-gatti”/> 
    

3. Utilizza i tag x-default per migliorare l’esperienza dell’utente: questo tag è molto utile se hai un sito web con contenuti in italiano, francese e inglese, ma ricevi regolarmente visite, ad esempio, dalla Germania.
    
   In questo caso puoi utilizzare i tag hreflang x-default per assicurarti che i tuoi visitatori di lingua tedesca vengano indirizzati alla pagina inglese, che probabilmente capiranno meglio di quella italiana.
    
   I tag Hreflang x-default offrono quindi agli utenti un’esperienza migliore sul tuo sito web, perché non li fanno atterrare su una pagina con contenuti che non riuscirebbero a comprendere.
   
   Un esempio di questo tag:
   
   <link rel=”alternate” hreflang=”x-default” href=”https://example.com/”/> 

Come vengono implementati i tag hreflang?

Ora che abbiamo visto come appaiono i tag hreflang, diamo un’occhiata a come vengono implementati. Ciò può essere fatto in tre metodi, a seconda del contesto e del tipo di contenuto.

Utilizzando l’HTML 

Il modo più semplice per segnalare ai motori di ricerca che la tua pagina esiste in più lingue è inserire il tag hreflang nel codice HTML di una pagina web. Il tag deve essere inserito all’inizio del codice nell’elemento <head>.

<head>- è un contenitore per metadati e si trova tra il tag <html> e il tag <body>.

Di seguito è riportato un esempio di pagina disponibile in inglese, spagnolo e italiano.

<!DOCTYPE html>  
< >  
<head>  
  <title>Il titolo della tua meravigliosa pagina</title>  

<link rel=”alternate” href=”https://example.com/it/pagina” hreflang=”it”>  

<link rel=”alternate” href=”https://example.com/es/pagina” hreflang=”es”>  

<link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”>  

  
</head>  
<body>  
  
Il contenuto della tua meravigliosa pagina
  
</body>  
</html>  

Ogni volta che traduci una pagina, è necessario aggiungere un nuovo tag hreflang a tutte le versioni della pagina. Ad esempio, se hai già la pagina in italiano, inglese e spagnolo e decidi di tradurla anche in tedesco, il tag hreflang riferito alla Germania dovrà essere inserito nel codice HTML di tutte le pagine. Ciò significa che avrai quattro tag in totale su ogni pagina, perché tutte le versioni devono essere bidirezionali e puntare l’una verso l’altra, oltre che verso se stesse.

Questo metodo può richiedere molto tempo, soprattutto se il tuo sito web ha molte pagine ed è tradotto in tante lingue. In questo caso può essere vantaggioso utilizzare il generatore di hreflang di cui abbiamo parlato sopra.

Utilizzando l’intestazione HTTP

Se hai pagine con contenuti non in formato HTML, puoi vantaggiosamente inserire il tuo tag hreflang nell’intestazione HTTP della pagina. Un esempio di questo tipo di contenuti sono i file PDF.

I codici di intestazione HTTP contengono informazioni sui dati inviati da un server a un client, come la data e la lingua preferita.

Supponiamo che tu abbia lo stesso PDF in tre lingue diverse: inglese, tedesco e italiano. L’intestazione HTTP in ciascuno dei file dovrebbe quindi assomigliare a questa:

HTTP/1.1 200 OK 

Content-Type: application/pdf 

Link: <https://example.com/en/doc.pdf>; rel=”alternate”; hreflang=”en“   

<https://example.com/de/doc.pdf>; rel=”alternate”; hreflang=”de”   

<https://example.com/it/doc.pdf>; rel=”alternate”; hreflang=”it”  

Utilizzando la sitemap XML 

Il terzo metodo che puoi usare per implementare i tag hreflang è inserendoli nella mappa del sito XML della tua pagina. Puoi leggere ulteriori informazioni sulle mappe del sito proprio qui.

In breve, Sitemap XML è un file che fornisce ai motori di ricerca informazioni sulle singole pagine del tuo sito web.

Il vantaggio principale di questo metodo è che puoi modificare tutti i tag hreflang in un unico luogo. Quando utilizzi il metodo HTML e il metodo dell’intestazione HTTP, devi aggiungere un nuovo tag a ogni pagina ogni volta che traduci un contenuto esistente in una nuova lingua. Chiaramente, tutto ciò può richiedere molto tempo.

Se scegli questo metodo invece, aggiungi un elemento <loc> per ciascun URL e inserisci <xhtml:link> per ciascuna delle lingue in cui è disponibile la pagina.

Puoi leggere le istruzioni di Google e vedere un esempio qui.

HTML-lang vs Hreflang 

Anche HTML-lang è un tag che può essere implementato per ottimizzare i siti web con contenuti in più lingue. Tuttavia, esiste una differenza tra i due tag.

La differenza principale è che HTML-lang è un tag inserito nell’HTML per segnalare ai motori di ricerca e agli utenti la lingua dell’intero sito web.

HReflang invia informazioni più dettagliate, specificando le lingue su tutte le singole pagine del tuo sito web. Ciò semplifica la personalizzazione dei contenuti per più paesi e lingue.

Il motore di ricerca di Google non utilizza HTML-lang. Pertanto, raccomanda che i siti web con contenuti in diverse lingue utilizzino il tag hreflang. Tuttavia, Microsoft Bing e alcuni screen reader utilizzano il linguaggio HTML. Può quindi avere senso utilizzarli entrambi se desideri ottimizzare il tuo sito web per più motori di ricerca e screen reader.

Tag hreflang: vitali per i siti web multilingue

Se desideri migliorare l’esperienza utente e aumentare il traffico verso il tuo sito web pubblicando contenuti in più lingue, è fondamentale sapere come creare e implementare i tag hreflang. Un sito web multilingue apre a nuove opportunità e nuovi utenti, che portano a maggiori conversioni. Ci auguriamo che questa guida ti aiuti a iniziare alla grande!