onpage

Declara l'idioma de la pàgina

MetricSpot comprova si hi ha un atribut lang vàlid a <html>. Sense ell, els lectors de pantalla pronuncien malament, hreflang perd la seva àncora i els traductors endevinen.

Què comprova aquesta auditoria

Llegeix l’atribut lang de l’element arrel <html> i verifica que és un tag d’idioma vàlid de BCP 47 (en, en-US, es, de-AT, pt-PT). La comprovació falla quan:

  • L’atribut no hi és.
  • El valor és buit (lang="").
  • El valor no coincideix amb un subtag d’idioma conegut.

Per què importa

L’atribut lang és un dels guanys d’higiene HTML més barats: un atribut a un element. La seva absència trenca tres consumidors diferents alhora.

  • Els lectors de pantalla canvien de motor de veu / pronunciació segons lang. Una pàgina en francès amb lang="en" la llegeix la veu anglesa pronunciant malament cada paraula. NVDA, JAWS, VoiceOver i TalkBack es comporten així.
  • La traducció del navegador (la funció “Tradueix aquesta pàgina” de Chrome, el menú de traducció de Safari) fa servir lang com a idioma origen. Sense lang ha d’endevinar pel contingut, cosa que és més lenta i menys fiable en pàgines curtes.
  • Àncores hreflang. Les teves tags <link rel="alternate" hreflang="…"> necessiten una autodeclaració a la pàgina arrel: la documentació de Google recomana explícitament declarar lang a cada pàgina per corroborar la xarxa hreflang.
  • SEO. Google fa servir lang com un dels diversos senyals per decidir per a quin país/idioma fa aparèixer la pàgina. L’informe d’International Targeting de Search Console marca les pàgines sense lang.
  • Extracció d’IA. Els sistemes LLM multilingües troben el contingut amb l’idioma declarat com a pista. Un lang mal declarat baixa la puntuació de confiança del fragment.

Com solucionar-ho

Posa lang a l’element <html>. Fes servir un codi d’idioma de dues lletres per a contingut general, o idioma-regió si el contingut és específic d’una regió:

<!DOCTYPE html>
<html lang="ca">
…
<html lang="pt-PT">  <!-- portuguès europeu, diferent de pt-BR -->

Llocs multilingües: declara per pàgina. El lang de <html> ha de coincidir amb el contingut principal de la pàgina, no amb l’idioma per defecte del lloc. Si tens una traducció al castellà a /es/, aquesta pàgina necessita <html lang="es">, no <html lang="ca">.

Astro:

---
const { lang = "ca" } = Astro.props;
---
<html lang={lang}>

Després passa lang="es" des del teu layout en castellà.

Next.js (App Router):

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ca">
      <body>{children}</body>
    </html>
  );
}

Rutes per locale: divideix a app/[locale]/layout.tsx i llegeix el locale dels params.

WordPress: l’element <html> el genera la crida language_attributes() del teu tema, que llegeix l’idioma del lloc de Configuració → General. La plantilla ja ho fa: la fallada gairebé sempre vol dir que el tema ha sobreescrit header.php i ha eliminat la crida. Torna a afegir <html <?php language_attributes(); ?>>.

Contingut amb idiomes barrejats. Si un paràgraf o bloc està en un idioma diferent del de la pàgina, declara-ho en línia:

<p>Els francesos en diuen <span lang="fr">le mot juste</span>.</p>

Els lectors de pantalla canvien de veu per al span i després tornen a la d’abans.

Audita’t: DevTools → Console → document.documentElement.lang → ha de retornar "ca", no "".

Preguntes freqüents

Hauria de fer servir ca o ca-ES?

Fes servir ca llevat que el teu contingut sigui específicament català de Catalunya (o específicament valencià, balear, etc.) i això sigui rellevant per a traducció/pronunciació. ca cobreix totes les variants; ca-ES el limita. Per a la majoria de llocs, el tag més ampli és el correcte.

Quina diferència hi ha entre lang i xml:lang?

lang és per a HTML, xml:lang és per a XML (i XHTML). Les pàgines HTML5 modernes només necessiten lang. No afegeixis tots dos: és només soroll.

El meu CMS posa lang="es-ES" a tot arreu. Està malament?

No malament, només més estret del que cal. Per a llocs dirigits a Espanya, deixa-ho. Per a llocs amb audiències hispanoparlants globals, canvia a es simple.

Fonts

Última actualització 2026-05-11