SEO per siti multilingua: guida ai tag hreflang

Difficoltà:    

Ottimizzare un progetto web è già di per sé un compito arduo, ma c’è una particolare tipologia di siti in grado di far rabbrividire qualsiasi SEO: i temutissimi multilingua.

La SEO per siti multilingua è ostica per due motivi: comporta la gestione e il collegamento di più versioni dello stesso sito in parallelo e la documentazione a riguardo è spesso lacunosa o contraddittoria. Le stesse linee guida di Google su questo argomento sono parecchio dispersive e a tratti piene di tecnicismi e giri di parole.
Ecco perché ho ritenuto utile stendere un vademecum degli accorgimenti tecnici da adottare per gestire un sito multilingua senza rischiare l’esaurimento nervoso, basandomi sia sulla mia esperienza personale che sui tutorial più utili e completi trovati qua e là per il web.

Il primo capitolo della guida tratta i tag hreflang.

Cosa sono i tag hreflang

Quando un SEO mette mano ad un sito multilingua, il primissimo aspetto che dovrebbe analizzare è la struttura di tale sito. Per struttura mi riferisco fondamentalmente a due diverse facce della stessa medaglia:

struttura sito multilinguaUser experience: l’utente riesce intuitivamente a cambiare la lingua del sito? Il pulsante per passare da una lingua all’altra è ben visibile su tutte le pagine e i link sono corretti? Se la risposta è no, è il caso di implementare una soluzione semplice ed intuitiva per permettere ai visitatori del sito di passare da una versione all’altra.

SEO tecnica: agli occhi dei crawler, è chiaro quali e quante sono le versioni del sito? Ogni pagina è associata alla sua versione in un’altra lingua?

Per rispondere a quest’ultima domanda (che è quella che ci interessa maggiormente), è necessario verificare la presenza dei tag rel hreflang. Si tratta di una tipologia di tag html che comunica a Google (e Yandex) quale lingua viene usata su una specifica pagina, di modo che il motore di ricerca possa presentare all’utente un risultato nella sua lingua. Possono essere presenti nell’head del sito, nella sitemap o nell’intestazione HTTP.
hreflang

Il tag rel hreflang si presenta con questa struttura:

<link rel="alternate" href="http://www.esempio.it" hreflang="it-it" />

Attenzione: il tag hreflang non influisce sul posizionamento del sito, nel senso che una pagina web non verrà penalizzata da Google in caso di mancanza del tag. Tuttavia il suo scopo è quello di presentare ad ogni utente la versione adatta del sito in base alle preferenze di ricerca e alla localizzazione, perciò la sua assenza potrebbe compromettere l’esperienza utente, aumentare il bounce rate e conseguentemente peggiorare il ranking.

Il tag è composto dalle seguenti parti:
href=”urlsito” : L’URL della pagina nella lingua indicata
hreflang=”it” : la lingua della pagina (nel formato ISO 639-1). È possibile indicare anche il codice dell’area geografica (nel formato ISO 3166-1 alpha-2) per Paesi che parlano la stessa lingua (ad esempio, en-gb per il Regno Unito e en-us per gli Stati Uniti) oppure per un contenuto destinato alle persone che parlano una certa lingua in una data area geografica (ad esempio, es-us per chi vive negli Stati Uniti e parla spagnolo).
Il codice della lingua è sempre obbligatorio, mentre quello dell’area geografica facoltativo (viene utilizzato principalmente per e-commerce che trattano Paesi con diverse valute).

In quali casi vanno utilizzati?

I tag hreflang si utilizzano in tutti i casi in cui una pagina web è in due o più lingue diverse (o varianti linguistiche), oppure il sito web ha necessità di presentare pagine leggermente diverse in base alla località dell’utente.
Vengono utilizzati sia che si tratti di sottocartelle (http://www.esempio.com/it) che di domini di primo livello (http://www.esempio.it).

Dove vanno inseriti?

Come già accennato in precedenza, esistono tre modi diversi di integrare questo tipo di tag in una pagina web:

  • All’interno della sitemap: è possibile indicare le diverse lingue del sito nella sitemap xml. Il metodo più veloce per farlo è mappare tutti gli URL corrispondenti alle diverse lingue in un foglio Excel e utilizzare questo tool.
  • Nell’header HTTP: questa opzione viene utilizzata principalmente per file non in HTML, come ad esempio dei fogli PDF. Si implementa di solito nel file .htaccess e la stringa da aggiungere è questa:
    Link: <http://www.esempio.it/es/file.pdf>; rel="alternate"; hreflang="es">
    
  • Nell’header HTML (racchiuso tra i tag head): si tratta della soluzione più comune, ed anche quella che tratteremo in questo tutorial. I tag vengono indicati insieme agli altri meta nell’head della pagina.

Va scelto solamente uno di questi tre metodi. Non ne esiste in generale uno più raccomandato rispetto agli altri, ma io personalmente prediligo l’utilizzo del tag nell’head del sito, in quanto è quello più semplice da implementare e lascia maggior libertà d’azione nel caso di piccole modifiche da apportare.

Quanti tag hreflang vanno inseriti in ogni pagina?

In ogni pagina devono essere presenti:

  • Il tag hreflang relativo alla pagina stessa
  • I tag relativi a tutte le diverse versioni della pagina, quindi uno per ogni lingua

Il tag deve essere reciproco, il che significa che se la pagina A linka alla pagina B, anche pagina B dovrà necessariamente linkare alla A.
seo multilingua
Ecco un esempio pratico: ho un sito web in italiano che ha anche una versione in francese. Nella home page italiana del mio sito inserirò i seguenti tag:

<link rel="alternate" href="http://www.esempio.it/" hreflang="it" />
<link rel="alternate" href="http://www.esempio.it/fr" hreflang="fr" />

E in quella francese:

<link rel="alternate" href="http://www.esempio.it/fr" hreflang="fr" />
<link rel="alternate" href="http://www.esempio.it/" hreflang="it" />

Esempi di utilizzo

Stesso Paese, lingue diverse

Per Paesi con più di una lingua nazionale, come ad esempio la Svizzera:

<link rel="alternate" href="http://www.esempio.ch/it" hreflang="it-ch" />
<link rel="alternate" href="http://www.esempio.ch/fr" hreflang="fr-ch" />
<link rel="alternate" href="http://www.esempio.ch/de" hreflang="de-ch" />

Stessa lingua, Paesi diversi

Per Paesi che utilizzano la stessa lingua, ma devono visualizzare una versione diversa della pagina (ad esempio a causa della diversa valuta). In questo caso diventa necessario indicare anche l’area geografica:

<link rel="alternate" href="http://www.example.com" hreflang="en-us" />
<link rel="alternate" href="http://www.example.com/ireland" hreflang="en-ie" />
<link rel="alternate" href="http://www.example.com/uk" hreflang="en-gb" />

Diverso Paese, diverse lingue

Uno dei casi più comuni, in cui sia Paese che lingua sono diversi:

<link rel="alternate" href="http://www.esempio.it" hreflang="it" />
<link rel="alternate" href="http://www.exemple.fr" hreflang="fr" />
<link rel="alternate" href="http://www.example.com" hreflang="en" />

Reindirizzamento dalla pagina “scegli lingua”

Esiste un modo per includere il tag in una “pagina universale” del sito, che non ha una particolare lingua o area geografica.
Viene utilizzato nelle pagine che permettono all’utente di scegliere la propria lingua preferita, oppure lo auto reindirizzano tramite geolocalizzazione alla pagina nella sua lingua.
In questi casi è sufficiente indicare x-default come attributo relativo alla lingua.

<link rel="alternate" href="http://www.example.com/" hreflang="x-default">
Non ci ho capito nulla, dammi un tool che lo faccia per me

Ecco qui: The hreflang tags generator tool 🙂

Altre indicazioni e accorgimenti

Il tag è a livello di pagina, non di sito, perciò deve essere presente in ogni singola pagina.
Quando si ha a che fare con una lingua che presenta delle varianti di scrittura è possibile specificare una combinazione di scrittura e regione, ad esempio zh-Hans-TW per indicare il cinese semplificato (zh-Hans) per gli utenti in Taiwan (tw).

Indicazioni per aggiungere i tag su WordPress

Chi utilizza WordPress può affidarsi ad un plugin che permette di aggiungere meta tag diversi all’head delle singole pagine.
Il più semplice e affidabile è sicuramente Add Meta Tags.
Una volta installato troverete una sezione in più nell’editor delle pagine (e dei post) che vi permetterà di inserire i tag hreflang relativi a quella pagina nel box “Full meta tags”.

Attenzione: se utilizzate il plugin Yoast SEO, quando installerete Add Meta Tags probabilmente apparirà un avviso per comunicarvi che i due plugin vanno in conflitto tra loro: per risolvere il problema basterà entrare nelle impostazioni del plugin (dal menù di sinistra, Impostazioni -> Metadata) e togliere il flag dalle seguenti caselle:

Sotto “Basic metadata”:
– Automatically generate the description meta tag
– Automatically generate the keyword meta tag

Sotto “Metabox features”:
– Custom description
– Custom keywords
– Custom content of the title

Dovrete invece barrare la casella “Full meta tags box”, che è di fatto quella che vi serve per inserire i tag.

Alcune risorse utili per approfondire:
Guida di Moz ai tag hreflang
Guida ufficiale di Google
Guida di Yoast

Seconda parte della guida: sitemap, robots.txt e Search Console

Di Susanna Marsiglia

Blogger, content manager, SEO, web designer, a volte scrittrice analogica. Nerd repressa causa incompatibilità con la matematica. Mens sana in corpore pigro.

Commenti (13)
  1. Antonio Caliandro 17 febbraio 2018 at 18:41

    Ottimo articolo, molto utile…
    Complimenti Susanna 😉

  2. Gaetano Cessati 11 novembre 2017 at 19:22

    Grazie mille Susanna, ottimo articolo! 😉

  3. Linda 21 dicembre 2016 at 11:33

    Ma per chi usa Joomla qualche consiglio?

  4. Pingback: Le raccomandazioni di John Muller sui siti web internazionali

  5. Daniele Frati 5 dicembre 2016 at 15:22

    Ho un sito in wordpress con Yoast ed ho fatto i movimenti indicati nel tuo articolo per risolvere l’incompatibilità con Yoast ma continua ad apparirmi il messaggio che dice di disattivare Add Meta Tags..

    Puoi aiutarmi grazie?

  6. giuliana 10 novembre 2016 at 13:02

    grazie, finalmente qualcuno che spiega in modo chiaro! Tengo il tuo sito tra i preferiti

  7. Viola 2 giugno 2016 at 21:28

    Grazie! Una guida utilissima!

  8. simone 23 maggio 2016 at 12:35

    Grazie, finalmente una spiegazione chiara ed esaustiva, in ogni dettaglio.
    Complimenti sinceri!

  9. stefano 17 aprile 2016 at 16:57

    “NON CI HO CAPITO NULLA, DAMMI UN TOOL CHE LO FACCIA PER ME
    Ecco qui: The hreflang tags generator tool ”

    Si prega di notare che, a partire dalla versione 2.11.0, lo sviluppatore non fornisce supporto per questo plugin

  10. Pingback: SEO per siti multilingua: geolocalizzazione degli utenti

  11. Pingback: SEO per siti multilingua: guida ai tag hreflang...

  12. Pingback: SEO per siti multilingua: sitemap, robots.txt e Search Console

Lascia un commento

Il tuo indirizzo email non verrà pubblicato. I campi obbligatori sono segnalati *