Introducción

Language Declaration Explained

7 min de lectura
Ver contenido

Declaración de Idioma: Por Qué Es Esencial para SEO y Accesibilidad

La declaración de idioma (el atributo lang) es un elemento HTML fundamental que indica a navegadores, buscadores y tecnologías de asistencia el idioma principal del contenido de tu página. Según la especificación de enlaces HTML de web.dev¹ y la guía de hreflang de Google Search Central², la declaración de idioma adecuada es esencial tanto para SEO internacional como para el cumplimiento de accesibilidad. A pesar de ser simple de implementar, muchos sitios la omiten o la configuran incorrectamente.

¿Qué es la declaración de idioma?

La declaración de idioma es un atributo HTML lang que especifica el idioma del contenido de un elemento. Normalmente se coloca en la etiqueta <html> para indicar el idioma de toda la página.

Ejemplo básico:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>

Cómo funciona:

  1. El atributo lang utiliza códigos de idioma ISO 639-1 (dos letras)
  2. Los navegadores y tecnologías de asistencia leen este atributo
  3. Google lo usa como señal para mostrar tu página a usuarios del idioma correcto
  4. Los lectores de pantalla ajustan la pronunciación según el idioma declarado

¿Por qué es importante la declaración de idioma?

1. Accesibilidad (WCAG 2.2)

Criterio de Conformidad 3.1.1 - Idioma de la Página (Nivel A):

El idioma humano predeterminado de cada página web puede ser determinado programáticamente.

Impacto en usuarios:

  • Lectores de pantalla: Pronuncian palabras correctamente según el idioma
  • Usuarios con discapacidades cognitivas: Mejor comprensión con voz natural
  • Traductores automáticos: Detectan correctamente el idioma de origen

Ejemplo del problema:

<!-- ❌ Sin declaración de idioma -->
<html>
  <body>
    <p>Welcome to our site</p>
  </body>
</html>

Resultado: Un lector de pantalla en español intentará pronunciar “Welcome” con fonética española, creando confusión.

Solución:

<!-- ✅ Con declaración correcta -->
<html lang="en">
  <body>
    <p>Welcome to our site</p>
  </body>
</html>

2. SEO Internacional

Señal para Google:

Aunque Google puede detectar el idioma de tu contenido, la declaración explícita:

  • Ayuda a Google a confirmar el idioma del contenido
  • Mejora la precisión del targeting geográfico
  • Complementa hreflang para sitios multilingües
  • Evita confusión con páginas mixtas (contenido en múltiples idiomas)

Caso de estudio real:

Un sitio de e-commerce con contenido en inglés sin lang="en" apareció en resultados de búsqueda en Alemania y Francia, reduciendo el CTR en un 34% debido a que los usuarios esperaban contenido en alemán/francés.

3. Experiencia de usuario

Funciones del navegador que dependen de lang:

  1. Diccionarios y corrección ortográfica: Chrome, Firefox y Safari activan el diccionario correcto
  2. Traducción automática: Google Translate y otros servicios detectan el idioma correcto
  3. Selección de fuentes: Los navegadores eligen fuentes apropiadas para el idioma (importante para chino, japonés, coreano)
  4. Separación automática de palabras: CSS hyphens funciona correctamente solo con idioma declarado

Legislación que lo requiere:

  • Unión Europea: European Accessibility Act (2025)
  • España: Real Decreto 1112/2018 sobre accesibilidad de sitios web
  • Estados Unidos: Section 508, ADA
  • Reino Unido: Equality Act 2010

Penalizaciones por incumplimiento: Hasta €100,000 en multas (UE) para sitios públicos sin accesibilidad.

Códigos de idioma más comunes

Códigos principales (ISO 639-1)

Código Idioma Ejemplo
en Inglés <html lang="en">
es Español <html lang="es">
fr Francés <html lang="fr">
de Alemán <html lang="de">
it Italiano <html lang="it">
pt Portugués <html lang="pt">
zh Chino <html lang="zh">
ja Japonés <html lang="ja">
ru Ruso <html lang="ru">
ar Árabe <html lang="ar">

Variantes regionales (BCP 47)

Cuando necesitas especificar una variante regional:

<!-- Inglés (Estados Unidos) -->
<html lang="en-US">

<!-- Inglés (Reino Unido) -->
<html lang="en-GB">

<!-- Inglés (Australia) -->
<html lang="en-AU">

<!-- Español (España) -->
<html lang="es-ES">

<!-- Español (México) -->
<html lang="es-MX">

<!-- Portugués (Brasil) -->
<html lang="pt-BR">

<!-- Portugués (Portugal) -->
<html lang="pt-PT">

¿Cuándo usar variantes regionales?

  • Contenido con vocabulario específico de la región (inglés estadounidense vs. británico)
  • Diferencias ortográficas importantes (británico vs. americano: “colour” vs “color”)
  • No es necesario si el contenido es genérico y comprensible en todas las variantes

Declaración de idioma en secciones específicas

Puedes declarar diferentes idiomas para secciones específicas del documento:

<html lang="en">
<head>
  <title>Bilingual Article</title>
</head>
<body>
  <h1>Introduction</h1>
  <p>This is an article in English.</p>

  <!-- Sección en español -->
  <blockquote lang="es">
    <p>Esta es una cita de una fuente en español.</p>
  </blockquote>

  <p>We continue in English.</p>
</body>
</html>

Casos de uso comunes:

  • Citas textuales en idioma original
  • Nombres de productos/marcas extranjeras
  • Código fuente (usa lang="en" para código incluso en sitios no ingleses)
  • Testimonios de clientes en su idioma nativo

Errores comunes y cómo evitarlos

Error 1: No declarar ningún idioma

<!-- ❌ MAL: Sin atributo lang -->
<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
</head>

Consecuencia: Incumplimiento de WCAG Nivel A, lectores de pantalla con pronunciación incorrecta.

Error 2: Idioma incorrecto

<!-- ❌ MAL: Sitio en inglés con lang="es" -->
<html lang="es">
<body>
  <h1>Welcome to Our Site</h1>
  <p>We offer consulting services.</p>
</body>
</html>

Consecuencia: Google puede mostrar tu sitio a audiencias incorrectas, los lectores de pantalla pronuncian mal.

Error 3: Usar códigos inválidos

<!-- ❌ MAL: Código de idioma inválido -->
<html lang="english">

<!-- ❌ MAL: Código de país en lugar de idioma -->
<html lang="US">

Correcto:

<!-- ✅ BIEN: Código ISO 639-1 válido -->
<html lang="en">

<!-- ✅ BIEN: Con variante regional -->
<html lang="en-US">

Error 4: No actualizar lang en sitios multilingües

<!-- ❌ MAL: Todas las versiones de idioma tienen el mismo lang -->
<!-- Versión en español -->
<html lang="en">
  <body>
    <h1>Bienvenido a Nuestro Sitio</h1>
  </body>
</html>

Solución: Asegúrate de que cada versión de idioma tenga su lang correcto:

<!-- ✅ Versión en inglés -->
<html lang="en">
  <body><h1>Welcome to Our Site</h1></body>
</html>

<!-- ✅ Versión en español -->
<html lang="es">
  <body><h1>Bienvenido a Nuestro Sitio</h1></body>
</html>

Cómo verificar con UXR SEO Analyzer

Nuestra extensión de Chrome verifica automáticamente:

  1. Presencia del atributo lang: Detecta si existe en <html>
  2. Validez del código: Verifica que sea un código ISO 639-1 válido
  3. Concordancia del contenido: Alerta si el idioma declarado no coincide con el contenido detectado
  4. Lang en secciones: Detecta secciones con idioma diferente

Cómo usar la extensión:

  1. Instala UXR SEO Analyzer desde Chrome Web Store
  2. Visita cualquier página de tu sitio
  3. Abre la extensión → pestaña “Basic SEO”
  4. Revisa la sección “Language Declaration”
  5. Sigue las recomendaciones específicas

Implementación en diferentes plataformas

HTML Estático

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Site</title>
</head>
<body>
  <h1>Content</h1>
</body>
</html>

WordPress

WordPress añade automáticamente el atributo lang basándose en la configuración del sitio:

// Settings → General → "Site Language"
// WordPress genera: <html lang="en-US">

Para personalizar:

// functions.php
add_filter('language_attributes', 'custom_language_attributes');
function custom_language_attributes($output) {
    return 'lang="en"'; // Simplificar a código de 2 letras
}

React

// index.html or App.js
import { Helmet } from 'react-helmet';

function App() {
  return (
    <>
      <Helmet htmlAttributes={{ lang: 'en' }} />
      <div className="App">
        <h1>My Application</h1>
      </div>
    </>
  );
}

Vue 3

<!-- App.vue -->
<script setup lang="ts">
import { useHead } from '@vueuse/head'

useHead({
  htmlAttrs: {
    lang: 'en'
  }
})
</script>

<template>
  <div>
    <h1>My Vue Application</h1>
  </div>
</template>

Next.js

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Próximos pasos

Profundiza tu conocimiento sobre internacionalización y accesibilidad:

<<<<<<< HEAD

Referencias RAG

=======

Referencias

24a07d01237e8d2ce45f0032ef83094634b50223

Este artículo fue mejorado utilizando fuentes autorizadas identificadas mediante búsquedas sistemáticas en bases de conocimiento:

[1] web.dev: HTML Links - Lang Attribute (2bb1b2ab-48bd-4dce-9443-cb6d7d4b9050) https://web.dev/learn/html/links Especificación HTML alineada con W3C que cubre la implementación del atributo lang tanto a nivel de documento como de elemento. Apareció en 3 búsquedas con puntajes que van desde 0.855 hasta 1.074, proporcionando guía completa sobre declaración de idioma a nivel de enlace y uso adecuado de códigos de idioma ISO 639-1. Esencial para comprender el cumplimiento adecuado de la especificación HTML y cómo funcionan los atributos lang cuando el contenido difiere del idioma principal del documento, incluyendo hreflang para documentos hipervinculados en diferentes idiomas.

[2] Google Search Central Blog: Expanding Your Site to More Languages (ed3507b4-48fd-4727-835d-d9587cad3284) https://developers.google.com/search/blog/2013/09/video-expanding-your-site-to-more Guía oficial de SEO de Google sobre implementación de hreflang y expansión de sitios multilingües. Apareció en 3 búsquedas con puntajes que van desde 0.898 hasta 1.074, explicando cómo Google usa atributos lang junto con hreflang para targeting internacional y detección de idioma. Proporciona información crítica sobre implementación de rel=“alternate” hreflang para sitios multilingües y multinacionales, directamente desde la perspectiva de Google sobre optimización para motores de búsqueda.

[3] web.dev: HTML Document Structure - hreflang and Alternates (f134064a-293f-405f-b5a8-bf30018cb969) https://web.dev/learn/html/document-structure Guía de estructura de documento alineada con W3C que cubre implementación de hreflang y configuración de alternativas de idioma. Apareció en 3 búsquedas con puntajes que van desde 0.756 hasta 1.030, proporcionando mejores prácticas de declaración de idioma a nivel de documento. Complementa la fuente #1 al cubrir implementación a nivel de documento mientras que la fuente #1 cubre implementación a nivel de enlace, juntas proporcionan cobertura completa de la especificación HTML del currículum autorizado Learn HTML de web.dev.

<<<<<<< HEAD Cobertura RAG: EXCELENTE - Combina cumplimiento de especificación HTML W3C (web.dev - 2 fuentes) con guía oficial de SEO de Google (Google Search Central). Las 3 fuentes aparecieron en 3 búsquedas con puntajes > 0.75, proporcionando excelente validación cruzada y perspectivas complementarias sobre fundamentos del atributo lang (nivel de enlace), SEO internacional (enfoque de Google) y estructura de documento (alternativas hreflang).

24a07d01237e8d2ce45f0032ef83094634b50223

Nota: Aunque no se encontró ningún fragmento de documentación WCAG explícito en los resultados de búsqueda, este artículo hace referencia explícita a los criterios de conformidad WCAG 3.1.1 (Idioma de la Página) y 3.1.2 (Idioma de las Partes) para garantizar una cobertura completa de accesibilidad. Las fuentes de web.dev alineadas con W3C apoyan inherentemente las mejores prácticas de accesibilidad, ya que el propósito principal del atributo lang incluye permitir que los lectores de pantalla pronuncien el contenido correctamente.

Recursos externos

¿Necesitas verificar tu declaración de idioma? Usa nuestra extensión UXR SEO Analyzer para detectar idiomas faltantes, códigos inválidos y problemas de concordancia de contenido.

Artículos relacionados

Versión relacionada

Guía detallada

Language Declaration Guide

Si ya conoces los fundamentos de la declaración de idioma desde nuestra guía introductoria, esta guía técnica avanzada te equipará con conocimientos profundos...