La Guía Completa de Hreflang 2026 (con Ejemplos en Next.js)

Tu sitio web puede ser técnicamente perfecto en inglés y aun así ser invisible para la mayor parte del mundo.

El inglés cubre solo el 49.7% de todo el contenido web (W3Techs, mayo de 2026). Esto significa que la otra mitad de la web opera en otros idiomas, y sin la señal correcta, Google tiene que adivinar qué versión de tu página pertenece a qué audiencia. Tus visitantes alemanes obtienen una página en inglés. Rebotan. Pierdes la conversión.

Hreflang es el atributo HTML que soluciona esto. Y está roto en la mayoría de los sitios multilingües.

En esta guía, explicamos qué es hreflang, cómo escribirlo sin los errores comunes que confunden a la mayoría de los desarrolladores, y exactamente cómo implementarlo en un proyecto Next.js 15 App Router, incluyendo los patrones que usamos al gestionar 10 variantes de idioma en compilaciones multilingües.

Puntos clave

• El 58% de los sitios web multilingües tienen conflictos internos de hreflang en su código fuente (Semrush, 2023)
• El 76% de los compradores en línea prefieren comprar en su idioma nativo; el 40% no comprará en absoluto en un sitio en un idioma diferente (CSA Research, 2020)
• Google trata hreflang como una sugerencia, no una directiva — las etiquetas poco fiables son ignoradas, pero el problema del contenido duplicado persiste
• En Next.js 15 App Router, alternates.languages dentro de generateMetadata() es el método de implementación correcto sin dependencias
• El 96% de los sitios con conflictos de hreflang carecen de la etiqueta de autorreferencia — una simple omisión rompe todo el clúster (Semrush, 2023)

¿Qué es Hreflang y por qué es importante para tu posicionamiento?

Solo el 25.9% de los usuarios de internet navegan principalmente en línea en inglés (Internet World Stats vía Wikipedia, 2025). Sin embargo, el trabajo de Google es servir a cada usuario contenido en su propio idioma, y sin hreflang, tiene que adivinar solo a partir de señales de contexto. Hreflang es un atributo HTML que le dice a Google con precisión qué idioma y versión regional de una página mostrar a cada usuario.

La sintaxis básica se ve así:

``html ``

Este bloque debe aparecer en todas las versiones de idioma de la página, incluida la versión en inglés que se enlaza a sí misma. Si falta esa autorreferencia en una sola página, todo el clúster hreflang para esa URL se vuelve poco fiable a los ojos de Google.

¿Por qué hacer esto correctamente mejora los resultados comerciales? Una encuesta de CSA Research a 8,709 consumidores en 29 países encontró que el 76% prefiere comprar productos con información en su idioma nativo, y el 65% elegiría una página en su idioma nativo incluso si la calidad de la traducción es inferior a una alternativa en inglés (CSA Research "Can't Read, Won't Buy", 2020). Hreflang no solo ayuda al posicionamiento, sino que determina si el tráfico traducido convierte.

La tasa de conflicto interno del 58% es sorprendente, pero la causa raíz es casi siempre la misma: los desarrolladores añaden hreflang a la plantilla de la página en inglés y olvidan replicar el clúster completo en las páginas traducidas. Una autorreferencia faltante en la página alemana invalida la conexión que Google necesita para confirmar que las páginas en inglés y alemán son variantes genuinas entre sí, no duplicados.

¿Cómo utiliza Google realmente Hreflang?

Esto es lo que la mayoría de las guías de hreflang omiten: Google confirmó que las etiquetas hreflang se tratan como sugerencias, no directivas. Google no penalizará un hreflang roto, sino que ignorará silenciosamente las etiquetas que considere poco fiables. El peligro radica en lo que sucede sin la sugerencia: Google trata tus variantes de idioma como páginas separadas que compiten por la misma palabra clave, a menudo mostrando el idioma incorrecto a los buscadores o creando una situación de contenido duplicado que compite consigo mismo.

El requisito de reciprocidad es la regla fundamental. Cada versión de idioma de una página debe incluir etiquetas hreflang que apunten a todas las demás versiones, incluida ella misma. Si tu página en inglés enlaza a la página en alemán, pero la página en alemán no enlaza de vuelta a la página en inglés, el clúster está roto.

Lo que Google valida en cada etiqueta hreflang: - El valor hreflang coincide con el idioma real de la página enlazada - El href es la URL canónica absoluta — las URL relativas fallan silenciosamente - Todas las páginas del clúster se referencian bidireccionalmente entre sí

Una discrepancia de idioma — declarar hreflang="de" en una página que en realidad está en inglés — le indica a Google que toda tu configuración de hreflang puede ser poco fiable. El estudio de Semrush encontró que el 21% de los sitios multilingües tienen este problema (Semrush, 2023). Esto suele ocurrir cuando una página aún no ha sido traducida pero sigue llevando etiquetas hreflang que apuntan al contenido en inglés.

Cómo escribir atributos Hreflang correctamente

La parte más propensa a errores de hreflang no es el nombre del atributo, sino el valor del código de idioma. Un estudio de Semrush encontró que el 15% de los sitios multilingües utilizan formatos de código hreflang inválidos, generalmente por confundir el carácter separador o mezclar códigos de idioma y país (Semrush, 2023).

Las reglas: - Usa códigos de idioma de dos letras ISO 639-1: en, de, fr, sv - Opcionalmente, combina con códigos de país ISO 3166-1 Alpha-2 usando un guion: en-GB, de-CH, pt-BR - Nunca uses guiones bajos — en_US es incorrecto; en-US es correcto - Siempre incluye x-default para la página de respaldo

Idioma previsto	Hreflang correcto	Valor incorrecto común
Inglés (global)	en	en-EN, english
Inglés (Reino Unido)	en-GB	en_GB, eng-UK
Alemán (Alemania)	de	ger, de_DE con guion bajo
Alemán (Suiza)	de-CH	ch, de_CH con guion bajo
Sueco	sv	sw, swe
Noruego Bokmål	nb	no
Portugués (Brasil)	pt-BR	pt_BR con guion bajo
Respaldo / selector	x-default	default, x_default

Las entradas de sueco y noruego son las más incomprendidas. El código ISO 639-1 del sueco es sv, no sw. El noruego tiene dos estándares escritos: nb (Bokmål) y nn (Nynorsk). La mayoría de los sitios noruegos deberían usar nb. Usar no en hreflang es técnicamente incorrecto, ya que no se asigna a una subetiqueta de idioma IANA válida.

El alemán suizo merece una nota aparte: ch es el código de país de Suiza, no un código de idioma. El valor hreflang para el contenido en alemán suizo es de-CH. Usar ch solo como valor hreflang es inválido y será ignorado.

Cómo implementar Hreflang en Next.js 15 App Router

El App Router de Next.js 15 hace que la implementación de hreflang sea limpia y nativa del framework, sin necesidad de paquetes SEO de terceros. Gestionamos 10 variantes de idioma en nuestras compilaciones multilingües (inglés, finés, francés, alemán, italiano, noruego, alemán suizo, serbio, español y sueco) y el patrón que se muestra a continuación es el que usamos en producción.

La clave es el campo alternates.languages dentro de generateMetadata(). Next.js lo renderiza automáticamente como etiquetas en , sin necesidad de renderizado personalizado.

Paso 1: Construir un mapeo explícito de códigos de idioma

Tus claves de idioma de URL internas no siempre coinciden con los códigos hreflang ISO. Construye un mapa explícito para evitar errores en tiempo de ejecución:

``typescript // src/lib/hreflang.ts export const HREFLANG_CODE: Record = { en: 'en', fi: 'fi', fr: 'fr', de: 'de', it: 'it', no: 'nb', // Noruego Bokmål — el código hreflang ISO es nb, no no ch: 'de-CH', // Alemán suizo — prefijo de URL /ch, valor hreflang de-CH sr: 'sr', es: 'es', sw: 'sv', // Sueco — clave interna sw, código hreflang ISO sv }; ``

Dos problemas reales en producción: el valor hreflang del noruego es nb, no no. Y el código ISO del sueco es sv — usar sw (que es internamente conveniente como prefijo de tabla de base de datos) en el atributo hreflang es inválido. Este mapa explícito es lo que evita que esos errores lleguen a producción.

Paso 2: Construir un ayudante getAlternates centralizado

```typescript // src/lib/hreflang.ts (continuación) const BASE_URL = 'https://fridamarketing.com'; const LANG_CODES = ['fi', 'fr', 'de', 'it', 'no', 'ch', 'sr', 'es', 'sw']; // Prefijo de URL para cada clave de idioma (ch → ¿no se necesita prefijo? no → /no) const LANG_URL: Record = { fi: 'fi', fr: 'fr', de: 'de', it: 'it', no: 'no', ch: 'ch', sr: 'sr', es: 'es', sw: 'sv', };

export function getAlternates(routeKey: string, currentLang?: string) { const languages: Record = { en: `${BASE_URL}/${routeKey}`, };

for (const lang of LANG_CODES) { const urlPrefix = LANG_URL[lang]; const hreflangCode = HREFLANG_CODE[lang]; languages[hreflangCode] = `${BASE_URL}/${urlPrefix}/${routeKey}`; }

const canonical = currentLang ? `${BASE_URL}/${LANG_URL[currentLang] || currentLang}/${routeKey}` : `${BASE_URL}/${routeKey}`;

return { canonical, languages: { ...languages, 'x-default': `${BASE_URL}/${routeKey}` }, }; } ```

Paso 3: Usarlo dentro de generateMetadata()

Para la página en inglés:

```typescript // app/about/page.tsx import { getAlternates } from '@/lib/hreflang';

export async function generateMetadata() { return { title: 'Sobre Nosotros | Frida Marketing', description: 'Agencia de desarrollo Next.js y SEO multilingüe.', alternates: getAlternates('about'), }; } ```

Para las variantes de idioma:

```typescript // app/[lang]/about/page.tsx import { getAlternates } from '@/lib/hreflang';

export async function generateMetadata({ params }: { params: { lang: string } }) { return { title: 'Sobre Nosotros | Frida Marketing', description: 'Agencia de desarrollo Next.js y SEO multilingüe.', alternates: getAlternates('about', params.lang), }; } ```

Next.js compila el objeto alternates.languages en el conjunto completo de etiquetas automáticamente. Cada idioma, incluida la autorreferencia para la página actual, se renderiza correctamente siempre que el mapeo esté completo.

Según una encuesta de DeepL y Regina Corso Consulting a profesionales de marketing senior en EE. UU., Alemania, Japón y Francia, el 96% informó un ROI positivo de los esfuerzos de traducción y localización, y el 65% reportó un retorno de 3x o más (BusinessWire, 2024). La sobrecarga técnica de un hreflang correcto es modesta en comparación con los ingresos que se obtienen.

¿Qué método Hreflang deberías usar?

Hay tres formas de declarar hreflang: etiquetas HTML , entradas en el sitemap XML o encabezados de respuesta HTTP. Las tres son válidas para Google; la elección correcta depende de tu pila tecnológica y volumen de contenido.

Método	Cómo funciona	Mejor para
Etiquetas HTML	inyectado en el de cada página	Next.js App Router vía generateMetadata()
Sitemap XML	dentro de cada bloque en sitemap.xml	Sitios gestionados por CMS, grandes volúmenes de páginas
Encabezados HTTP	Link: encabezado en la respuesta del servidor	Contenido no HTML (PDFs, puntos finales JSON)

Para Next.js, el enfoque de generateMetadata() es el predeterminado correcto. Mantiene las declaraciones hreflang ubicadas junto con la lógica de la página, se verifica el tipo en tiempo de compilación y no requiere mantenimiento de sitemap por separado. El enfoque del sitemap es un complemento útil en sitios grandes, pero no debería ser la única fuente de hreflang cuando el framework lo maneja de forma nativa.

Una cosa a tener en cuenta: puedes declarar hreflang tanto en las etiquetas como en el sitemap en el mismo sitio. Google acepta ambos y no entran en conflicto. Pero mantener dos fuentes de verdad para los mismos datos es algo a evitar; mantenlo en generateMetadata() y deja que el sitemap gestione la prioridad de rastreo por separado.

Cómo probar y validar tu configuración Hreflang

Desplegar hreflang es la mitad del trabajo. Validar que Google lo ha recogido correctamente es la otra mitad. Estas cuatro herramientas cubren diferentes modos de fallo; usa al menos dos.

Google Search Console — Informe de Orientación Internacional Después de desplegar, abre GSC → Herramientas heredadas → Orientación Internacional. Muestra qué variantes de idioma ha indexado Google y marca cualquier error de configuración de hreflang detectado. Esta es tu verdad fundamental: si GSC muestra una bandera de idioma o región levantada, investiga antes que nada.

Auditoría de sitio de Semrush Ejecuta una auditoría completa y filtra los problemas de hreflang. Semrush detecta autorreferencias faltantes, URLs hreflang rotas y discrepancias de idioma, los tres modos de fallo más comunes en 20,000 sitios probados.

Auditoría de sitio de Ahrefs Ahrefs informa sobre qué páginas faltan en un clúster hreflang completo, lo cual es valioso cuando tienes 10 idiomas y necesitas confirmar que cada variante hace referencia cruzada a todas las demás. Encuentra lagunas que Semrush a veces pasa por alto.

hreflang.org — verificador gratuito de URL única Pega una URL, obtén todas sus etiquetas hreflang mostradas y verifica que el clúster sea recíproco. Rápido para verificaciones puntuales durante el desarrollo antes de una auditoría completa del sitio.

Una cosa que las herramientas de auditoría no detectarán: hreflang que es técnicamente válido pero semánticamente incorrecto. Si declaras hreflang="de-CH" en una página que sirve contenido genérico en alemán en lugar de contenido en alemán suizo, las etiquetas pasarán todos los validadores. Pero Google eventualmente inferirá de las señales de comportamiento que los usuarios suizos no están siendo bien atendidos, y la confianza en tu clúster hreflang disminuirá con el tiempo. La validación técnica es solo la base; el objetivo real es hacer coincidir el contenido con la configuración regional declarada.

---

Construimos sitios Next.js multilingües con una implementación completa de hreflang desde el primer día: mapeo correcto de códigos de idioma, sitemaps traducidos, marcado de esquema específico por idioma y auditorías estructuradas de hreflang después del lanzamiento. Ponte en contacto para discutir tu proyecto, o consulta nuestros precios para paquetes de desarrollo multilingüe y SEO.

---

Preguntas Frecuentes

¿Qué es hreflang y para qué sirve?

Hreflang es un atributo de enlace HTML que le dice a Google qué versión de idioma de una página debe servir a los usuarios en regiones o idiomas específicos. Una implementación correcta evita que Google muestre la versión de idioma incorrecta, reduce la tasa de rebote y evita penalizaciones por contenido duplicado entre variantes de idioma.

¿Hreflang mejora directamente el posicionamiento en Google?

Google trata hreflang como una sugerencia, no una directiva; ignora las etiquetas que considera poco fiables. Una implementación correcta evita que se muestre el idioma incorrecto a los buscadores, reduciendo la tasa de rebote y mejorando las señales de engagement que indirectamente elevan el posicionamiento. Un hreflang roto crea una competencia de contenido duplicado entre tus propias variantes de idioma.

¿Cuáles son los errores más comunes de hreflang?

Un estudio de Semrush sobre 20,000 sitios web multilingües encontró que el 58% tiene conflictos internos en el código fuente, el 37% enlaza a URLs rotas o redirigidas, el 21% tiene una discrepancia de idioma entre el valor hreflang declarado y el idioma real de la página, y el 15% utiliza códigos de idioma o país inválidos (Semrush, 2023).

¿Cómo implemento hreflang en Next.js 15 App Router?

En Next.js 15, exporta un objeto alternates.languages desde generateMetadata(). Usa códigos de idioma ISO 639-1 como claves y URLs canónicas absolutas como valores. Incluye x-default apuntando a tu configuración regional predeterminada. Next.js renderiza automáticamente estos como etiquetas en el encabezado del documento, sin necesidad de renderizado separado o librerías de terceros.

¿Para qué se utiliza x-default hreflang?

x-default designa una página de respaldo para usuarios cuyo idioma o región no coincide con ninguno de tus valores hreflang declarados. Suele ser la versión en inglés o una página de destino con selector de idioma. Inclúyela siempre: le indica a Google que has tenido en cuenta intencionadamente a los visitantes de ubicaciones no listadas, en lugar de simplemente omitir la etiqueta.

Conclusión

Hreflang es uno de esos elementos técnicos de SEO que es fácil de hacer parcialmente bien y difícil de hacer completamente bien. La sintaxis es simple, pero los modos de fallo — autorreferencias faltantes, URLs relativas, códigos ISO incorrectos, enlaces no recíprocos entre variantes de idioma — son sutiles y no aparecen como errores visibles hasta que estás viendo el idioma incorrecto posicionando en el mercado equivocado.

En Next.js 15, la API alternates.languages en generateMetadata() maneja el renderizado de forma limpia y sin paquetes adicionales. La verdadera inversión está en la capa de mapeo: asegurarse de que cada clave de idioma interna se resuelva a un código hreflang ISO válido, y que las URLs canónicas que pasas sean absolutas y apunten a la página que realmente se está indexando.

Si estás construyendo un sitio Next.js multilingüe y quieres una revisión de tu configuración de hreflang, ponte en contacto — identificaremos exactamente qué clústeres tienen problemas antes de que Google los marque.