Hreflang: què és i com implementar-lo

Hreflang: què és i com implementar-lo
David Kaufmann
Tutorials SEO
7 min read

Estem dominant un mercat amb el nostre producte/servei i ens preparem per expandir-lo internacionalment. El procés sembla senzill però hem de parar atenció a una sèrie de detalls si volem fer-ho bé i aconseguir els resultats desitjats. En aquesta guia veuràs com implementar les etiquetes Hreflang per a la teva estratègia de SEO Internacional.

Què són les etiquetes Hreflang?

Les etiquetes Hreflang són fragments de codi que apareixen a la capçalera de les pàgines amb el propòsit d'indicar a Google les versions en altres idiomes de les nostres pàgines.

Sembla obvi però hi ha molts casos en què les empreses tradueixen els seus continguts però després obliden afegir les etiquetes hreflang i llavors es donen típicament dos escenaris:

  • En el millor dels casos, Google no rastreja el contingut.
  • En el pitjor dels casos, Google el rastreja i, en veure que és contingut duplicat, no només no el mostra als resultats de cerca sinó que també disminueix l'"autoritat" general del lloc web.

En paraules de Google:

"Les versions localitzades d'una pàgina només es consideren duplicades si el seu contingut principal no està traduït."

Maneres de dur a terme la implementació

Tal com Google indica a les seves guies oficials, actualment hi ha tres maneres d'implementar etiquetes que indiquin que una pàgina té versions alternatives en altres idiomes:

Etiquetes HTML (recomanat)

Una de les maneres més comunes d'indicar que una pàgina té equivalents en altres idiomes són les etiquetes HTML a la capçalera:

<link rel="alternate" hreflang="codi_idioma" href="url_pagina" /> Imaginem que tenim una web principal (en anglès), que també està disponible en altres països i idiomes (Regne Unit, EUA i Alemanya). En aquest cas, hauríem d'afegir el codi següent a la capçalera de cada pàgina: <head> <title>Widgets, Inc</title> <link rel="alternate" hreflang="en-gb" href="http://en-gb.example.com/page.html" /> <link rel="alternate" hreflang="en-us" href="http://en-us.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> <link rel="alternate" hreflang="de" href="http://de.example.com/page.html" /> <link rel="alternate" hreflang="x-default" href="http://www.example.com/" /> </head> D'aquesta manera, indicarem als cercadors que les altres pàgines no són duplicades sinó que són les traduccions del lloc web en altres idiomes.

HTTP Headers

Si el que volem fer és indicar les versions en altres idiomes de documents i altres fitxers que no són HTML, tenim a la nostra disposició els HTTP headers:

En el cas següent, es tracta d'un document PDF que està disponible en anglès, en alemany per a usuaris a Suïssa i l'altre per a tots els usuaris que parlen alemany.

Link:

<http://example.com/file.pdf>; rel="alternate"; hreflang="en", <http://de-ch.example.com/file.pdf>; rel="alternate"; hreflang="de-ch", <http://de.example.com/file.pdf>; rel="alternate"; hreflang="de"

Sitemap

Una altra manera que molts llocs web han fet servir al llarg del temps és indicar les versions internacionals a través del Sitemap. Cal destacar que aquest és un mètode molt més complex a nivell tècnic i més susceptible a errors, ja que és molt fàcil ometre algunes de les pàgines.

Exemple d'un sitemap amb una pàgina:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://www.example.com/english/page.html&lt;/loc> <xhtml:link rel="alternate" hreflang="de" href="http://www.example.com/deutsch/page.html"/> <xhtml:link rel="alternate" hreflang="de-ch" href="http://www.example.com/schweiz-deutsch/page.html"/> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/english/page.html"/> </url> EINA: Aquesta extensió de Chrome ens permet validar les implementacions. Tot i així, no t'oblidis de comprovar-les manualment al codi per verificar-les al 100%.

Href Lang Tag Checker
Href Lang Tag Checker

Amb aquesta extensió, podem comprovar les nostres implementacions d'etiquetes hreflang.

Codis d'idioma i regió

Un cop hem vist el tema del marcatge de dades internacionals, passem a un dels temes més interessants en el procés de SEO Internacional. Es tracta dels codis d'idioma i regió. Fins fa poc, no hi havia abundant informació sobre el tema i no era gens fàcil evitar errors al marcatge d'idiomes i països.

Cada país i cada idioma és un món per si sol. Tots tenen les seves diferències, peculiaritats, cultures, valors... i és per això que molts negocis s'hi adapten per intentar oferir contingut de la manera més nadiua possible. Un exemple clar es dona entre el castellà parlat a Espanya i el parlat a Mèxic. Tot i compartir moltes expressions, n'hi ha d'altres que no s'assemblen gens i als usuaris de cada país els agrada trobar la versió que els és més familiar.

Google posa a disposició la possibilitat d'afegir codis d'idioma i regió a les etiquetes hreflang.

Per exemple:

  • de: aquest contingut estaria destinat als usuaris que parlen alemany independentment de la seva regió.
  • es-MX: aquest contingut estarà destinat als usuaris que parlen castellà i a més són de Mèxic.
  • en-GB: aquest contingut estarà destinat als usuaris que parlen anglès al Regne Unit.

hreflang SEO
hreflang SEO

*Exemple d'etiquetes hreflang a Chess.com (un dels nostres clients més grans) amb alguns dels idiomes disponibles (+40 en total). *

Què passa si no marquem tots els països en què es pot parlar un idioma?

Lògicament, això és inviable d'afegir. És per això que tenim l'etiqueta: hreflang="x-default", que ens permetrà servir aquesta versió a l'usuari quan la configuració del seu navegador no coincideixi amb cap dels idiomes o regions que hem indicat.

<link rel="alternate" href="http://example.com/" hreflang="x-default" />

Errors comuns

Sona fàcil, oi? L'únic detall important és que Google és força meticulós amb les implementacions. Si ens equivoquem en una lletra o ens deixem un enllaç, retornarà un error i no acceptarà el nostre marcatge. Tot seguit pots veure alguns dels errors més comuns que solen ocórrer (i alguns de la nostra pròpia experiència):

Oblidar enllaços recíprocs

Si la nostra pàgina A té un enllaç hreflang a la pàgina B però aquesta no retorna un altre enllaç hreflang a la pàgina A, Google no crearà l'associació i, per tant, continuarà detectant aquestes pàgines com a duplicades.

Canviar codis de regió o país

Mentre que a les URLs tenim flexibilitat per utilitzar els codis que vulguem, per exemple utilitzant uk, gb o qualsevol altra variació per al Regne Unit, no passa el mateix amb les etiquetes hreflang. Si utilitzem uk en lloc del correcte en-GB, Google no podrà interpretar la informació i, per tant, no validarà la implementació.

En aquest cas, per assegurar-nos d'utilitzar sempre formats correctes, hem de seguir els formats:

  • ISO 639-1
  • ISO 3166-1 Alpha 2 (opcional)

Analitzant les etiquetes hreflang d'un lloc web

Fins fa unes setmanes, Google Search Console mostrava un informe detallat de les validacions i errors de la nostra implementació hreflang. No obstant això, amb el llançament de la nova interfície, aquesta funcionalitat s'està quedant obsoleta i aviat ja no estarà disponible.

En aquest cas, malgrat que hi ha desenes d'eines SEO a la xarxa per treballar aquest tema, des del nostre punt de vista, l'eina #1 que fa aquest procés ràpid i fàcil d'analitzar és sens dubte Screaming Frog. No només ens diu totes les URLs que ha detectat amb marcatge sinó que també les classifica si tenen errors i ens diu exactament quin tipus d'error tenen perquè ho puguem validar.

Hreflang Screaming Frog
Hreflang Screaming Frog

Vista de l'anàlisi Hreflang feta per Screaming Frog amb tota la informació en format schema.

Casos d'èxit

Tot i que la majoria d'accions SEO requereixen un cert temps abans de mostrar els primers resultats, les etiquetes hreflang són segurament un d'aquells quick-wins que hem d'implementar tan aviat com sigui possible en aquells projectes on sigui possible. Un dels casos d'èxit SEO més clars d'això va ser ChessKid.com, un dels nostres clients, que tenia el lloc web traduït a gairebé 20 idiomes. El problema? No tenia els hreflang implementats i a més amagava el canvi d'idioma darrere d'un login, així que les versions internacionals eren totalment inaccessibles.

Què vam fer?

  • Crear un desplegable amb els idiomes al peu de pàgina.
  • Afegir etiquetes hreflang a totes les pàgines que ho requerien.

Els resultats?

Ahrefs SEO
Ahrefs SEO

Resultats de les implementacions d'etiquetes Hreflang a ChessKid.com

Tens dubtes? Vols que t'ajudem a implementar les etiquetes hreflang al teu negoci? Estarem encantats d'ajudar-te!

Referències

Автор: David Kaufmann

David Kaufmann

He passat els últims 10+ anys completament obsessionat amb el SEO — i sincerament, no ho canviaria per res.

La meva carrera va fer un salt qualitatiu quan vaig treballar com a especialista SEO sènior a Chess.com — un dels 100 webs més visitats de tot Internet. Operar a aquesta escala em va ensenyar coses que cap curs ni certificació podrien transmetre.

D'aquella experiència vaig fundar SEO Alive — una agència per a marques que es prenen seriosament el creixement orgànic. I com que no trobava cap eina que gestionés bé tant el SEO clàssic com el món de la IA, vaig construir SEOcrawl. Si busques un partner SEO sènior que s'estimi aquest sector de debò — m'encantarà parlar amb tu!

→ Читайте всі статті від David
Більше статей: David Kaufmann

Дізнайтесь більше контенту цього автора