onpage

Declara el idioma de la página

MetricSpot comprueba que <html> tenga un atributo lang válido. Sin él, los lectores pronuncian mal, hreflang pierde su ancla y la traducción adivina.

Qué comprueba esta auditoría

Lee el atributo lang del elemento raíz <html> y verifica que sea una etiqueta de idioma BCP 47 válida (en, en-US, es, de-AT, pt-PT). La comprobación falla cuando:

  • El atributo falta.
  • El valor está vacío (lang="").
  • El valor no coincide con un subtag de idioma conocido.

Por qué importa

El atributo lang es una de las victorias de higiene HTML más baratas — un atributo en un elemento — pero su ausencia rompe a la vez a tres consumidores distintos.

  • Los lectores de pantalla cambian de voz / motor de pronunciación según lang. Una página en francés con lang="en" se lee con la voz inglesa pronunciando mal cada palabra. NVDA, JAWS, VoiceOver y TalkBack se comportan así.
  • La traducción del navegador (el “Traducir esta página” de Chrome, el menú de traducción de Safari) usa lang como idioma de origen. Sin lang tiene que adivinarlo a partir del contenido, lo que es más lento y menos fiable en páginas cortas.
  • Anclas de hreflang. Tus etiquetas <link rel="alternate" hreflang="…"> necesitan una autodeclaración en la página raíz: la documentación de Google recomienda explícitamente declarar lang en cada página para corroborar la red de hreflang.
  • SEO. Google usa lang como una de las señales para decidir en qué país/idioma muestra la página. El informe de Segmentación internacional de Search Console marca las páginas sin lang.
  • Extracción por IA. Los sistemas multilingües de LLM fragmentan el contenido usando el idioma declarado como pista. Un lang mal declarado baja la puntuación de confianza del fragmento.

Cómo solucionarlo

Define lang en el elemento <html>. Usa un código de idioma de dos letras para contenido general, o idioma-region si tu contenido es específico de una región:

<!DOCTYPE html>
<html lang="es">
…
<html lang="pt-PT">  <!-- portugués europeo, distinto de pt-BR -->

Sitios multi-idioma — declara por página. El lang de <html> debe coincidir con el contenido principal de la página, no con el idioma por defecto del sitio. Si tienes una traducción al inglés en /en/, esa página necesita <html lang="en">, no <html lang="es">.

Astro:

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

Luego pasa lang="en" desde tu layout en inglés.

Next.js (App Router):

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

Para rutas por locale: divide en app/[locale]/layout.tsx y lee el locale desde los params.

WordPress: el elemento <html> lo genera la llamada language_attributes() de tu tema, que lee el idioma del sitio desde Ajustes → Generales. La plantilla ya lo hace: el fallo casi siempre significa que el tema sobreescribió header.php y eliminó la llamada. Vuelve a añadir <html <?php language_attributes(); ?>>.

Contenido en idiomas mezclados. Si un párrafo o bloque está en un idioma distinto al de la página, declara el idioma inline:

<p>Los franceses lo llaman <span lang="fr">le mot juste</span>.</p>

El lector de pantalla cambia de voz para ese fragmento y vuelve después.

Audítalo tú: DevTools → Consola → document.documentElement.lang → debería devolver "es", no "".

Preguntas frecuentes

¿Uso es o es-ES?

Usa es salvo que tu contenido sea específicamente español de España (o de México, Argentina, etc.) y eso importe para la traducción o la pronunciación. es cubre todas las variantes; es-ES la restringe. Para la mayoría de sitios, la etiqueta más amplia es la correcta.

¿Cuál es la diferencia entre lang y xml:lang?

lang es para HTML, xml:lang para XML (y XHTML). Las páginas modernas en HTML5 solo necesitan lang. No añadas ambos: es solo ruido.

Mi CMS pone lang="es-ES" por todas partes. ¿Está mal?

No está mal; es solo más restrictivo de lo necesario. Para sitios dirigidos a España, déjalo. Para sitios con audiencia hispanohablante global, cámbialo a es a secas.

Fuentes

Última actualización 2026-05-11