Cómo implementar correctamente hreflang con Shopify Markets (con ejemplos de código)

Shopify Markets genera automáticamente las etiquetas hreflang de los mercados activos cuando usas las funciones de localización integradas, pero solo si tu tema está bien estructurado. Las etiquetas hreflang mal configuradas o ausentes son una de las razones más comunes por las que las tiendas internacionales de Shopify no logran posicionarse en sus regiones objetivo. Esta guía te da el código Liquid exacto y los pasos para resolver problemas que necesitas para hacerlo bien.

Lo que Shopify Markets maneja automáticamente (y lo que no)

Desde que Shopify Markets se lanzó con un soporte más profundo de hreflang, muchos dueños de tiendas dan por hecho que las etiquetas aparecen automáticamente sin importar la configuración. Esa suposición provoca fallas de SEO silenciosas. Esto es exactamente lo que Shopify maneja por sí solo frente a lo que tienes que configurar manualmente:

• Automático: Etiquetas hreflang para mercados que usan subcarpetas (por ejemplo, /fr-fr/, /de/) cuando el tema usa correctamente el objeto Liquid localización.
• Automático: La etiqueta x-default que apunta a la URL de tu mercado principal.
• No automático: Hreflang para dominios o subdominios específicos por país: requieren implementación manual o una app de terceros.
• No automático: Las etiquetas correctas en temas que han sobrescrito o eliminado el bloque Liquid content_for_header.
• No automático: Las etiquetas cuando un mercado está configurado pero no existen traducciones publicadas para ese idioma.

El código Liquid principal: cómo agregar hreflang a tu tema

Abre el archivo layout/theme.liquid de tu tema. Dentro del bloque <head>, verifica que {{ content_for_header }} esté presente y sin modificaciones. Shopify inyecta las etiquetas hreflang a través de esta etiqueta. Si falta o está envuelta en una condición que la suprime, las etiquetas hreflang no se mostrarán.

Si necesitas un control explícito (por ejemplo, para admitir dominios orientados por país), agrega este fragmento de Liquid directamente en tu bloque <head>:

{% comment %} Hreflang for Shopify Markets {% endcomment %}
{% for market in shop.markets %}
  {% if market.enabled %}
    {% for locale in market.published_locales %}
      <link
        rel="alternate"
        hreflang="{{ locale.iso_code | downcase }}-{{ market.primary_domain.country | upcase }}"
        href="{{ market.primary_domain.url }}{{ canonical_url | remove: shop.primary_domain.url }}"
      />
    {% endfor %}
  {% endif %}
{% endfor %}
<link rel="alternate" hreflang="x-default" href="{{ canonical_url }}" />

Nota importante: El objeto shop.markets y las propiedades market.primary_domain requieren la arquitectura de temas Online Store 2.0 de Shopify. Si usas un tema Legacy (anterior a 2.0), actualiza el tema antes de depender de este enfoque.

Subcarpeta vs. dominio: diferencias de implementación

Tipo de configuración Origen de hreflang ¿Requiere código manual? Notas Subcarpetas (/fr/, /de-de/) Inyectado mediante content_for_header No, si el tema es OS 2.0 La más confiable; opción recomendada por defecto Dominios específicos por país (example.fr) No automático Sí Requiere Liquid manual o una app de Shopify Subdominios (fr.example.com) No automático Sí Menos común; mismo requisito manual que los dominios Un solo dominio, solo varias monedas N/A: no hay diferencia de idioma No Los mercados que solo cambian de moneda no necesitan hreflang

Implementación paso a paso para mercados con subcarpetas

1. Activa el mercado en el Admin de Shopify: Ve a Configuración → Mercados, crea o activa el mercado objetivo y asígnale un idioma principal.
2. Agrega al menos una traducción publicada: Usa Shopify Translate & Adapt o una app de traducción compatible. Un mercado sin traducciones publicadas no activará la inyección de hreflang.
3. Verifica content_for_header en theme.liquid: Busca la cadena en el archivo. Debe aparecer exactamente una vez, sin condiciones, dentro de <head>.
4. Revisa el código fuente generado: Visita una página de producto en la URL de subcarpeta de tu mercado (por ejemplo, yourstore.com/fr/products/example), haz clic derecho → Ver código fuente de la página y busca hreflang. Deberías ver una etiqueta por cada idioma activo, más x-default.
5. Envía un sitemap actualizado: El sitemap que Shopify genera automáticamente en /sitemap.xml incluye las URL alternativas de los mercados activos. Vuelve a enviarlo a Google Search Console después de activar nuevos mercados.

Cómo resolver problemas de hreflang en Shopify: 6 errores comunes

1. Las etiquetas no aparecen en absoluto

content_for_header no está o está dentro de un bloque condicional. Restáuralo sin condiciones dentro de <head> en theme.liquid.

2. Solo aparece la etiqueta del idioma principal

El mercado está activo, pero no tiene traducciones publicadas. Publica al menos un recurso traducido (aunque sea parcial) para activar la etiqueta alternativa de ese mercado.

3. Formato incorrecto del código de idioma

Google exige el formato BCP 47: en-US, fr-FR, de-DE. El locale.iso_code de Liquid en Shopify devuelve códigos en minúsculas como en o fr. Si estás creando las etiquetas manualmente, agrega el código de país usando | upcase en el segmento del país, como se muestra en el ejemplo de código anterior.

4. Las etiquetas recíprocas no están en todas las páginas

Cada página referenciada por una etiqueta hreflang debe incluir a su vez el conjunto completo de etiquetas hreflang que apuntan de regreso a todas las demás variantes. Las etiquetas que inyecta Shopify manejan esto automáticamente en configuraciones con subcarpetas. Para implementaciones manuales en dominios personalizados, usa un bucle que genere todos los mercados en cada página, no solo el idioma de la página actual.

5. x-default apunta a una URL localizada

x-default debe apuntar a la raíz de tu dominio principal (por ejemplo, https://yourstore.com/products/example), no a una ruta localizada. En el ejemplo de Liquid anterior, canonical_url en el dominio principal maneja esto correctamente.

6. Hreflang presente en el sitemap pero no en el <head> de la página

Google acepta hreflang en los sitemaps o en los encabezados de la página, pero no una combinación en la que se contradigan. Si el sitemap de Shopify incluye URL alternativas pero tu código personalizado en <head> genera otras distintas, Google las trata como señales contradictorias. Elige un método y aplícalo de forma consistente.

Cómo validar tu implementación

Usa estas herramientas para confirmar que hreflang se genera correctamente antes y después del despliegue:

• Google Search Console → informe de Segmentación internacional: Muestra los errores de hreflang detectados en tus páginas indexadas.
• Ahrefs Site Audit o Screaming Frog SEO Spider: Ambos rastrean las etiquetas hreflang y señalan los enlaces recíprocos faltantes, los formatos incorrectos y las URL alternativas que no devuelven 200.
• Herramienta de prueba de etiquetas de hreflang.org: Pega una URL para validar al instante las etiquetas hreflang de esa página específica.
• Ver código fuente + Ctrl+F "hreflang": Una revisión manual rápida durante el desarrollo. Hazla siempre en al menos una página por mercado después de cada cambio.

Conclusiones clave

• Shopify Markets inyecta hreflang automáticamente en configuraciones con subcarpetas en temas OS 2.0, pero solo cuando hay traducciones publicadas y content_for_header está intacto.
• Los dominios orientados por país requieren código Liquid manual o una app de terceros.
• Valida siempre con Google Search Console y una herramienta dedicada de auditoría de hreflang después de activar nuevos mercados.
• Usa el formato BCP 47 (en-US, no solo en) e incluye siempre una etiqueta recíproca x-default.

¿Shopify agrega automáticamente las etiquetas hreflang cuando activo un nuevo mercado?

Sí, en los mercados basados en subcarpetas con temas Online Store 2.0, Shopify inyecta las etiquetas hreflang mediante content_for_header, pero solo después de que publicas al menos una traducción para ese mercado. Los mercados sin traducciones publicadas no generan etiquetas alternativas.

¿Necesito una app para implementar hreflang en Shopify?

No, en los mercados con subcarpetas en temas OS 2.0 no se necesita ninguna app. Sí necesitas una app o código Liquid personalizado en configuraciones con dominios específicos por país (por ejemplo, yourstore.fr), donde Shopify no inyecta hreflang automáticamente.

¿Cuál es el formato correcto de hreflang para Shopify Markets?

Usa el formato BCP 47: un código de idioma en minúsculas combinado con un código de país en mayúsculas, separados por un guion, por ejemplo en-US, fr-FR o de-DE. El locale.iso_code de Liquid en Shopify devuelve solo la parte del idioma, así que agrega el código de país manualmente si creas las etiquetas fuera de content_for_header.

¿Cómo compruebo si mis etiquetas hreflang de Shopify funcionan?

Revisa el código fuente de una URL localizada (por ejemplo, /fr/products/your-product) y busca "hreflang". Deberías ver una etiqueta por cada idioma de mercado activo, más una etiqueta x-default. Luego verifica en Google Search Console, en el informe de Segmentación internacional, si hay errores a nivel de rastreo.

¿Puedo usar hreflang en mi sitemap de Shopify en lugar del head de la página?

Sí, Google acepta hreflang en los sitemaps XML como alternativa a las etiquetas en <head>. El sitemap que Shopify genera automáticamente en /sitemap.xml incluye las URL alternativas de los mercados activos. Evita usar ambos métodos al mismo tiempo si producen valores distintos, porque las señales contradictorias harán que Google ignore ambos.