Fer servir hreflang per a SEO internacional

Què comprova aquesta auditoria

Analitza cada etiqueta <link rel="alternate" hreflang="…" href="…"> del <head> de la pàgina (i del sitemap XML, si n’hi ha). La comprovació falla quan:

La pàgina té variants localitzades (altres URL servint el mateix contingut en un altre idioma) però no té declaracions hreflang.
Els valors d’hreflang no són etiquetes BCP 47 vàlides (en, en-US, es, de-AT, zh-Hant-TW).
La xarxa d’hreflang està trencada: A apunta a B, B no apunta a A.
Falta x-default (recomanat com a fallback internacional).

Per què importa

Google decideix quina URL mostrar per a una cerca fent coincidir l’idioma i la regió de l’usuari amb la xarxa d’hreflang. Sense ella, hi ha tres coses que fallen:

Posiciona la URL equivocada. Un usuari dels EUA cercant en anglès veu la teva pàgina en castellà (o al revés) perquè Google ha triat la URL amb més autoritat, no la del locale de l’usuari.
Penalitzacions per contingut duplicat. Dues URL amb contingut gairebé idèntic (mateix producte, copy traduït) competeixen entre elles. Google n’elimina una per evitar duplicats, de vegades l’errònia.
Cau el CTR. Fins i tot quan l’usuari arriba a la pàgina correcta, un snippet en anglès per a un usuari castellanoparlant redueix el click-through. Hreflang permet a Google mostrar el snippet localitzat.

L’hreflang és metadades sense opinió, no influeix en el rànquing, només encamina la URL correcta a l’usuari correcte.

Com solucionar-ho

Cada pàgina d’una xarxa multilingüe ha de:

Llistar totes les altres variants d’ella mateixa, incloent-se a si mateixa.
Aparèixer a la llista de cada altra variant.
Incloure x-default per a l’idioma/regió per defecte.

Exemple: anglès (per defecte EUA), castellà, alemany, x-default. A la pàgina anglesa:

<link rel="alternate" hreflang="en" href="https://example.com/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

Les mateixes quatre etiquetes han d’aparèixer a la pàgina castellana, l’alemanya i qualsevol altra variant. Les quatre pàgines declaren tota la xarxa, elles incloses.

Astro:

---
const locales = ["en", "es", "de"] as const;
const path = Astro.url.pathname.replace(/^\/(es|de)\//, "/");
---
{locales.map(loc => (
  <link rel="alternate" hreflang={loc}
    href={`${Astro.site}${loc === "en" ? "" : loc + "/"}${path.slice(1)}`} />
))}
<link rel="alternate" hreflang="x-default" href={`${Astro.site}${path.slice(1)}`} />

Next.js:

// app/[locale]/page.tsx
export async function generateMetadata({ params }: { params: { locale: string }}) {
  const path = "/"; // o la ruta del teu route
  return {
    alternates: {
      canonical: `https://example.com${path}`,
      languages: {
        en: `https://example.com${path}`,
        es: `https://example.com/es${path}`,
        de: `https://example.com/de${path}`,
        "x-default": `https://example.com${path}`,
      },
    },
  };
}

WordPress, Polylang i WPML emeten hreflang automàticament un cop has enllaçat cada traducció. WordPress Multisite necessita el plugin HREFLang Tags Lite o equivalent.

Hreflang via sitemap, per a llocs amb milers d’URL localitzades, declarar hreflang al sitemap és més net que fer-ho a l’HTML de cada pàgina:

<url>
  <loc>https://example.com/</loc>
  <xhtml:link rel="alternate" hreflang="en" href="https://example.com/"/>
  <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/"/>
  <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/"/>
  <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/"/>
</url>

Prova-ho. Google Search Console → Insights → Segmentació internacional marca enllaços de retorn que falten i etiquetes invàlides. Fes servir hreflang.org o el validador d’hreflang de Merkle per a una verificació puntual.

Preguntes freqüents

`en` vs `en-US` vs `en-GB`?

Fes servir l’etiqueta més àmplia que encaixi. en cobreix tots els angloparlants; en-US apunta específicament a anglès dels EUA. Si serveixes contingut idèntic a usuaris del Regne Unit i dels EUA, declara en una sola vegada, no en-US i en-GB per separat, que dilueixen el senyal i sumen manteniment.

Necessito hreflang si el meu lloc és monolingüe?

No. L’hreflang només és útil quan tens URL alternatives en altres idiomes. Un lloc monolingüe necessita <html lang="…"> (vegeu declarar idioma de la pàgina) però no hreflang.

Per a què serveix `x-default`?

És el fallback. Quan l’idioma de l’usuari no coincideix amb cap hreflang declarat, Google l’encamina a la URL x-default. Habitualment és la pàgina d’inici en anglès o una pàgina selector d’idioma.