Come utilizzare il tag Hreflang

Il tag hreflang nasce per segnalare ai motori di ricerca una versione localizzata di una pagina, che potrebbe essere anche stata tradotta in un altra lingua. Pur non essendo l’unico metodo per segnalare la presenza di versioni alternative di pagine localizzate, rimane sicuramente il più conosciuto.

Quando utilizzare Hreflang

In linea di massima, Google consiglia di segnalare la versioni alternative di una pagina tramite gli appositi tag ogni qualvolta si manifesti una delle seguenti situazioni:

  • Contenuti presenti in una pagina in una sola lingua, ma di cui vengono tradotte alcune parti ridondanti nelle pagine, come il menu di navigazione e il footer. Questo è un caso comune nella realizzazione di forum multilingua.
  • Il testo di una pagina contiene versioni alternative con piccole varianti. Il caso più comune è quello dell’inglese, in cui variano le espressione a seconda che sia americano, britannico, australiano.
  • Contenuti tradotti in più lingue e presenti nello stesso sito.

In poche parole qualsiasi versione possa essere riconosciuta come testo tradotto o simile, ha bisogno del tag hreflang.

Come inserire il tag

Ci sono diversi metodi per installare l’hreflang su un sito, e in questo caso presenterò i tre più conosciuti e un quarto, da realizzare con Google Tag Manager.

Tag HTML

Si tratta forse del metodo di implementazione più semplice ma contemporaneamente potrebbe essere la più dispendiosa in termini di tempo. Per rendere attivo questo metodo devi inserire un link contenente la versione della lingua presente e tutte le versioni in lingue alternative.

Il link deve essere inserito nel <head> della pagina e deve avere una sintassi di questo tipo: <link rel=”alternate” hreflang=”codice_lingua” href=”url_della_pagina” />

Inserisci il codice lingua corrispondente alle varie versioni della pagina, che dovranno essere segnalate una per una, come nell’esempio:

  <link rel="alternate" hreflang="it" href="https://www.esempio.com/it/" />
<link rel="alternate" hreflang="en-us" href="https://www.esempio.com/us/" />
<link rel="alternate" hreflang="x-default" href="https://www.esempio.com/us/" />
<link rel="alternate" hreflang="de" href="https://www.esempio.com/de/" />

Com’è facile comprendere il metodo si presta bene se utilizzato con dei tool che permettano di inserire velocemente i link in sequenza, altrimenti la procedura diventerebbe lunga e tediosa.

Inserimento HTTP

I client e i server permettono di passare informazioni aggiuntive ogn qualvolta viene fatta una richiesta HTTP o viene fornita una risposta. Le intestazioni HTTP o HTTP headers sono delle stringhe di informazioni costituite da un nome (che ignora maiuscole e minuscole, “case-insensitive”) seguito da due punti e da un valore.

Nel caso dell’indicazione hreflang la stringa appare simile a:

 Link: <url1>; rel="alternate"; hreflang="codice_lingua_1", <url2>; rel="alternate"; hreflang="codice_lingua_2" 

Dove le url numerate rappresentano le diverse versioni della stessa pagina, tradotte in lingue differenti (tutta la pagina o una sua parte).

Sitemap

Nel caso in cui si voglia integrate il tag all’interno delle sitemap è bene seguire alcune semplici regole:

  • Bisogna inserire lo spazio dei nomi xhtml secondo il metodo
    xmlns:xhtml=”http://www.francescogiammanco.it/xhtml”
  • Per ogni post, pagina o elemento con un URL bisogna inserire un tag  <url> differente. Inoltre ogni <url> deve essere accompagnato da un tag <loc> che indichi l’URL della pagina, e da un tag  <xhtml:link rel=”alternate” hreflang=”codice-lingua_supportato“> che segnali la versione alternativa della pagina. Come accadeva per le altre soluzioni, bisogna sempre includere anche l’indicazione della pagina in cui si opera, non solo le varianti.

Inserirlo tramite Tag Manager

La scelta di inserire hreflang tramite Tag Manager è da considerarsi come un’opzione secondaria, visto che non sempre Google riconosce il segnale se non inserito direttamente tramite HTML.

Nel caso in cui non fosse possibile modificare il codice del sito ma operare solo dall’esterno, allora bisogna completare la seguente procedura:

  • utilizzare le URL relative alle varie versioni delle pagine, magari con l’indicazione della lingua come directory (esempio: www.francescogiammanco.it/de/ o www.francescogiammanco.it/it/)
  • creare gli attivatori che puntino solo ad una delle lingue, utilizzando come trigger Visualizzazione di pagine > Alcune visualizzazioni di pagina puntati sulla sezione di URL che indica la lingua (esempio: /it/ o /de/)
  • inserire nel Tag “HTML Personalizzato” lo script che riporta una versione del codice che rimpiazzi la sezione dell’URL che indica la lingua, in modo da creare un hreflang corretto.
  • creare e modificare lo script per rimpiazzare l’indicazione dell’URL che indica la lingua con quella corretta.
  • creare una versione dello script per x-default.

Di seguito un esempio dello script da inserire e modificare una volta per lingua. Bisogna notare che {{Page URL}} è un attivatore che riconosce l’url della pagina (da creare).

 <script> 
var link_en = document.createElement('link');
link_en.rel = 'alternate';
link_en.href = '{{Page URL}}';
link_en.hreflang = 'en'; document.head.appendChild(link_en);
var link_it = document.createElement('link');
link_it.rel = 'alternate';
link_it.href = {{Page URL}}.replace("en_US", "it_IT");
link_it.hreflang = 'it'; document.head.appendChild(link_it);
</script>

Per inserire l’indicazione dell’x-default bisogna invece inserire questo codice con vista su ogni pagina:

<script> 
var link_xdefault = document.createElement('link');
link_ xdefault.rel = 'alternate';
link_ xdefault.href = '{{Page URL}}';
link_xdefault.hreflang ="xdefault";
jQuery('head').append(link_xdefault);
</script>

Inserirlo con uno script PHP

Si tratta di un metodo molto semplice che richiede l’inserimento di uno script in tutti quei siti realizzati con PHP, come WordPress ad esempio.

Per rendere attiva questa modalità, bisogna personalizzare questo codice:

 <link rel=”alternate” href=”http://otherdomain.com.au<?php echo parse_url($_SERVER[‘REQUEST_URI’],PHP_URL_PATH); ?>” hreflang=”en-us” />

Cambia http://otherdomain.com.au con il dominio da inserire, e anche le indicazione riguardo il riferimento geografico, in questo caso en_us.

Lo script deve essere ripetuto e modificato una volta per ogni lingua da inserire (compresa la lingua originaria del sito), ed inserire tutte le indicazioni dell'<head> del sito.

Best Practices per utilizzare il tag

Sebbene la gestione basilare del tag hreflang sia abbastanza semplice, spesso si commettono errori nella sua implementazione.

  • Bisogna inserire anche la lingua principale del sito, non solo gli alternate delle lingue non presenti.
  • E’ possibile unire domini differenti e anche spazi differenti (per esempio diverse installazioni del sito, una per ogni lingua)
  • Per essere funzionante, c’è bisogno che entrambe le pagine riportino le indicazioni di connessione del tag. Quindi non solo uno dei siti, un dominio o semplicemente una pagina creata nella seconda lingua deve riportare le indicazioni, ma qualsiasi versione della pagina, compresa la prima.
  • Meglio creare una versione di hreflang per tutte quelle lingue non presenti direttamente come indicazione, ma per cui avrebbe senso comparire.
  • Bisogna conoscere e saper utilizzare i codici lingua / area geografica.
  • Non c’è limite al numero di hreflang utilizzabili in una pagina.

Codici lingua e area geografica

I codici lingua (formato ISO 639-1) rappresentano quella parte del tag che indica linguisticamente in quali SERPs devono comparire le pagine del sito.

Alla stessa maniera, le indicazioni dell’area geografica (formato ISO 3166-1 alpha-2) indica in quali paesi deve essere visibile una certa pagina. L’insieme dei due valori, codici lingua e area geografica, da indicazioni più complete sul posizionamento dei risultati da mostrare all’interno del motore di ricerca.

Fa eccezione l’indicazione x-default, che serve proprio a indicare una delle versioni della pagina come valida ad essere mostrata in tutte quelle SERP di cui non abbiamo segnalato specificatamente lingua e regione geografica. Di norma, in occidente, x-default viene inserito per indicare la pagina in inglese, lingua più diffusa e comunemente accettata.

La regola segnala una combinazione di codice lingua e area geografica secondo questa nomenclatura: en-US, it-IT, de-ES, dove la prima indicazione è la codificazione della lingua.

Per indicare dunque la lingua inglese parlata in Gran Bretagna, l’indicazione da utilizzare sarà en-GB.

Hreflang per mobile e AMP

Finora ho preso in considerazione uno o più siti, ognuno dei quali mono o multilingua, da congiungere con altri o solo all’interno, ma non ho preso in considerazione tutte quelle piattaforme che presentano una versione alternativa della pagina per mobile e / o un’altra copia AMP.

Grazie alle domande e alle rappresentazioni di Sergio Redondo e Aleyda Solis, è più facile comprendere come segnalare le varie versioni della pagina.

Per semplificare, basta sapere che:

  • a partire dal mobile first index, le versioni mobile indipendenti da quelle desktop devono riportare le indicazioni hreflang relative alla propria versione.
  • per chiunque utilizzi una versione AMP della pagina, dovrà riportare un rel=”canonical” verso la versione desktop (o mobile, nel caso fosse separata dalla prima), mentre questa indicherà con rel=”amphtml” la presenza di una versione AMP della pagina.
Relazione tra pagine AMP e hreflang

Hreflang e Canonical

Per non creare visite dal bot a versioni del sito che in realtà si cercherebbe di spostare su un’altra versione, è bene che solo le versione puntate da un canonical contengano tag hreflang.

Per rendere più chiaro il concetto, basti pensare che se è stata usato un canonical per indicare un’altra pagina, non ha senso indicare nella pagina che ne punta un’altra come canonica delle indicazioni percorse dai bot, come appunto hreflang.

Hreflang, dubbi e posizionamento

Il tag non fornisce posizionamento, ma perderlo o non permettere una corretta indicizzazione è facile. Gli errori più comuni sono:

  • pensare che un ccTLD garantisca che la versione regionale non superi la versione globale (.com) nelle SERP, quando invece Google decide in base ad una molteplicità di fattori.
  • che il tag garantisca il geotargeting, sebbene sia stato smentito.
  • che la duplicazione dei contenuti influenzi hreflang. Non è affatto così, come da indicazione di Mueller, al massimo le pagine con contenuti identici non verranno indicizzate, ma questo non riguarda il meccanismo di posizionamento nelle SERP per lingua e regionalità.
  • i geotag non sono identici all’hreflang. I primi non sempre vengono utilizzati, mentre il secondo si.
  • fare attenzione alla gestione di Javascript, che può “oscurare” la visione dei tag ai bot.

starstarstarstarstar5.00 / 3 voto / i

Related Posts

Se ti è piaciuto l'articolo, iscriviti alla Newsletter

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.