Conosci gli attributi rel=”alternate” e hreflang? Se la tua azienda ha un mercato estero, hai la necessità di avere una versione inglese del sito web. E come minimo dovresti occuparti di questioni che hanno a che fare con la SEO Internazionale. In questo articolo ti spiegherò come indicare a Google che il tuo sito ha una, o più versioni in lingue diverse, e come implementare l’attributo hreflang su un ecommerce basato su Prestashop.

Come indicare a Google che esistono versioni in più lingue di uno stesso sito?

Se la traduzione del tuo sito, in inglese, o in altra lingua, non viene segnalata come tale, sia che tu stia utilizzando una strategia di sottodomini, sottodirectory o, addirittura, domini diversi, devi sapere che corri il rischio che il sito non verrà indicizzato correttamente nelle varie lingue, o peggio ancora creerai contenuti duplicati.

In altre parole, il tuo sito web ha bisogno di una corretta gestione delle sue pagine, e della loro traduzione. La soluzione per indicare a Google, e agli altri motori di ricerca, che il tuo sito ha un’espansione in una nuova lingua è adottare gli attributi rel=”alternate” hreflang=”x”che dovrai inserire su ciascuna pagina html del tuo sito. Si tratta di tag html che ha una sintassi estremamente semplice. Esso implica che una determinata pagina web abbia una versione alternativa, in un’altra lingua.

rel=”alternate” hreflang=”x”: cosa sono e quando usarli

Gli attributi rel=”alternate” hreflang=”x” sono  utilizzati da Google per mostrare all’utente la versione corretta di un sito multilingua. Per corretta, intendo nella lingua parlata nel luogo da cui mi collego, che in genere corrisponde a quella in cui  è impostato il browser del computer.

In altre parole, questo espediente farà in modo che, se cerco un determinato sito web da Londra, Google comprenderà che mi trovo in Inghilterra e, se ho impostato il browser in inglese, la versione che mi sarà mostrata di un sito multilingue, sarà quella in lingua inglese, e non quella in italiano, o russo. Questo automatismo consente al motore di ricerca di migliorare non poco l’esperienza utente, che si troverà ad avere a che fare con pagine a lui perfettamente comprensibili.

Il tuo sito web necessita di questi attributi?

I 3 casi che possono richiedere di implementare rel=”alternate” hreflang=”x”sono i seguenti:

• I tuoi contenuti principali sono in una sola lingua, ma traduci, ad esempio, la barra di navigazione e il piè di pagina. Questo genere di soluzione viene comunemente adottata per le pagine con contenuti generati dagli utenti, come i forum.
• I tuoi contenuti presentano piccole varianti locali, ma le pagine hanno contenuti simili in un’unica lingua. Ad esempio, potresti avere bisogno di contenuti in inglese destinati a utenti di Stati Uniti, Gran Bretagna e Irlanda, con specifiche varianti.
• I contenuti del tuo sito sono completamente tradotti. Ad esempio, per ogni pagina hai le versioni in italiano e in inglese.

Quest’ultimo caso è quello più comune. La medesima situazione in cui io stessa mi sono trovata. Nel mio caso, il sito web di un cliente ha la doppia lingua: https://malinishop.com per la versione inglese, e https://malinishop.com/it/ per l’italiano. Si tratta di un sito in Prestashop, su cui l’obiettivo è implementare l’attributo, in modo da segnalare correttamente a Google che il sito ha una traduzione in inglese americano.

Link rel=”alternate” hreflang=”x”: come è possibile implementarlo

Se hai un sito web multilingue devi essere sicuro che in SERP venga mostrata la url locale corretta per ciascuna pagina. Mi pare chiaro. Come farlo? Eccoti, a seguire, 3 soluzioni possibili suggerite da Google, per implementare l’attributo hreflang in maniera corretta.

• Inserisci gli attributi rel=”alternate” hreflang=”x” nell’intestazione di ogni pagina. Nella sezione del codice HTML di https://www.miosito.com/, inserisci il link alla pagina corrispondente in italiano così:
• Intestazione HTTP. Se pubblichi un file in formato diverso da HTML (ad esempio PDF), puoi utilizzare un’intestazione HTTP per indicare una versione in lingua diversa di un URL. Link: <http://es.example.com/>; rel="alternate"; hreflang="es" Per specificare diversi valori hreflang in un’intestazione HTTP Link, separa i valori con la virgola, in questo modo: Link: <http://es.example.com/>; rel=”alternate”; hreflang=”es”,<http://de.example.com/>; rel=”alternate”; hreflang=”de”
• Sitemap. Anziché utilizzare il markup, puoi inviare le informazioni sulla versione in lingua in una Sitemap.

Sarà importante segnalare l’indirizzo della traduzione, per ciascuna lingua, in ogni pagina del sito web Suggerimento → se hai ancora qualche dubbio ti consiglio di leggere, tra qualche paragrafo, l’intervista a Matteo Bononi

Hreflang nell’intestazione di ogni pagina indica tutte le pagine alternative, in ogni lingua

Quindi, ricapitolando, su tutte le pagine del mio ecommerce dovrei avere una cosa del genere: Nell’esempio qui sotto, nella pagina https://malinishop.com/it/borse-indiane/73-borsa-patchwork-indiana-nina.html, dovrò inserire questi tag, in cui si fa riferimento al fatto che la pagina sia presente in lingua italiana e in lingua inglese, e il relativo indirizzo web. In questo modo il motore di ricerca non scambierà le due versioni del sito.

Affinché ciò accada ricorda che l’attributo deve essere presente in ogni pagina del tuo sito web, e deve essere indicato tante volte, quante sono le lingue in cui una pagina è tradotta.

[ESEMPIO]

Per intenderci: se la pagina sopra riportata fosse in italiano, inglese, rumeno e francese, nella parte alta della pagina, denominata…dovrei inserire: it/borse-indiane/73-borsa-patchwork-indiana-nina.html”/> en/indian-bags/73-indian-patchwork-bag.html”/> ro/borse-indiane/73-borsa-patchwork-indiana-nina.html”/> fr/indian-bags/73-indian-patchwork-bag.html”/>

Suggerimento → Per completare il valore dell’attributo hreflang occorre conoscere i codici internazionali per lingua e luogo, corrispondenti a ciascuna url del sito multilingua. Questo markup serve per visualizzare la lingua o l’URL locale corretti nei risultati di ricerca.

Come gestire l’implementazione dell’hreflang su Prestashop?

Bene, a questo punto, io che non sono un programmatore, e che mi guardo bene dal metter mani all’HTML, se non per interposta persona (un grazie ufficiale a Gioacchino Nigrelli che ci pensa per me), mi trovo di fronte ad un muro. L’implementazione dell’attributo rel=”alternate” hreflang=”x” su Prestashop.

Inizialmente l’idea era scrivere a mano tutti i tag, facendo una scansione del sito web con ScreamingFrog, in modo da identificare tutte le pagine html, in italiano, ed in inglese. Di conseguenza procedo. Scansiono, esporto i dati in un file excel e divido le pagine in italiano, da quelle in inglese. E rimango a fissare il monitor.

Come farò a trovare le corrispondenze tra le pagine in italiano e quelle in inglese per scrivere tutti i tag e consegnarli a Gioacchino? Molto bene. Devo trovare una soluzione alternativa.

Quanto costa implementare l’hreflang?

Ok, giuro, mi stava venendo un bel mal di testa. Quindi inizio a interrogare Google, in cerca di una soluzione che facesse al caso mio. La mia query (domanda) è “plugin prestashop hreflang“. Quello che Google mi restituisce è questo:

Questi sono i primi risultati. Com’è facile intuire il primo link su cui mi soffermo è il forum del sito di prestashop.com che mi suggerisce, nella sezione addons, una serie di soluzioni di cui discutono gli utenti. Spulcio un po’ e torno in SERP. (Solo dopo mi sarei accorta che tra quei post, più di una volta, l’amministratore della discussione fa riferimento al sito di un certo Matteo Bononi.)

Secondo link: si tratta sempre di una pagina del sito di Prestashop, ma stavolta mi trovo davanti una landing page, che mi propone di acquistare il Modulo Hreflang and Canonical tags, al costo di soli 59,99 € iva esclusa. Con iva l’investimento ammonta a ben 73,19 €. Una cifra sufficiente a mandarmi di nuovo in SERP a continuare la mia ricerca.

Al terzo posto trovo un title in inglese che mi dice che a quel link posso scaricare un plugin per prestashop creato da Matteo Bononi. Mai sentito prima. Curiosa come una scimmia, mi avvento su Facebook e contatto Matteo chiedendo giusto qualche informazione. Matteo mi risponde subito e gentilmente.

Decido, per tanto, di acquistare il suo plugin ad un costo irrisorio. Infatti, spulciando tra i moduli disponibili per Prestashop, in cerca di un’alternativa valida e più economica di Hreflang and Canonical tags, mi sono resa conto che esistono plugin che gestiscono l’attributo hreflang a partire da 29,99 € iva esclusa.

Gestisci l’hreflang su PrestaShop al giusto prezzo

Sai qual è il costo a cui puoi ottenere questo risultato sul sito di Matteo? Soli 10,00 €. Incredibile. E lo dico a fronte del fatto che proprio oggi ho fatto il download, e la donazione (strameritata) a Matteo, avendo un’esperienza utente praticamente perfetta.

• Scarichi il file in formato .zip
• Vai nella sezione moduli di Prestashop
• Aggiungi il nuovo modulo
• Fai un semplicissimo click su ISTALLA
• FUNZIONA!

Intervista a Matteo Bononi, web developer

Matteo Bononi

Ecco, approfitto di questo articolo per fare qualche domanda a Matteo:

#1 Ciao Matteo, benvenuto su madd.it, chi sei, e di cosa ti occupi?

Ciao! Grazie per l’accoglienza! Mi chiamo Matteo Bononi (ma questo era chiaro), sono uno sviluppatore, appassionato anche di grafica e molte altre discipline informatiche e mi occupo principalmente di programmazione (sia front che back end), UX design, SEO e meno spesso (purtroppo) di grafica ed editing video. (mi trovate su www.matteobononi.it).

#2 Se non avessi trovato il tuo meraviglioso plugin, come avrei dovuto procedere?

• configurare il server perché restituisca degli header che definiscono la lingua della pagina, ma sarebbe davvero complesso sia da configurare da che mantenere (è appunto il server che gestirebbe questo comportamento e ottenerlo su i normali servizi di hosting senza avere un server dedicato è quantomeno difficile),
• oppure usare la Sitemap per mappare le versioni in lingua di una pagina. Il metodo è abbastanza semplice, la sitemap non è altro che un file xml che elenca tutte le pagine del sito. Google non solo naviga nel sito seguendo i link, ma si basa anche sui dati che trova nella sitemap per comprendere la struttura del sito e mappare delle pagine.

#3 Come posso inserire i tag hreflang sulla sitemap?

Questo è un normale elemento di una generica sitemap, dove si indica a google la “presenza” di alcune pagine:

• <urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9“ xmlns:image=”http://www.google.com/schemas/sitemap-image/1.1“>
• http://www.esempio.it/pagina1.html

piuttosto semplice, senza nessun dato aggiuntivo, segnaliamo solo la presenza di una pagina. Il nostro sito però è multilingue, avrà perciò una struttura simile alla seguente:

• http://www.esempio.com/it/
• http://www.esempio.com/en/

• http://www.esempio.com/fr/

Prendiamo ad esempio un prodotto, che, nelle varie lingue, avrà i seguenti link:

• http://www.esempio.com/it/fantastico_prodotto1.html http://www.esempio.com/en/awesome_product1.html
• http://www.esempio.com/fr/produit_fantastique1.html

Nella sitemap dovremo indicare, per ogni pagina, le pagine “collegate” e la lingua che utilizzano usando l’attributo rel=”hreflang”, ecco come apparirebbe l’elemento che descrive la pagina in italiano:

#4 Inseriti i tag hreflang sulla sitemap, quali sono vantaggi, e svantaggi?

Il vantaggio di usare la sitemap è sicuramente quello di non dover mettere mano in nessun modo al sito, la sitemap, per siti semplici o con poche lingue, si può modificare anche a mano, basta un po’ di pazienza e precisione.

Gli svantaggi sono legati alla manutenzione, che è decisamente poco pratica: per ogni prodotto aggiunto, dovresti infatti riprendere in mano il file ed aggiungere tutti i link di quel prodotto. Un’altro svantaggio è dato dal tempo che impiega Google ad usare i dati della sitemap. Il motore di ricerca, infatti, indicizzerà prima la sitemap, e solo successivamente andrà a visitare i vari link presenti.

Perciò Google impiegherà un po’ più di tempo per indicizzare in modo corretto il sito, inoltre eventuali errori nella sitemap saranno risolti un po’ più in ritardo rispetto all’implementazione dei link hreflang nella sezionedel sito.

Certo. Il plugin

Se, quindi, dovessi cambiare l’url di un prodotto in una determinata lingua, una volta ottenuti i link, HREFLANG li inserisce nella pagina richiesta, nel formato adatto, nella sezione. Come dicevo la logica del plugin è davvero semplice, Prestashop però non aiuta, ogni tipologia di pagina ha un modo diverso per chiedere i link in lingua, il vero lavoro del plugin è quello di stabilire in che tipo di pagina si trova (dettaglio prodotto, lista categoria, pagina cms, etc) e chiedere “nel modo giusto” a Prestashop i link.

Ringrazio ancora Matteo per il suo contributo sul blog di madd.it. Sono convinta che oggi hai imparato qualcosa di nuovo sugli attributi rel=”alternate” e hreflang:”x”. Io, di sicuro, dopo questa bella chiacchierata, non ho davvero alcun dubbio. Tuttavia, se qualcosa non fosse chiaro ti prego di farmelo sapere nei commenti. Si può sempre arricchire l’articolo e migliorare, anche con il tuo contributo, quanto scritto sopra.

Se vuoi iscriverti alla newsletter di MADD non devi far altro che compilare questo form. E non dimenticare di votare l’articolo. Te ne sarò grata.