Todo lo que necesitas saber sobre Hreflang y Shopify

Con más y más tiendas Shopify internacionalizándose, nunca ha sido tan importante cuidar las posiciones en los motores de búsqueda. Si bien la expansión a nuevas regiones crea nuevas y emocionantes oportunidades de mercado, también puede presentar serios desafíos de SEO.

Los principales problemas de SEO que presenta la expansión internacional son:

• Ayudar a los motores de búsqueda a comprender qué página debe clasificarse para qué región/idioma
• Evitar que las páginas específicas de una región o idioma creen problemas de contenido duplicado

En este artículo, le presentamos una función llamada Hreflang que se utiliza para resolver estos problemas internacionales de SEO.

¿Por qué necesitamos Hreflang?

En primer lugar, ¿por qué necesitamos hreflang?

Cuando una marca tiene varios sitios web destinados a diferentes regiones, ¿cómo saben los motores de búsqueda qué sitio está destinado a qué región?

Permítanme usar la marca de fitness Gymshark para ilustrar esto. Gymshark usa Shopify y tiene diferentes sitios web destinados a diferentes audiencias:

Reino Unido - https://uk.gymshark.com

Alemania - https://de.gymshark.com

Francia - https://fr.gymshark.com

Estos sitios están traducidos a sus idiomas nativos, lo que le da a Google una pista masiva a qué región pertenece cada sitio. Pero entonces Gymshark también tiene un sitio web de EE. UU. y un sitio web canadiense:

EE. UU. - https://www.gymshark.com Canadá - https://ca.gymshark.com/

El contenido de estos dos sitios web está en inglés. Entonces, ¿cómo los motores de búsqueda los diferencian del sitio web en inglés del Reino Unido y se aseguran de que cada sitio se clasifique en la región correcta?

Aquí es donde entra hreflang.

¿Qué es Hreflang?

Hreflang es un atributo HTML que indica a los motores de búsqueda cuando hay versiones alternativas de una página destinada a una audiencia de región/idioma diferente.

Hreflang se puede implementar de diferentes maneras, pero la más común es una metaetiqueta simple que se coloca en cualquier página que tenga versiones alternativas. Aquí hay un ejemplo de Gymshark:

 <link rel="alternate" href="https://www.gymshark.com/" hreflang="en-us" />

Esta etiqueta hreflang se encuentra en la página de inicio de Gymshark del Reino Unido "https://uk.gymshark.com/".

Le dice a los motores de búsqueda que la versión estadounidense de esta página se puede encontrar en "https://www.gymshark.com/".

La etiqueta hreflang contiene dos atributos clave:

1 - Href El href es un enlace a la página alternativa. Tiene que ser la dirección URL completa y debe ser una página de trabajo. Le dice a los motores de búsqueda "esta es una versión alternativa de la página que se está viendo actualmente".

2 - Hreflang El atributo hreflang contiene el código de idioma (ISO 639-1) y, opcionalmente, el código de país (ISO 3166-1) del público objetivo de la página alternativa. El código de país es opcional pero el código de idioma es un requisito.

Algunos ejemplos de atributos hreflang que usan diferentes combinaciones de orientación por idioma/país:

• es - hablantes de inglés
• es-ES - Hablantes de inglés en el Reino Unido
• fr-FR - Hablantes de francés en Francia
• es-US - Hablantes de inglés en los EE. UU.
• es - hablantes de italiano
• it-CH - Hablantes de italiano en Suiza.

Al unir 'href' y 'hreflang', los motores de búsqueda sabrán que esta URL alternativa (href) está destinada a esta audiencia específica (hreflang).

Páginas alternativas

Es importante recordar que hreflang funciona a nivel de página y no a nivel de dominio. Las etiquetas Hreflang declaran 'páginas alternativas', no 'sitios web alternativos'. Muchos sitios web usan etiquetas hreflang para declarar páginas específicas de idioma/región alternativas en el mismo dominio.

Por ejemplo, puede usar subcarpetas para alojar versiones alternativas de idioma/región de su sitio. Así es como Apple configura sus sitios web internacionales usando carpetas:

• Reino Unido: https://www.apple.com/uk/
• ES: https://www.apple.com/es/
• FR: https://www.apple.com/fr/

X-Predeterminado

Hay un valor alternativo especial de hreflang llamado 'x-default'. Piense en 'x-default' como los motores de búsqueda de páginas web deberían clasificarse cuando ningún otro enlace hreflang coincida con el idioma/región del buscador.

Usando Gymshark como ejemplo nuevamente. Tienen una tienda para el resto del mundo ubicada en row.gymshark.com. Esto se declara como x-default.

 <link rel="alternate" href="https://row.gymshark.com/" hreflang="x-default" />

Entonces, si alguien busca en un idioma/ubicación que no está declarado en las etiquetas hreflang de Gymshark, lo más probable es que Google muestre la tienda RoW de Gymshark.

¿Necesita agregar Hreflang?

Solo necesita agregar etiquetas Hreflang cuando tiene dos páginas casi idénticas que atienden audiencias regionales o de diferentes idiomas. Si no hay una versión alternativa de una página, no necesita agregar etiquetas hreflang.

Reglas Hreflang

Para que las etiquetas hreflang se validen, deben seguir reglas específicas:

1 - Vínculos de retorno : si una página hreflang vincula a una página alternativa, la página alternativa debe vincular hreflang a la primera página. Por ejemplo, si un Gymshark del Reino Unido tiene un enlace hreflang que apunta a una página de Gymshark en alemán, la página alemana debe tener un enlace hreflang a la versión del Reino Unido.

2 - Páginas de trabajo : cualquier página a la que enlace hreflang debe devolver un código de estado 200. En otras palabras, los enlaces hreflang tienen que ser páginas de trabajo.

3 - Etiqueta Hreflang autorreferenciada : cualquier página que incluya enlaces hreflang también debe tener un enlace hreflang a sí misma. A esto lo llamamos enlace hreflang autorreferenciado. El enlace hreflang autorreferenciado debe incluir la declaración estándar de idioma/país.

Desafíos Hreflang

Ahora que hemos establecido qué es hreflang y cómo funciona, podemos analizar por qué es una parte tan compleja del SEO. De hecho, hreflang es probablemente una de las partes más difíciles de SEO para hacerlo bien.

Aquí hay un tweet del analista de tendencias para webmasters de Google, John Mueller, que explica lo difícil que puede ser hreflang.

Agregar las etiquetas es bastante simple, pero mantener etiquetas hreflang que cumplan con las 3 reglas anteriores puede ser extremadamente desafiante.

Para validar siempre, las etiquetas hreflang entre diferentes páginas deben estar sincronizadas. Algo tan simple como cambiar una URL podría romper la conexión hreflang entre dos páginas.

Cuando tienes más de un sitio web, con páginas dinámicas y administrado por diferentes equipos, puedes comenzar a imaginar lo complejo que se vuelve esto. Si tiene varios sitios web, debe asegurarse de que sus equipos se coordinen para asegurarse de que sus etiquetas hreflang no se rompan.

Errores Hreflang

Nos ocupamos de configuraciones de hreflang rotas todo el tiempo. Estos son los problemas de hreflang más comunes que encontramos:

Sin enlaces de retorno

Con mucho, el problema de Hreflang más frecuente que vemos son las páginas en las que no hay enlaces Hreflang de retorno. Aquí es donde debe estar organizado para asegurarse de que sus etiquetas hreflang siempre funcionen. Si la ruta de la URL cambia en una página pero no en la otra, las etiquetas hreflang no estarán sincronizadas.

No 200 páginas

Las etiquetas Hreflang deben apuntar a páginas de trabajo que devuelvan una respuesta del servidor 200. A medida que su sitio web evoluciona, las URL cambian. Esto romperá sus etiquetas hreflang, por lo que si retira y redirige las páginas, asegúrese de actualizar también las etiquetas hreflang.

Sin etiqueta Hreflang autorreferenciada

Puede parecer extraño, pero si una página tiene etiquetas hreflang, también debe incluir una etiqueta hreflang autorreferenciada. Este es un error común que cometen muchos sitios web.

Cómo comprobar las etiquetas Hreflang

Comprobador de etiquetas Hreflang

La forma más fácil de auditar etiquetas hreflang es usando una extensión de Chrome llamada Hreflang Tag Checker. Una vez instalada la extensión, simplemente visite cualquier página y presione el icono de la barra de herramientas. Luego, la extensión verificará si hay etiquetas hreflang en la URL actual.

La mejor característica de esta herramienta es que realmente rastreará los enlaces hreflang y confirmará que pasan las comprobaciones de validación.

Rana Gritando

Si desea auditar etiquetas hreflang a escala, Screaming Frog es su herramienta de referencia. Screaming Frog rastreará un sitio web y validará cualquier etiqueta hreflang descubierta durante el rastreo.

Consola de búsqueda

Hay un informe de Orientación internacional oculto en la sección Informes heredados en Search Console. Para acceder a este informe, en el menú de la izquierda, vaya a "Herramientas e informes heredados > Orientación internacional".

Este informe mostrará cuántas etiquetas hreflang hay en su sitio web y detallará dónde hay errores de hreflang.

Diferentes formas de agregar Hreflang

Hay más de uno para implementar Hreflang. El método de etiqueta HTML descrito anteriormente es, con mucho, la forma más fácil de configurar hreflang, pero existen dos enfoques alternativos:

Mapa del sitio XML

Es posible que esté familiarizado con los mapas de sitio XML. Su mapa del sitio XML se puede actualizar para incluir declaraciones hreflang para cada página dentro del mapa del sitio. Para sitios web grandes con sistemas complicados, este suele ser el enfoque más fácil.

Encabezados HTTP

Cada vez que un navegador web visita una página, el servidor devuelve información sobre esa página a su navegador web. Esto se llama la respuesta HTTP. Puede configurar su servidor para devolver información hreflang en la respuesta del encabezado HTTP.

Cómo agregar Hreflang a Shopify

Entonces, ¿cómo agregas etiquetas hreflang a Shopify? Como la mayoría de los sistemas de administración de contenido, Shopify tiene matices que afectan lo que puedes y no puedes hacer en la plataforma. Si bien es posible agregar hreflang a Shopify a través del mapa del sitio XML o los métodos de encabezados HTTP, requiere una configuración técnica significativa, por lo que no lo recomendamos.

Para los sitios web de Shopify, nuestro enfoque recomendado para implementar Hreflang es siempre etiquetas HTML. Agregar físicamente etiquetas hreflang a su sitio es bastante fácil, pero debe hacerlo de una manera que garantice que sus etiquetas hreflang siempre se validen. Recuerda las tres reglas anteriores:

• Debe haber un enlace hreflang de retorno desde la página alternativa
• La página alternativa debe ser una URL que funcione.
• Tiene que haber una etiqueta hreflang autorreferenciada en cualquier página que incluya etiquetas hreflang

Agregue Hreflang a Shopify a través de una aplicación

Hay algunas aplicaciones de Shopify que agregan etiquetas Hreflang a tus páginas por ti. Las aplicaciones de traducción como Weglot y Langify generarán automáticamente sus etiquetas Hreflang y las agregarán a sus páginas.

Si bien las aplicaciones pueden agregar etiquetas hreflang a tu tienda Shopify, según nuestra experiencia, este no es el mejor método. El enfoque de la aplicación solo funciona cuando tiene una sola tienda que ofrece varios idiomas. La mayoría de las aplicaciones no brindan orientación hreflang de idioma + país ni tienen en cuenta varias tiendas en diferentes dominios. Las aplicaciones de Shopify no son nuestro enfoque recomendado para hreflang.

Agregue etiquetas Hreflang a su archivo theme.liquid

Si tiene dos tiendas con páginas y URL idénticas (donde solo el dominio es diferente), agregar etiquetas hreflang válidas puede ser bastante fácil. Como los dos sitios web son clones completos, sabe que para cada página en el Sitio A, hay un equivalente en el Sitio B.

Por lo tanto, puede editar el código de su tema para construir dinámicamente sus etiquetas hreflang utilizando la ruta URL de la página que se está viendo.

Eso es lo que hace el siguiente código líquido:

 <link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" hreflang="en-GB" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.us.mystore.com' }}" hreflang="en-US" />

Este fragmento de código se puede agregar a la sección de su archivo theme.liquid. Debe reemplazar las instancias de 'mystore.com' con sus nombres de dominio reales. Cuando este fragmento esté en su lugar, sus páginas generarán etiquetas hreflang utilizando la página canónica para construir la ruta de la URL.

Como este método implica editar el código de tu sitio web, si eliges este enfoque, te recomendamos que contrates a un experto de Shopify para que aplique el cambio por ti.

Usar un campo personalizado (enfoque recomendado de Shopify Hreflang)

¿Cómo se agregan etiquetas Hreflang en múltiples sitios web de Shopify con miles de productos donde los identificadores de URL no coinciden? No tendrá tiempo para agregar etiquetas hreflang página por página y una aplicación no puede hacerlo por usted.

En este escenario, recomendamos usar otra aplicación llamada Campos personalizados. Con los campos personalizados, puede crear metacampos completamente nuevos en su sitio web. Cada vez que nos enfrentamos a situaciones complejas de hreflang en Shopify, recomendamos a nuestros clientes que utilicen campos personalizados para crear un metacampo de hreflang. El valor del metacampo hreflang se envía al sección de la página.

Con este enfoque, puede crear sus propias etiquetas hreflang en Excel y luego agregarlas directamente en el campo personalizado página por página.

Aún mejor, si tiene el plan Custom Fields Plus, puede importar las etiquetas hreflang de su producto a través de una carga csv. Regularmente usamos este enfoque para cargar miles de etiquetas hreflang de productos a Shopify en minutos.

Si bien este enfoque no es el más simple porque necesita configurar el metacampo personalizado (que requiere un Shopify Expert) y crear sus propias etiquetas hreflang, es, con mucho, el más efectivo para la administración de hreflang de Shopify a gran escala. Si desea una manera fácil de crear sus propias etiquetas hreflang, le recomendamos el generador de etiquetas hreflang gratuito de Aleyda Solis.

Dominios Internacionales (Nuevo)

Shopify anunció recientemente una nueva función llamada Dominios internacionales. Este desarrollo permitirá a los comerciantes de Shopify mostrar su tienda en un dominio/subdominio alternativo dirigido a un idioma/país diferente.

Con Dominios internacionales, usted registra un dominio/subdominio alternativo utilizando el código ISO de 2 letras del país de destino (p. ej., gb.sudominio.com). Shopify luego configurará automáticamente las etiquetas hreflang en cada dominio/subdominio. Las instrucciones completas sobre cómo hacer esto se pueden encontrar en Shopify.

Los dominios internacionales tienen algunos inconvenientes. Tendrá que alojar exactamente las mismas páginas y productos en todos sus dominios, lo que no se adaptará a todos los comerciantes. Tampoco podrá editar su contenido en diferentes dominios (excepto las traducciones).

Dicho esto, este es un gran paso adelante y demuestra que Shopify ha escuchado a los comerciantes. Estamos seguros de que, con el tiempo, los dominios internacionales se convertirán en nuestra solución hreflang recomendada para Shopify.

¿Necesita ayuda con Hreflang?

Administrar hreflang es una de las partes más complejas del SEO. Nuestro equipo de SEO gestiona con éxito el SEO internacional para docenas de sitios web. Si necesita ayuda para optimizar su SEO internacional, háganoslo saber.