Tag Hreflang: la guida definitiva
Pubblicato: 2021-02-02Allora perché preoccuparsi? Ecco perché: hreflang è forse l'aspetto più importante della creazione di contenuti SEO per siti con contenuti simili in più lingue. Quindi, stai tranquillo: il guadagno supererà qualsiasi dolore associato al processo, in più ti farà notare. Cosa c'è da non amare in questo?
Cosa sono i tag Hreflang?
Hreflang è un codice, in particolare un attributo HTML, che specifica tutti gli URL su un sito che utilizzano lo stesso contenuto. L'attributo hreflang è stato introdotto da Google oltre un decennio fa e consente agli utenti di mostrare ai motori di ricerca la relazione tra più pagine Web in varie lingue. Ciò si rivela utile quando il contenuto viene creato per un pubblico specifico. Per le aziende con più versioni della stessa pagina Web in lingue diverse, il tag hreflang comunica queste variazioni ai motori di ricerca e aiuta a fornire agli utenti la versione corretta.
Ad esempio, se qualcuno cerca su Google "Ikea" negli Stati Uniti, vedrà questo risultato:
Mentre la stessa query di un ricercatore in Canada, restituirebbe questo risultato:
Perché tutto questo trambusto? Il tag hreflang consente ai motori di ricerca di fornire risultati agli utenti in base al loro paese e alle preferenze della lingua, rendendo il significato del tag hreflang inestimabile: ottimizza l'esperienza dell'utente e porta a migliori classifiche di ricerca. Com'è per una vittoria per tutti?
Perché Hreflang è importante per la SEO?
Tutto si riduce a risultati personalizzati. Tutto il duro lavoro di tradurre una pagina web in più lingue va perso se un utente non viene indirizzato ai risultati su misura per lui. In breve, hreflang SEO consente ai motori di ricerca di fornire agli utenti la versione più appropriata della pagina Web di un'azienda in base alla loro lingua e posizione. Hai una pagina ottimizzata per le preferenze particolari di un utente? Non solo vuoi che atterrino lì, ma vuoi anche che rimangano - per una manciata di motivi - e la SEO dei tag hreflang è come farlo.
L'implementazione di questa pratica migliora l'esperienza dell'utente, riduce al minimo il rimbalzo sui risultati di ricerca e consente di ottenere classifiche più elevate. (Se all'inizio non ci riesci, prova, riprova non è necessariamente un proverbio utile quando si naviga nelle ricerche basate sul Web). L'obiettivo qui non è aumentare il traffico, ma fornire il contenuto giusto agli utenti giusti, che desiderano ritorni rapidi e affidabili. I tag Hreflang sono la chiave per ottenere questi risultati sfumati.
Serve un altro motivo? L'utilizzo di un hreflang elimina il problema dei contenuti duplicati. Immagina che la tua azienda offra lo stesso contenuto in inglese su URL diversi destinati agli Stati Uniti e al Canada; le differenze sono probabilmente minime e si riflettono nei dettagli della valuta (USD contro CAD) e nel gergo (sistema imperiale contro sistema metrico).
Un tag hreflang aiuta i motori di ricerca a riconoscere e comprendere la relazione tra queste pagine e il pubblico distinto per cui ciascuna è stata creata. Senza hreflang, Google potrebbe essere incline a vedere queste pagine come contenuti duplicati e restituire solo uno dei risultati; con hreflang, viene comunicato molto chiaramente al motore di ricerca che sebbene il contenuto sia (in gran parte) lo stesso, è ottimizzato per popolazioni diverse. Com'è quello per una piuma nel tuo berretto (o touque, per i nostri amici canadesi)?
Questi dettagli contano, quindi continua a leggere per saperne di più.
Che aspetto hanno i tag Hreflang?
I tag hreflang sono semplici, coerenti e utilizzano la seguente sintassi:
<link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />
Questo formato comunica che la pagina collegata è una versione alternativa della pagina corrente, visualizzata nella lingua "x". I tag hreflang servono come segnali per i motori di ricerca, non come direttive. In altre parole, l'attributo hreflang segnala al motore di ricerca che un utente che esegue query utilizzando la lingua "x" preferirà questo risultato a una pagina con contenuti sostanzialmente simili nella lingua "y". Un'altra differenza tra segnali e direttive? Google potrebbe non riconoscere gli attributi hreflang se ritenuti imprecisi, con il risultato che altri fattori SEO hanno la precedenza sull'attributo hreflang, facendo sì che una versione alternativa della pagina della tua azienda si posizioni più in alto rispetto alla versione migliore.
Utilizzo dell'HTML di Hreflang
Per i siti web che sono stati tradotti in più lingue, costruire un tag hreflang è semplice come 1-2-3. Ciascuno di questi passaggi utilizza la sintassi sopra menzionata (<link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />) come base.
- L'attributo hreflang deve contenere un valore valido che consiste nella lingua; queste informazioni vengono comunicate in un codice di due lettere chiamato formato ISO 639-1. Ad esempio, se volessi tradurre la pagina di esempio in portoghese, sarebbe simile a questa:
<link rel=“alternate” hreflang=“pt” href=“https://example.com/portugese-version” />
La regione è facoltativa e, se utilizzata, dovrebbe essere nel formato ISO 3166-1 Alpha 2. Ecco due diversi tag che potresti utilizzare per rivolgerti ai parlanti portoghesi rispettivamente in Portogallo e Brasile:
PT-PT: <link rel=“alternate” hreflang=“pt-pt” href=“https://example.com/pt/our-page” /> PT-BR: <link rel=“alternate” hreflang=“pt-br” href=“https://example.com/br/our-page” />
I codici regionali non sono necessariamente intuitivi (il codice per il Regno Unito è "gb" non "uk"), quindi ricontrolla! Utilizza questo elenco per verificare la lingua e i codici regionali accurati prima di incorporare le informazioni errate nel tuo sito.
- Ogni URL deve restituire collegamenti a tutti gli altri URL, che dovrebbero puntare tutti alla versione canonica o preferita di un determinato sito Web. Più lingue hai, più link hreflang avrai bisogno; anche se potrebbe essere allettante limitarli, è impossibile evitare questo passaggio. Inoltre, rel=”alternate” hreflang=”x”markup e rel=”canonical” possono e devono essere usati insieme. Ogni lingua dovrebbe avere un collegamento rel="canonical" che punta a se stessa. A partire dalla homepage di esempio.com, sarebbe simile a questo:
<link rel="canonical" href="http://example.com/"> <link rel="alternate" href="http://example.com/" hreflang="pt" /> <link rel="alternate" href="http://example.com/pt-pt/" hreflang="pt-pt" /> <link rel="alternate" href="http://example.com/pt-br/" hreflang="pt-br" />
Per ulteriori informazioni sui canonici, leggi Tag e URL canonici: una guida semplice per principianti.
- Il passaggio finale per la costruzione di hreflang di successo è radicato nei collegamenti automatici. Un attributo hreflang su ogni pagina richiede un riferimento a se stesso ea tutte le pagine che fungono da alternativa. Google consiglia vivamente di impostare una pagina "x-default" che stabilisca un singolo URL come versione predefinita che non ha come target una lingua o una regione particolare per i visitatori che non rientrano in quanto specificato. Se si visita la pagina pt-pt, solo la pagina canonica Cambierebbe:
<link rel="canonical" href="http://example.com/pt-pt/"> <link rel="alternate" href="http://example.com/"hreflang="pt" /> <link rel="alternate" href="http://example.com/pt-pt/"hreflang="pt-pt" /> <link rel="alternate" href="http://example.com/pt-br/"hreflang="pt-br" />
È molto da digerire! Ma sei arrivato così lontano, il che significa che sei pronto per il passaggio successivo: imparare a implementare i tag hreflang.
Implementazione dei tag Hreflang
Esistono tre modi per implementare i tag hreflang e tutto si riduce al posizionamento:
1 – Implementazione di tag Hreflang utilizzando HTML:
Per chi è nuovo a hreflang, l'utilizzo di tag HTML di base è il modo più semplice e veloce per iniziare. Aggiungi semplicemente tutti i tag hreflang appropriati (vedi sopra) nel tag <head> della tua pagina web.
Esempio: il webmaster di example.com vuole rendere la propria homepage accessibile agli utenti di lingua inglese e spagnola negli Stati Uniti; utilizzando le seguenti annotazioni nella <head> dell'HTML del loro sito si ottiene questo:
<link rel="alternate" href="https://www.example.com" hreflang="en-us" /> <link rel="alternate" href="https://www.example.com/es" hreflang="es-us" />
Se volessero mostrare la home page agli utenti di lingua spagnola in Venezuela e Messico, l'annotazione hreflang sarebbe simile a:
<link rel="alternate" href="https://www.example.com/ve" hreflang="es-ve" /> <link rel="alternate" href="https://www.example.com/mx" hreflang="es-mx" />
Il singolo più grande svantaggio di questo metodo? L'HTML di Hreflang può diventare disordinato e richiedere molto tempo piuttosto rapidamente. Inoltre, ricorda che c'è una differenza tra gli elementi <head> e <header>; il <head> contiene elementi che non appariranno nella pagina, in questo caso l'attributo hreflang.
2 – Implementazione delle intestazioni HTTP di Hreflang:
Per i PDF e i contenuti non HTML sul tuo sito web, utilizza le intestazioni HTTP per implementare hreflang. Il nome è un po' fuorviante: l'implementazione non viene eseguita sulla pagina tramite <head> o <header>. Invece, è tutto fatto sul back-end di un sito. L'uso delle intestazioni HTTP non solo specifica la lingua relativa delle varianti del documento, ma ottimizza anche questo contenuto.
Esempio: per identificare un documento PDF sul tuo sito nelle versioni inglese e francese, il collegamento visualizzato nell'intestazione HTTP sarà simile al seguente:
Link: <http://en.example.com/document.pdf>; rel="alternativo"; hreflang="it", <http://fr.example.com/document.pdf>; rel="alternativo"; hreflang="fr"
Il più grande svantaggio di questo metodo di implementazione? L'utilizzo delle intestazioni HTTP aggiunge un sovraccarico a ogni richiesta effettuata sul tuo sito, il che può rallentare l'esperienza di navigazione dell'utente.
3 – Implementazione di Hreflang nella tua Sitemap XML
L'ultima opzione per l'implementazione di hreflang sta usando il markup XML della mappa del sito; questo usa l'attributo xhtml:link in XML per aggiungere l'annotazione a ogni URL.
Sebbene ci sia più di un modo per implementare hreflang nella tua mappa del sito XML, ti consigliamo qualcosa del genere:
In alternativa, puoi utilizzare alcuni degli esempi seguenti.
Un avvertimento: il markup necessario per un singolo URL con una coppia di variabili di lingua/posizione apparirà lungo! Detto questo, continua a leggere per i vantaggi. (Ci sono molti!)
Esempio:
<URL> <loc>http://www.example.com/uk/</loc> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" /> </url>
Si noti che il terzo URL è autoreferenziale; questo specifica che l'URL particolare è inteso per en-gb e specifica altre due combinazioni di lingua/posizione. Ora, l'implementazione di entrambi questi URL nella mappa del sito sarebbe simile a questa:
<URL> <loc>http://www.example.com/</loc> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" /> </url> <URL> <loc>http://www.example.com/au/</loc> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" /> </url>
Supponendo che tu sia in grado di guardare oltre il mare di testo, noterai che solo gli URL all'interno dell'elemento <loc> vengono modificati, tutto il resto rimane lo stesso! Accidenti. Questo metodo si basa su ogni URL che ha un attributo hreflang autoreferenziale e restituisce collegamenti ad altri URL.
Sembra un sacco di lavoro, giusto? Da un lato, sì, questo metodo è lungo e richiede un bel po' di output quando si esegue questa operazione per molti URL. Detto questo, il vantaggio è semplice: gli utenti normali non saranno disturbati da questo markup; non viene aggiunto alcun peso di pagina aggiuntivo e la generazione di questo tipo di markup non richiede molte chiamate al database durante il caricamento della pagina.
Infine, l'implementazione di hreflang tramite la mappa del sito XML offre un grande vantaggio: tutto è definito in un unico file. Ciò elimina la necessità di modificare più documenti HTML ogni volta che una pagina viene modificata o eliminata. Inoltre, zero rallentamenti del sito. In altre parole, c'è molto da apprezzare!
Non sei ancora sicuro di quale modalità di implementazione scegliere? Per ulteriori suggerimenti sull'architettura del sito Web e sulla struttura del sito, visita le migliori pratiche SEO tecniche.
Trovare e risolvere i problemi di Hreflang
Ora che hai implementato con successo hreflang sul tuo sito web (inserisci il cinque virtuale qui!), la manutenzione è d'obbligo. L'esecuzione di un controllo regolare dell'implementazione scelta assicurerà che sia impostata correttamente. Comunicare con le persone della tua azienda che si occupano dei contenuti del sito farà molto: vuoi che conoscano hreflang, in modo che non interrompano involontariamente la tua implementazione!
Due punti critici meritano di essere menzionati qui: se una pagina viene cancellata, controlla se le sue controparti sono state aggiornate; quando una pagina viene reindirizzata, cambia gli URL hreflang sulle sue controparti. Supponendo che tu e il tuo team facciate queste cose in modo coerente e controlliate regolarmente, dovrebbe andare tutto liscio.
Nel frattempo, ecco una rapida carrellata degli errori hreflang più comuni e di come risolverli:
1 – Manca l'annotazione hreflang di riferimento
Qual è il problema? È importante utilizzare un tag hreflang autoreferenziale ogni volta che aggiungi un tag hreflang a una pagina web. Ricorda che Google afferma che "ogni versione linguistica deve elencare se stessa così come tutte le altre versioni linguistiche".
Come risolverlo: esamina tutte le pagine interessate e aggiungi un tag hreflang autoreferenziale a ciascuna utilizzando il metodo di implementazione scelto.
2 – Annotazione Hreflang non valida
Qual è il problema? I motori di ricerca ignorano i tag hreflang non validi, il che porta a trascurare versioni alternative della tua pagina web.
Come risolverlo: esamina le pagine interessate e rimuovi i tag hreflang non validi e sostituiscili con quelli che utilizzano formati di codice lingua/posizione validi.
3 – Pagina referenziata per più di una lingua in hreflang
Qual è il problema? Ogni contenuto è progettato per servire una singola lingua/posizione linguistica. Due o più riferimenti in conflitto confonderanno i motori di ricerca e faranno ignorare gli attributi hreflang.
Come risolverlo: esamina le pagine interessate e controlla gli URL che fanno riferimento a una determinata pagina nei loro attributi hreflang per errori. Rimuovi qualsiasi attributo hreflang errato e lascia solo un attributo corretto per lingua.
4 – Manca il reciproco hreflang (nessun tag di ritorno)
Qual è il problema? I tag hreflang sono bidirezionali (se la pagina A si collega alla pagina B nelle annotazioni hreflang, la pagina B deve in cambio collegarsi alla pagina A).
Come risolverlo: esamina le pagine interessate e aggiungi tag hreflang bidirezionali dove necessario. Nota: il rapporto sul targeting internazionale in Google Search Console (che si trova nella scheda "lingua") segnalerà tutte le istanze di tag di ritorno mancanti.
Per esempio:
5 – Da Hreflang a non canonico
Qual è il problema? Rel=“alternate” hreflang=“x” indica ai motori di ricerca di visualizzare la versione tradotta (localizzata) di una pagina; L'attributo rel=canonical segnalerà che questa non è la versione autorevole (canonica). Questi attributi contraddittori confonderanno i motori di ricerca.
Come risolverlo: esamina le pagine interessate e modifica le annotazioni hreflang, in modo che puntino solo agli URL canonici. Se ti imbatti in una pagina con un tag canonico non valido, rimuovilo. Ciò garantisce che l'attributo hreflang sia correttamente compreso e seguito dal motore di ricerca.
6 – Mancata corrispondenza tra lingua Hreflang e HTML
Qual è il problema? I motori di ricerca (diversi da Google) si confondono quando c'è un'incoerenza tra l'attributo hreflang dichiarato e il linguaggio HTML per uno o più URL; è importante mantenere questi due attributi coerenti tra loro.
Come risolverlo: esamina le pagine interessate e modifica l'attributo della lingua HTML per assicurarti che rimanga coerente con l'attributo hreflang dichiarato.
7 -Hreflang su una pagina rotta
Qual è il problema? Un motore di ricerca non può restituire contenuti che non esistono! Pertanto, gli attributi hreflang che puntano a pagine morte verranno trascurati.
Come risolverlo: esamina le pagine interessate e modifica le annotazioni hreflang per assicurarti che si colleghino alle pagine di lavoro.
8 – Più di una pagina per la stessa lingua in hreflang
Qual è il problema? Quando uno o più URL fanno riferimento a due o più pagine per la stessa lingua (o posizione della lingua) nelle annotazioni hreflang, il motore di ricerca si confonde.
Come risolverlo: esamina le pagine interessate e rimuovi una delle annotazioni hreflang, in modo che venga referenziata una singola pagina per ogni lingua.
9 – Manca l'annotazione hreflang di X-default
Qual è il problema? Sebbene gli attributi hreflang di x-default siano facoltativi, sono consigliati come best practice SEO per tutte le annotazioni hreflang.
Come risolverlo: esamina le pagine interessate e assicurati che ciascuna disponga di un set di attributi hreflang "x-default" che punta a una pagina NON specifica per una lingua o una posizione particolare.
Hai ancora domande? Dai un'occhiata all'aggiornamento dell'algoritmo Core Web Vitals, che delinea ulteriori pratiche SEO tecnologiche su cui vorrai essere aggiornato quest'anno.
Problemi che Google potrebbe ignorare
Hai fatto la tua parte nel seguire le migliori pratiche, tuttavia, ci saranno momenti in cui i motori di ricerca ignoreranno determinati problemi. Ciò accade principalmente quando un motore di ricerca vede ripetutamente lo stesso problema e crede che possa essere giustificato dalla loro parte. Non sudare! Questo è davvero molto utile. Ecco una manciata di problemi con i tag hreflang che Google effettivamente "risolve" per te:
- Sottolineatura invece di un trattino: questo è un errore comune e Google ne tiene conto. Ogni. Separare. Volta.
- Usando en-UK invece di en-GB: ne abbiamo parlato prima... il fatto che i codici regionali non sono necessariamente intuitivi. Stai tranquillo, Google ti copre: il Regno Unito è un codice riservato, il che significa che Google corregge questo problema comune.
- L'hreflang non ha un autoreferenziazione: Google ha recentemente affermato che l'hreflang dell'autoreferenziazione è facoltativo; detto questo, rimane una buona pratica.
- URL relativi rispetto a assoluti: mentre sia canonical che hreflang possono utilizzare percorsi relativi, assoluto è più assoluto! Da qui la raccomandazione di usarlo quando possibile.
Reindirizzamento degli utenti: una parola di cautela
In molti casi, i siti Web reindirizzeranno gli utenti in base a una combinazione di cookie, indirizzo IP e/o lingua del browser; attenzione al reindirizzamento! Per gli utenti, questo può tradursi in un'esperienza frustrante (leggi sub-par); per i motori di ricerca, provare a indicizzare i tuoi contenuti diventa problematico. Inoltre, il reindirizzamento degli utenti può interrompere le connessioni stabilite necessarie per i tuoi tag hreflang.
Ecco cosa ha da dire Google sulla pratica:
Non utilizzare l'analisi IP per adattare i tuoi contenuti. L'analisi della posizione IP è difficile e generalmente non affidabile. Inoltre, Google potrebbe non essere in grado di eseguire correttamente la scansione delle varianti del tuo sito. La maggior parte, ma non tutte, le scansioni di Google provengono dagli Stati Uniti e non tentiamo di variare la località per rilevare le variazioni del sito. Utilizzare uno dei metodi espliciti mostrati qui (hreflang, URL alternativi e collegamenti espliciti).
Tratta i crawler dei motori di ricerca come faresti con un utente da qualsiasi luogo. Trattare il bot del motore di ricerca in modo diverso da come faresti con un utente è considerato cloaking: la pratica di presentare contenuti o URL diversi a utenti umani e motori di ricerca è una violazione delle Istruzioni per i webmaster di Google.
Vuoi una correzione approvata che fornisca agli utenti i risultati che si aspettavano? Utilizza la stessa logica di rilevamento per suggerire all'utente una versione migliore della pagina su un piccolo banner. L'unico avvertimento è che, se è troppo grande, potrebbe essere visto come un interstitial (facendo sì che il contenuto sia completamente o parzialmente oscurato per l'utente).
Suggerimento per professionisti di Hreflang
Esiste un'estensione di Google Chrome che automatizza il processo di verifica della distribuzione hreflang di un sito. Ottieni uno scoop su questo e altri componenti aggiuntivi SEO di Chrome che possono aiutarti a gestire la manutenzione SEO quotidiana.
Conclusione
Comprendere, utilizzare e risolvere i problemi di hreflang è un requisito per la SEO di oggi. Vuoi essere sicuro di fare tutto il possibile per aumentare la visibilità del tuo sito in ogni angolo del mondo? Victorious scava in profondità per scoprire le tendenze culturali locali e i modelli di acquisto che influenzano la ricerca per determinare la migliore strategia per la tua campagna SEO internazionale.
Pronto per iniziare con un'agenzia SEO? Iscriviti oggi alla tua consulenza SEO gratuita e lascia che Victorious ti guidi attraverso il processo.