Francesco Giammanco Esci dalla modalità Reader

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:

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:

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:

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_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>

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.

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:

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: