Casa > Blog > Multilingue > Tag Hreflang: Guida definitiva su cosa sono e come usarli

Tag Hreflang: Guida definitiva su cosa sono e come usarli

Da Colin
Ultimo aggiornamento: 2 aprile 2024

Se stai costruendo un sito web multilingue, probabilmente hai già incontrato il termine tag hreflang. Infatti, probabilmente è per questo che stai leggendo questo articolo proprio ora.

Quindi, cos'è l'hreflang? E perché dovresti preoccuparti dei tag hreflang se stai usando più lingue sul tuo sito?

Bene, se continui a leggere, sarai in grado di rispondere a quelle domande, più a molte altre!

Nella nostra guida completa, imparerai tutto ciò che devi sapere sui tag hreflang, incluso quanto segue:

  • Cosa sono i tag hreflang?
  • Impatto della SEO Hreflang
  • Ecco alcuni esempi di hreflang di quando dovresti usarli
  • Implementazione hreflang, incluso un modo semplice per impostare i tag hreflang se si utilizza WordPress

Cominciamo!

Cosa sono i tag Hreflang?

I tag hreflang sono piccole porzioni di codice "dietro le quinte" che identificano la lingua e la località geografica di una pagina del tuo sito web.

I motori di ricerca possono utilizzare questi tag per comprendere il tuo sito e fornire i contenuti più pertinenti ai motori di ricerca.

Più specificamente, i tag hreflang consentono di collegare i contenuti tra loro in modo che i motori di ricerca possano capire che queste pagine sono connesse, ma si rivolgono a lingue o località diverse.

Per esempio, diciamo che hai una pagina in inglese a https://yoursite.com/hello-world/ e poi lo stesso contenuto tradotto in spagnolo a https://yoursite.com/es/hola-mundo/.

Con i tag hreflang, puoi dire ai motori di ricerca “Ehi, queste due pagine hanno lo stesso contenuto/scopo, ma una pagina è per i parlanti inglesi e l'altra è per i parlanti spagnoli”.

Puoi anche andare oltre solo lingua e indica inoltre ai motori di ricerca che le tue pagine sono mirate a diverse aree geografiche a scopo di localizzazione.

Ad esempio, “Ehi, queste due pagine hanno lo stesso contenuto e sono entrambe in inglese, ma una è per le persone negli Stati Uniti e l'altra è per le persone nel Regno Unito.”.

Ecco un esempio di come appaiono i tag hreflang nell'HTML del tuo sito:

Hreflang tags in website HTML <head> section

Impatto e importanza della SEO con Hreflang

Mentre i tag hreflang non sono un fattore di ranking SEO importante allo stesso modo dei backlink e della ricerca per parole chiave, usarli correttamente è una parte importante di SEO on-page per il multilingua o siti multi-sede.

Ci sono tre principali Vantaggi SEO dell'utilizzo dei tag hreflang.

1. Evitare problemi di contenuti duplicati

La prima è che hreflang aiuta a prevenire problemi di contenuto duplicato sul tuo sito. Ad esempio, supponiamo che tu abbia due quasi pagine di contenuto identiche, tranne per il fatto che una si rivolge a persone anglofone negli Stati Uniti e l'altra si rivolge a persone anglofone in Australia.

Aggiungendo il tag hreflang pertinente per lingua e locale, puoi chiarire ai motori di ricerca che queste pagine non sono contenuti duplicati, ma sono piuttosto ottimizzate per diversi pubblici.

Ottimizzare le pagine per diversi pubblici di ricerca

Continuiamo con l'esempio precedente. Oltre a prevenire problemi di contenuti duplicati, l'aggiunta del tag hreflang ai contenuti mirati per gli Stati Uniti e l'Australia assicura anche che tutti gli utenti trovino i contenuti ottimizzati per loro.

Fondamentalmente, Google può classificare la versione statunitense per le persone che cercano negli Stati Uniti e la versione australiana per le persone che cercano in Australia.

Ogni utente arriva alla pagina ottimizzata per lui, che può anche avere alcuni vantaggi SEO terziari aggiuntivi come un CTR più elevato, un bounce rate inferiore, ecc.

3. Beneficiare dei segnali di ranking condivisi

In un Q&A del 2017 con Gary Illyes di Google, Gary suggerisce che i tag hreflang possono anche avere un impatto più diretto sulla SEO perché le pagine che si trovano nello stesso cluster hreflang si condivideranno in parte i segnali di ranking reciproci.

Ad esempio, se hai molti link che puntano alla versione in lingua inglese della pagina, questi link possono avere un effetto positivo anche sulla versione in lingua spagnola della pagina (supponendo che entrambe le pagine siano raggruppate insieme utilizzando hreflang).

Non sappiamo come molto è condiviso, ed è improbabile che tu riceva tutto il “link juice”, per così dire. Ma anche un piccolo incremento dai segnali di ranking condivisi vale la pena di dedicare tempo a impostare correttamente i tag hreflang.

Hreflang fa bene alla SEO?

In sintesi, utilizzare correttamente il tag hreflang è vantaggioso per la SEO perché aiuta a ottimizzare l'indicizzazione del tuo sito da parte dei motori di ricerca e a creare la migliore esperienza possibile per gli utenti.

Google ha anche accennato al fatto che potrebbero esserci vantaggi più diretti, come pagine che si trovano nello stesso cluster hreflang che condividono segnali di ranking.

Un esempio reale di Hreflang: tre situazioni comuni

Abbiamo in un certo senso toccato questo argomento nella sezione precedente, ma esaminiamo alcuni esempi di quando potresti voler utilizzare il tag hreflang sul tuo sito.

Contenuti in diverse lingue

Se hai contenuti sul tuo sito che hai tradotto in più lingue, vorrai aggiungere il tag hreflang in modo che Google sappia che queste pagine sono associate l'una all'altra. Ovvero, è la stessa versione della pagina, solo in lingue diverse.

Contenuto nella stessa lingua ma per diverse localizzazioni

Come abbiamo accennato nella sezione SEO, potresti comunque voler utilizzare il tag hreflang anche se i tuoi contenuti sono nella stessa lingua. Ad esempio, se hai versioni diverse di una pagina per visitatori di lingua inglese dagli Stati Uniti, dal Regno Unito e dall'Australia, vorrai utilizzare i tag hreflang per specificare la localizzazione di ogni pagina.

Potreste essere curiosi riguardo le ragioni per implementare tag hreflang per contenuti identici in diverse località.

Oltre ai vantaggi SEO che abbiamo discusso sull'implementazione dei tag hreflang, i siti web possono garantire che gli utenti vengano indirizzati alla versione più pertinente di una pagina in base alla loro posizione.

Ciò è particolarmente importante per i siti di e-commerce, poiché consente loro di mostrare i prezzi nella valuta locale, di soddisfare le abitudini di acquisto locali e di offrire un'esperienza utente più personalizzata. Comprendere la valuta e le abitudini degli utenti in diverse località consente alle aziende di personalizzare le proprie offerte, promozioni e contenuti per risuonare meglio con ogni pubblico, migliorando infine il coinvolgimento degli utenti e aumentando le conversioni.

Pertanto, l'integrazione dei tag hreflang e la considerazione di diverse localizzazioni possono influire significativamente sulla visibilità, l'usabilità e, in ultima analisi, sul successo di un sito web nei mercati globali.

Contenuti su Domini/Sottodomini Diversi

In alcune situazioni, potresti creare siti multilingue separati utilizzando sottodomini o nomi di dominio completamente diversi. Ad esempio, iltuosito.com e yoursite.es.

Puoi ancora usare il tag hreflang per collegare i tuoi siti tra loro, anche se utilizzano nomi di dominio separati.

Suggerimenti generali per l'implementazione di Hreflang

Come aggiungere il tag hreflang al tuo sito dipenderà da come hai creato il tuo sito.

Ad esempio, hai programmato il tuo sito da zero? Oppure stai utilizzando un sistema di gestione dei contenuti self-hosted come WordPress o un website builder come Squarespace o Wix?

Se stai usando WordPress, è molto facile aggiungere il tag hreflang utilizzando un plugin come TranslatePress.

Per i website builder ospitati, la situazione è un po' mista. Alcuni website builder aggiungeranno automaticamente l'hreflang per te, mentre altri richiederanno di farlo manualmente.

Come si crea un tag Hreflang?

Prima di parlare dell'implementazione hreflang per piattaforme specifiche, parliamo di come creare un tag hreflang in generale.

Quando crei un tag hreflang, hai due opzioni:

  • Solo lingua – puoi specificare la lingua della pagina solo aggiungendo il suo codice di due lettere. Ad esempio, “questa è la versione in spagnolo della pagina”.
  • Lingua E impostazioni locali – puoi andare oltre la semplice lingua e specificare anche una localizzazione aggiungendo sia il codice della lingua che il codice della localizzazione. Ad esempio, “questa è la versione spagnola della pagina per persone in Messico” e “questa è la versione spagnola della pagina per persone in Spagna”.

Se hai più pagine nella stessa lingua che puntano a diverse località, dovrai specificarle entrambe utilizzando il tag hreflang.

Tuttavia, se stai creando solo un’unica pagina nella lingua per tutte le aree, puoi semplicemente specificare la lingua.

Il formato base del tag hreflang è questo:

<link rel="alternate" hreflang="[LANGUAGE]-[LOCALE]" href="[URL]" />

Ecco un esempio di hreflang che indica che la pagina è in inglese per tutte le località:

<link rel="alternate" hreflang="en" href="https://yoursite.com/hello-world/" />

Ed ecco un esempio che indica che la pagina è in spagnolo e per le persone in Messico

<link rel="alternate" hreflang="es-mx" href="https://yoursite.com/es/hola-mundo/" />

Ecco alcune note:

  • Codice paese e locale – per i codici del paese e della località, si desidera utilizzare i codici ISO a due lettere. Tutti i codici paese. Tutti i codici di lingua.
  • URL – assicurati di specificare l'URL completo, inclusa la parte HTTPS o HTTP.

Quanti tag Hreflang è necessario aggiungere?

Google dice che devi aggiungere Tutti i tag hreflang a ogni versione di un contenuto, inclusa la versione corrente.

Ad esempio, supponiamo che tu abbia tre versioni di una pagina:

  • Inglese
  • Parlanti spagnoli in Messico
  • Tedesco

Ogni versione includerebbe tutti e tre i tag in modo che Google sappia che sono tutti collegati in un cluster.

Ovvero, la versione inglese includerebbe ancora il tag hreflang inglese (quale è autoriferito in termini tecnici), così come i due tag hreflang per le altre versioni della pagina.

Ecco un esempio di come apparirebbero i tag hreflang per ogni pagina del cluster:

<link rel="alternate" hreflang="en" href="https://yoursite.com/hello-world/" />
<link rel="alternate" hreflang="es-mx" href="https://yoursite.com/es/hola-mundo/" />
<link rel="alternate" hreflang="de" href="https://yoursite.com/de/hallo-welt/" />

Se le pagine in un cluster hreflang non puntano l'una all'altra, Google potrebbe ignorare il tag hreflang, quindi è importante assicurarsi di aggiungere il tag hreflang ovunque sia necessario.

Google raccomanda anche di aggiungere una pagina “predefinita” per i visitatori che non utilizzano una delle lingue/località specificate.

Puoi impostare questo utilizzando il x-predefinito tag hreflang. Ecco un esempio:

<link rel="alternate" hreflang="x-default" href="https://yoursite.com/hello-world/" />

Dove si inserisce il tag Hreflang?

Ci sono due posti principali dove inserire il tag hreflang:

  1. HTML – inserisci i tag hreflang nella sezione del tuo sito..
  2. Mappa del sito – includi i tag hreflang nella tua sitemap XML che invii a Google e ad altri motori di ricerca.

Puoi anche aggiungere il tag hreflang con intestazioni HTTP, ma ciò è veramente necessario solo per file non HTML come PDF o altri documenti che stai ospitando sul tuo server.

Per ottenere i migliori risultati, probabilmente vorrai aggiungere il tag hreflang a entrambi la sitemap HTML e XML del tuo sito. Questo è ciò che fanno la maggior parte degli strumenti automatici (ne parleremo di più in seguito).

Ecco un hreflang esempio da Moodle per aggiungere codice alla sezione HTML di una pagina:

Hreflang tags in website HTML <head> section

Si può vedere che ci sono tag hreflang per cinque lingue diverse, più un'opzione predefinita.

Ed ecco un esempio di hreflang da una sitemap XML – puoi vedere che la sitemap include voci per tutte le diverse versioni nel cluster hreflang. In questo caso, si tratta di una versione per inglese-USA e una per spagnolo-Spagna:

Hreflang tags in XML sitemap

Come impostare Hreflang per diversi strumenti di creazione di siti web

Ora che abbiamo trattato alcuni suggerimenti generali sull'implementazione di hreflang, parliamo di come impostare i tag hreflang per piattaforme specifiche, tra cui:

  • WordPress
  • Squarespace
  • Wix
  • Webflow

Guida Hreflang per WordPress

Prima di iniziare il tutorial, ecco un breve video che spiega rapidamente il processo di aggiunta dei tag hreflang a WordPress:

Se vuoi aggiungere l'attributo hreflang a WordPress, puoi utilizzare il plugin TranslatePress.

TranslatePress offre tutto ciò di cui hai bisogno per creare un sito WordPress multilingue. Può aiutarti a tradurre i tuoi contenuti manualmente e/o automaticamente tramite Google Translate o DeepL. Quindi, creerà versioni ottimizzate per la SEO per ogni lingua, inclusa l'aggiunta automatica del tag hreflang pertinente.

Aggiungerà il tag hreflang sia nell'HTML di ogni pagina, sia in la tua XML sitemap da plugin SEO popolari come Yoast SEO.

I tag hreflang presenti in entrambe le schermate di esempio che vi abbiamo mostrato nella sezione precedente sono stati generati automaticamente da TranslatePress.

Per saperne di più, consulta la nostra guida al tag hreflang di WordPress. Abbiamo anche un tutorial su Come creare un sito WordPress multilingue con TranslatePress.

TranslatePress Multilingue

Il modo più semplice per aggiungere i corretti tag hreflang all'HTML e alla sitemap del tuo sito WordPress.

Guida Hreflang di Squarespace

Aggiungere hreflang dinamici a Squarespace è un po' complicato perché spesso richiede di aggiungere manualmente il tag hreflang alla tua pagina tramite codice personalizzato.

Puoi generare i tag hreflang corretti usando questo strumento generatore. A questo punto, dovrai utilizzare l'opzione "Codice personalizzato" di Squarespace per aggiungere quei tag alla sezione del tuo sito..

Se vuoi aggiungere il tag hreflang alla sitemap XML del tuo sito Squarespace, ciò richiederà anche un certo sforzo manuale. Puoi use Screaming Frog to crawl your Squarespace site and generate an XML sitemap. Then, you’ll need to manually edit that sitemap to include the hreflang tags.

Unfortunately, Squarespace just doesn’t do a good job of handling multilingual sites at this time, which is why the Squarespace hreflang implementation requires manual workarounds.

If you want a smoother multilingual experience, you can consider switching to WordPress.

Wix Hreflang Guide

Compared to Squarespace, Wix offers much stronger multilingual functionality. If you use Wix’s multilingual feature to create your multilingual site, Wix will automatically add the proper hreflang tags to your pages – there’s no need for any manual effort on your part.

Webflow Hreflang Guide

Webflow uses the same general approach as Squarespace, which means you’ll be responsible for manually setting up the proper hreflang tags if you’re creating a multilingual site.

That is, you’ll need to manually add the hreflang tags to each page’s <head> section and you’ll also need to manually construct your sitemap (using a tool like Screaming Frog) if you want to include hreflang tags in your sitemap.

Inizia oggi stesso con il tag Hreflang

If you have a multilingual website and/or a website that has different content for different geographic locales, it’s important to properly add the hreflang tag to your site to improve SEO and user experience.

The hreflang tag uses a simple syntax that you can add to your HTML’s <head> section and/or your XML sitemap. Just make sure to add tutto of the relevant hreflang tags to each page so that search engines can clearly see how all versions of the page connect.

If you’ve built your site with WordPress, the easiest way to get started with hreflang is to use the TranslatePress plugin.

If you use TranslatePress to create a multilingual site, it will automatically add the proper hreflang tags to your site’s HTML and XML sitemap – all without you ever needing to lift a finger.

To learn more about hreflang tags on WordPress, check out our WordPress hreflang tutorial.

And to learn how to use TranslatePress, check out our guide on how to create a multilingual WordPress site.

TranslatePress Multilingue

Il modo più semplice per aggiungere i corretti tag hreflang all'HTML e alla sitemap del tuo sito WordPress.

Do you still have any questions about the hreflang tag or how to use it? Let us know in the comments!

Se hai trovato utile questo post, ti invitiamo a visitare il nostro Canale YouTube, dove carichiamo costantemente brevi tutorial video facili da seguire. Puoi anche seguirci su Facebook e Twitter per essere tra i primi a sapere ogni volta che pubblichiamo.