Implementación de hreflang para sitios multilingües: errores comunes y cómo corregirlos
Hreflang indica a los motores de búsqueda qué página corresponde a cada idioma y región. La configuración correcta, un ejemplo con Next.js y los errores que la rompen.
Respuesta directa
Hreflang es una anotación, una etiqueta <link>, una cabecera HTTP o una entrada del sitemap, que indica a los motores de búsqueda qué URL corresponde a un idioma y una región determinados. Si está bien hecho, un visitante francés llega a la página en francés en lugar de a la página en inglés. Google admite tres formas equivalentes de añadirlo: etiquetas HTML, cabeceras HTTP o tu sitemap XML. La parte que casi todos los sitios multilingües hacen mal no es la sintaxis. Es el requisito de que cada página del conjunto debe enlazar de vuelta a todas las demás. Si eso falla, Google ignora todo el clúster, no solo el par roto. A continuación: la configuración, un ejemplo con el App Router de Next.js y los fallos concretos que conviene revisar antes de publicar un nuevo idioma.
Antes de empezar
Hreflang es una pista, no una garantía. Google ha dicho directamente que no usa hreflang, ni el atributo HTML lang, para detectar en qué idioma está escrita realmente una página. Usa sus propios algoritmos para eso y trata hreflang como una señal más entre varias, junto con tus etiquetas canónicas, la estructura del sitio y la similitud de contenido. Una implementación correcta mejora las probabilidades de que aparezca la versión correcta en los resultados. No fuerza el resultado.
Necesitas hreflang cuando ofreces el mismo contenido en dos o más idiomas o variantes regionales en URLs distintas. Ese es el caso del propio sitio de Kallos Labs, que funciona en inglés, español y griego. Un sitio de un solo idioma no lo necesita, y tampoco lo necesita un contenido que solo varía en moneda o envío en lugar de idioma.
Elige tu método de implementación antes de tocar el código. Las etiquetas <link> en el head de la página funcionan bien para un puñado de idiomas en un sitio pequeño, pero el número de etiquetas crece con cada idioma que añades, porque cada página necesita una etiqueta por cada idioma, incluido el suyo propio. Las cabeceras HTTP Link importan para archivos que no son HTML; un PDF o una imagen no puede llevar una etiqueta <link> en un <head> que no existe. Un enfoque basado en el sitemap centraliza toda la relación en un solo archivo en lugar de saturar cada página, lo cual es el camino más manejable una vez que superas los tres o cuatro idiomas. Para las comprobaciones técnicas relacionadas (rastreabilidad, datos estructurados, Core Web Vitals) que suelen revisarse junto con hreflang, consulta nuestra auditoría técnica SEO para Next.js.
Hreflang se aplica a más tipos de página de los que los equipos suelen prever. Las páginas de categoría o de listado paginadas necesitan el mismo tratamiento de autorreferencia y reciprocidad que cualquier otra URL: la página 2 de una categoría en inglés enlaza a la página 2 de esa categoría en español, no a la página de inicio en español. Las URLs con parámetros (orden, filtros) generalmente no deberían llevar hreflang en absoluto; apunta la canónica a la URL limpia y deja que hreflang viva solo ahí. Las páginas de productos sin stock o de temporada siguen necesitando sus anotaciones de idioma mientras la URL siga activa. Quitar hreflang en el momento en que un producto se agota, y volver a añadirlo después, es una forma habitual de que los clústeres se desincronicen. Nada de esto aplica a las aplicaciones móviles nativas, que usan la segmentación por idioma de las tiendas de aplicaciones y señales de indexación de apps en lugar de hreflang.
Paso a paso
Primero, acierta con el código de idioma. Los valores de hreflang siguen estándares ISO: un código de idioma ISO 639-1 de dos letras, seguido opcionalmente de un guion y un código de región ISO 3166-1 Alpha-2. El código de idioma siempre va primero. en-GB es inglés británico válido. Un código de región suelto como uk no lo es, y tampoco lo es una seudorregión como EU o una variante regional no admitida como es-419, según la propia documentación de Google.
Añade autorreferencia y enlaces reciprocos. Cada página del clúster debe listarse a sí misma, además de cada otra versión de idioma. Si tu página en inglés enlaza a tu página en español, la página en español tiene que enlazar de vuelta. La indicación de Google es tajante aquí: si dos páginas no se enlazan mutuamente, las etiquetas se ignoran para ese par, no solo se degradan.
Añade x-default. El valor reservado hreflang="x-default" es el respaldo para un visitante cuyo idioma de navegador no coincide con ninguno de los idiomas que has listado. Suele apuntar a una página selectora de idioma o a la página de inicio de tu mercado principal. El estudio de Ahrefs sobre 374.756 dominios que usan hreflang encontró que al 56,3% le faltaba esta única etiqueta, el hueco más común de todo el conjunto de datos.
En un proyecto con el App Router de Next.js, hreflang se genera desde el campo alternates.languages de la Metadata API, exportado desde un layout.tsx o page.tsx:
export const metadata = {
alternates: {
canonical: 'https://kalloslabs.com/blog/hreflang-implementation-multilingual-sites',
languages: {
'en-US': 'https://kalloslabs.com/blog/hreflang-implementation-multilingual-sites',
'es-ES': 'https://kalloslabs.com/es/blog/implementacion-de-hreflang',
},
},
}
Eso se traduce en las etiquetas estándar <link rel="alternate" hreflang="..."> en el head renderizado, pero la autorreferencia no es automática. Igual tienes que listar el idioma propio de la página actual dentro del objeto languages junto con cada alternativa, siguiendo exactamente la regla de autorreferencia de Google. Un detalle que suele atrapar a los equipos que migran un proyecto antiguo: la configuración de rutas i18n integrada del Pages Router no genera hreflang por sí sola. En un sitio con Pages Router, cada <link> de hreflang hay que añadirlo a mano mediante next/head, en cada página. Así es exactamente como aparecen con el tiempo los huecos descritos más abajo.
Si prefieres centralizarlo en el sitemap, la entrada de cada URL lleva un xhtml:link por cada idioma, incluido el suyo propio:
<url>
<loc>https://kalloslabs.com/blog/hreflang-implementation-multilingual-sites</loc>
<xhtml:link rel="alternate" hreflang="en-US" href="https://kalloslabs.com/blog/hreflang-implementation-multilingual-sites"/>
<xhtml:link rel="alternate" hreflang="es-ES" href="https://kalloslabs.com/es/blog/implementacion-de-hreflang"/>
</url>
Mismo clúster, mismas reglas de autorreferencia y reciprocidad, solo que declaradas una vez por URL en lugar de repartidas en el head renderizado de cada página. En un sitio con más de un puñado de pares de idiomas, este conjunto suele ser más fácil de auditar, porque toda la relación es visible en un solo archivo.
Errores comunes
Etiquetas no reciprocas o contradictorias. Search Engine Land informó que el 31% de los sitios web internacionales tiene directivas hreflang contradictorias, y una auditoría distinta de Ahrefs encontró que al 15,3% de los dominios le falta la etiqueta reciproca que permite a las páginas enlazarse entre sí. Ambos fallos vienen de la misma causa: se añadió un idioma a la lista de una página sin actualizar todas las demás páginas del clúster.
Hreflang contradice la etiqueta canónica. Hreflang dice "esta URL es la versión correcta para este idioma". Una etiqueta canónica desajustada en esa misma URL dice "esta no es la versión autorizada". Los motores de búsqueda resuelven esa contradicción de forma impredecible, el mismo tipo de problema que tratamos en general sobre datos estructurados en nuestra guía de schema markup: dos señales contradictorias en una misma página son peor que la ausencia de una sola señal.
Códigos de idioma o región inválidos. Ahrefs encontró códigos incorrectos en el 4,6% de los dominios de su muestra, cosas como UK en lugar de GB, o un código de país usado donde corresponde un código de idioma.
Hreflang que apunta a una URL rota o redirigida. El 16,9% de los dominios del estudio de Ahrefs tenía este problema. Los motores de búsqueda gastan presupuesto de rastreo intentando validar el par, y la señal de esa relación se pierde una vez que el destino no resuelve correctamente.
Bloquear el destino con robots.txt o una etiqueta noindex. Si la página a la que apunta una etiqueta hreflang no puede indexarse en primer lugar, la anotación no sirve de nada. Es fácil pasarlo por alto, porque es invisible en el HTML de la página que lleva la etiqueta. Hay que revisar el destino.
Falta de autorreferencia. El 18% de los dominios del estudio de Ahrefs, y el 16% del estudio de Search Engine Land, tenía páginas que no se listaban entre sus propias alternativas. Cada revisión de idiomas debería tratar esto como un punto de aprobado o reprobado, no como un detalle secundario.
Después de publicar un nuevo idioma, revisa todo el clúster, no solo la página nueva. Un solo idioma añadido puede romper la autorreferencia y la reciprocidad en todas las URLs existentes si la actualización afecta una plantilla compartida de forma incorrecta. Los datos de cobertura cercanos a la orientación internacional de Google Search Console y la propia validación de tu sitemap (la mayoría de los generadores de sitemap señalan una entrada hreflang que apunta a una URL fuera del sitemap) son las dos formas más rápidas de detectar un par roto antes de que un ciclo de rastreo agote tu presupuesto de rastreo intentando resolverlo. Nuestro propio trabajo de SEO y AEO para clientes que gestionan varios idiomas empieza precisamente con este tipo de auditoría a nivel de clúster, en lugar de una revisión página por página.
Preguntas frecuentes
¿Hreflang garantiza que Google muestre la versión de idioma correcta?
No. Google trata hreflang como una pista que sopesa junto con las etiquetas canónicas, la estructura del sitio y la similitud de contenido, no como una directiva. Una implementación técnicamente correcta mejora las probabilidades, pero no fuerza el resultado.
¿Necesito una etiqueta hreflang x-default?
No es obligatoria, pero Google la recomienda, y el estudio de Ahrefs sobre más de 374.000 dominios encontró que al 56,3% le faltaba una, el hueco de hreflang más común de ese conjunto de datos. x-default dirige a los visitantes sin coincidencia a una página selectora de idioma o a una página de respaldo razonable.
¿Puedo usar un código de región sin código de idioma, como solo UK?
No. Todo valor de hreflang debe empezar con un código de idioma ISO 639-1. Un código de región suelto, o una seudorregión no admitida como EU o UK, es inválido. La forma correcta para el inglés británico es en-GB.
¿Next.js genera las etiquetas hreflang automáticamente?
Solo en el App Router, y solo si lo configuras. El campo alternates.languages de la Metadata API genera las etiquetas link rel=alternate hreflang, pero igual tienes que listar explícitamente el idioma propio de la página actual como autorreferencia. La configuración i18n del Pages Router no genera hreflang en absoluto; esas etiquetas hay que añadirlas a mano en next/head.