# Qué es hreflang y cómo se usa en una tienda online

> Qué es hreflang, cómo se declara en el HTML, en una cabecera o en el sitemap, qué hace Shopify por ti y cómo comprobar que tus versiones se enlazan bien.

URL: https://clione.ai/es/glosario/hreflang/
Lang: es

hreflang solo te afecta si tu tienda tiene más de una versión de sus páginas: en español y en inglés, o en español para España y para México. Si es tu caso, el problema que resuelve es concreto: **que quien busca en español llegue a la [ficha de producto](/es/glosario/ficha-de-producto/) en español** y no a la inglesa, y que las versiones regionales casi iguales no compitan entre sí como [contenido duplicado](/es/glosario/contenido-duplicado/). No es una etiqueta de traducción ni una redirección: es una lista de equivalencias que el buscador puede usar o no, según esté bien hecha.

## Cómo funciona

Google acepta tres maneras de declarar las versiones de una página, y las trata como equivalentes: elementos `<link>` en el `<head>` del HTML, cabeceras HTTP (útiles para archivos que no son HTML, como un PDF) o entradas en el [sitemap XML](/es/glosario/sitemap-xml/). Puedes usar las tres a la vez, pero **no ganas nada en la Búsqueda** y mantener tres implementaciones es más difícil que mantener una.[^google-localized]

Las reglas que hacen que funcione son pocas y estrictas:[^google-localized]

- **Cada versión se lista a sí misma y a todas las demás.** Si dos páginas no se señalan la una a la otra, Google ignora las etiquetas. El motivo es de seguridad: así nadie desde otro sitio puede declararse versión alternativa de una página tuya.
- **El código empieza por el idioma**, en formato ISO 639-1, y puede añadir la región en formato ISO 3166-1 alfa-2: `es`, `es-ES`, `en-GB`. Un código de país solo no vale, porque Google no deduce el idioma a partir del país.
- **`x-default` es la versión para todos los demás**: la que se ofrece a quien busca en un idioma que no está en la lista. Google la pensó para las páginas de selección de idioma.
- **Las URL van completas**, con `https://`, no relativas. Pueden estar en dominios distintos.

Hay dos cosas que hreflang no hace, y conviene tenerlas presentes. La primera: **Google no usa hreflang ni el atributo `lang` del HTML para saber en qué idioma está una página**; lo detecta con sus propios algoritmos, leyendo el texto.[^google-localized] La segunda: hreflang no mueve a nadie de una página a otra. Google pide usar una URL distinta para cada idioma, en lugar de cookies o ajustes del navegador, y evitar las redirecciones automáticas de un idioma a otro. Recuerda además que [Googlebot](/es/glosario/googlebot/) suele rastrear desde Estados Unidos: una tienda que redirige según la IP puede no dejarle ver nunca la versión española.[^google-multiregional] Lo que sí recomienda es poner enlaces visibles a las otras versiones, para que la persona pueda cambiar.[^google-multiregional]

Con la [canonical](/es/glosario/canonical/) se cruza de dos maneras. Google prefiere como canónicas las URL que forman parte de un grupo de hreflang, y pide que, si usas hreflang, **cada página declare una canonical en su mismo idioma**, o en el mejor sustituto si no existe una en ese idioma.[^google-consolidate] Tiene sentido: para Google, las versiones traducidas solo son duplicados si el contenido principal sigue sin traducir.[^google-localized]

Bing también recomienda hreflang para indicar el idioma y la región, y añade una advertencia que importa a las tiendas: **las páginas regionales casi idénticas generan contenido duplicado**. Su consejo es localizar con cambios reales, como la terminología, los ejemplos, la normativa o los datos del producto, y no crear varias páginas en el mismo idioma que sirvan para lo mismo.[^bing-duplicate]

## En una tienda

Un **ejemplo ficticio**: una tienda de material de montaña vende en España, en el Reino Unido y en el resto del mundo, con una carpeta por versión. Este es el `<head>` de la ficha de una mochila en su versión española:

```html
<head>
  <link rel="canonical" href="https://tienda.example/es/mochila-trek-25" />
  <link rel="alternate" hreflang="es" href="https://tienda.example/es/mochila-trek-25" />
  <link
    rel="alternate"
    hreflang="en-GB"
    href="https://tienda.example/uk/trek-25-backpack"
  />
  <link
    rel="alternate"
    hreflang="x-default"
    href="https://tienda.example/en/trek-25-backpack"
  />
</head>
```

La versión del Reino Unido repite las tres líneas `alternate` exactamente igual, y cambia solo su canonical, que apunta a sí misma. Esa es la pareja que tiene que cuadrar: **mismas alternativas en todas las versiones, una canonical propia en cada una**.

Si tu tienda está en Shopify, no tienes que escribir nada de esto a mano. Shopify añade las etiquetas hreflang automáticamente a través de `content_for_header`, que el tema imprime en el `<head>` de `layout/theme.liquid`. Un mercado de un país produce un código con región, como `en-us`, y uno más amplio, solo el idioma, como `fr`; las etiquetas se actualizan cuando cambias los dominios o los idiomas de un mercado. Si tu tema o una aplicación ya escriben sus propias etiquetas, Shopify recomienda **apagar las automáticas** en Tienda online, Preferencias, para que solo haya una fuente.[^shopify-hreflang]


Que hreflang le dice a Google en qué idioma está la página. No lo hace: Google detecta el idioma leyendo el contenido y no usa para eso ni hreflang ni el atributo `lang`.[^google-localized] Una ficha marcada como `es` con la descripción todavía en inglés sigue siendo, para Google, una página en inglés. hreflang solo relaciona versiones que ya existen, así que **primero se traduce y después se enlaza**.


## Cómo comprobarlo

1. **Abre el código fuente de una ficha** (Ctrl+U en Chrome) en cada idioma y busca `hreflang`. Cada versión tiene que listarse a sí misma y a todas las demás, con las mismas URL.[^google-localized]
2. **Revisa los códigos**: el idioma primero, la región después si la hay, y nunca un país solo. Los errores más comunes que cita Google son la falta de enlaces de vuelta y los códigos de idioma o de región mal escritos.[^google-localized]
3. **Abre cada URL de la lista** y confirma que carga la versión que dice, sin redirigirte a otra según tu ubicación.[^google-multiregional]
4. **Busca `rel="canonical"` en cada versión**: tiene que apuntar a una página en su mismo idioma, normalmente a sí misma.[^google-consolidate]
5. **En Shopify, cuenta las fuentes.** Si ves las etiquetas repetidas, el tema o una aplicación las está escribiendo además de Shopify, y hay que apagar una de las dos.[^shopify-hreflang]

## Concepto cercano: canonical

La canonical y hreflang se confunden porque las dos van en un `<link>` del `<head>` y las dos hablan de varias URL. Resuelven problemas opuestos. **La canonical elige una URL entre copias del mismo contenido**, por ejemplo la misma ficha abierta con un parámetro de campaña. **hreflang relaciona páginas distintas que dicen lo mismo en otro idioma**, y le pide al buscador que las mantenga todas, cada una para su público. Por eso una versión inglesa con canonical a la española es un error: le dice a Google que la inglesa es una copia y que no la indexe por separado, justo lo contrario de lo que pide hreflang.[^google-consolidate]

Para seguir, la [ruta de lectura de este tema](/es/aprender/rastreo-e-indexacion/) ordena el resto de términos, de cómo se descubre una URL a su [indexación](/es/glosario/indexacion/), y el [enlazado interno](/es/glosario/enlazado-interno/) explica cómo llegan los rastreadores a cada versión.
