Cómo implementar etiquetas HREFLANG en Shopify

Si no sabes qué son las etiquetas HREFLANG te enlazo un artículo donde hablo largo y tendido sobre estas etiquetas clave en el SEO¿Qué es el SEO? SEO, o Search Engine Optimization, es un conjunto de técnicas y estrategias que tienen como objetivo mejorar la visibilidad y la posición de un sitio web en los resultados de búsqueda de los motores de búsqueda. El SEO se puede dividir... Internacional que nos ayudan a indicar a los buscadores la versión indicada para cada visitante según su país / idioma.

Pero sino has pinchado en el enlace anterior y has seguido leyendo el artículo no te voy a dejar con la duda, aunque entiendo que si has aterrizado en este artículo buscando «cómo implementar etiquetas hreflang en shopifyShopify es una plataforma de comercio electrónico que permite a individuos y empresas crear sus propias tiendas en línea. Es popular por su facilidad de uso y por ofrecer una solución integral que abarca desde la creación de la tienda hasta la gestión de inventarios...» algo de idea sí que debes tener, pero aún así, lo repasamos.

Las etiquetas HREFLANG son etiquetas HTML, que nos permiten indicar (desde el código HTML, cabeceras HTTP o el sitemap XML) a los buscadores que existe una versión distinta de la URL que están rastreando y el idioma / país para el que va orientado ese contenido.

Y todavía más, sino sabes qué es Shopify, en este artículo te explicamos largo y tendido qué es Shopify, además de los pros y contras de su uso, y además tenemos un curso SEO específico para Shopify. ¿Qué no tienes tiempo y quieres que unos profesionales se encarguen del SEO de tu proyecto en Shopify? Estás en el lugar correcto, somos agencia SEO especializada en Shopify.

Código de una etiqueta Hreflang

Como hemos visto arriba, las Hreflang no son más que etiquetas HTML, que nos permiten indicar a los buscadores páginas alternativas por idioma y región (o únicamente idioma, pero no únicamente país) para de esta forma orientar cada URL en distinto idioma de nuestro ecommerce a cada usuario.

Piensa en las etiquetas Hreflang es como las señales de aeropuerto que te dicen a dónde ir dependiendo de tu vuelo.

Estas indicaciones ayudan a GoogleGoogle es uno de los principales motores de búsqueda en Internet y es utilizado por millones de personas en todo el mundo para encontrar información en línea. En términos de SEO (optimización de motores de búsqueda), Google es el principal motor de búsqueda que hay... (y otros buscadores) a saber qué versión de tu página mostrar a los usuarios en función de su idioma o ubicación.

Básicamente, le dice a los motores de búsqueda: «Oye, si este usuario habla francés, muéstrale la página en francés».

Variantes de hreflang

1. El clásico (hreflang=»es»):
   • Esta es la versión más básica. Simplemente le dice a Google que esta página es para hispanohablantes.
   • Ejemplo: <link rel="alternate" href="https://dominio.com/es" hreflang="es">
     
2. El específico de país (hreflang=»es-ES»):
   • Este es como decir «Español de España, por favor». Asegura que los visitantes de España vean la versión adecuada.
   • Ejemplo: <link rel="alternate" href="https://dominio.com/es-es" hreflang="es-ES">
     

El cajón de sastre: x-default

Ah, el x-default. Es como un cajón de sastre (una comparativa un poco viejuna, quizás…jaja), todo lo que no encaje con el resto de etiquetas Hreflang irá a parar ahí. Cuando un usuario aterriza sin un idioma específico, o con un idioma para el que no tenemos variante, deberá mostrarte la versión que indiquemos aquí, que generalmente será en el idioma más universal como el inglés y la home del sitio.

Ejemplo:

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

SEO Internacional en Shopify

Si tienes un ecommerce es lógico que dentro de tu estrategia de marketing se valore el crecimiento en otros mercados, esto es, tener presencia en otros países. Además del sinfín de temas que tendrás que tener en cuenta, uno de ellos será optimizar tu ecommerce de cara a mejorar el ranking orgánico en otros países, esto es lo que se conoce como SEO internacional.

Por suerte, a día de hoy, lanzar tu tienda a diferentes países con Shopify es muy sencillo con la opción de Markets, herramienta que te permite gestionar todos los mercados internacionales de tu tienda desde una sóla tienda, es decir, no tendrás que abrir otras cuentas en Shopify para orientarlas a distintos países, con el perjuicio en gastos de recursos que eso suponía.

Pues bien, una de las cosas, de la interminable lista, que tendrás que tener en cuenta para mejorar el posicionamiento orgánico en otros países es asegurarte que Google (u otros buscadores) muestran la versión específica para cada usuario (por idioma / región), y sí, debes tenerla si quieres trabajar bien el SEO.

Esto es, además de tener URLs traducidas para cada idioma, deberemos indicar a Google cuál es cuál.

Ej:

https://dominio.com/zapatos/hombre – Zapatos hombre, Español, España
https://dominio.com/shoes/men – Zapatos hombre, Inglés, Estados Unidos

Las etiquetas Hreflang válidas para esas URLs serían:

Tip: sino sabes qué códigos Hreflang necesitas, puedes recurrir a nuestro Hreflang Generator

¿Cómo añado etiquetas Hreflang a mi tienda Shopify?

Vale, ahora que ya sabemos qué son las etiquetas Hreflang y cómo nos pueden ayudar a optimizar el SEO internacional de nuestro proyecto, vamos a ver cómo podemos implementarlas en nuestra tienda Shopify.

Si nuestra tienda es pequeña podemos hacerlo de forma manual, es decir, añadir las etiquetas ya generadas una a una a cada URL, evidentemente si tenemos un gran número de URLs esta opción es inviable y veremos cómo hacerlo de forma automática para que Shopify genere las hreflang adecuadas para cada URL.

1. Añadiendo el código

Para empezar, debemos agregar el siguiente código en el archivo theme.liquid. Este archivo se encuentra en el editor de temas de Shopify, podemos acceder a él desde Tienda online -> Temas -> Editar código (abajo lo explico en detalle).

Código:

{{ content_for_header }}
{% assign localeString = "/" | append: request.locale.iso_code %}
<link rel="alternate" hreflang="es" href="https://midominio.com{{ request.path | remove: localeString }}" />
<link rel="alternate" hreflang="en" href="https://{{ request.host }}/en{{ request.path | remove: localeString }}" />
<link rel="alternate" hreflang="fr" href="https://{{ request.host }}/fr{{ request.path | remove: localeString }}" />

Este código está pensado para añadir etiquetas HREFLANG a idiomas ES, EN, FR. Si quieres añadir más idiomas o modificar los actuales tendrás que retocar el código.

Instrucciones:

1. Acceder al editor de temas:
   • En el panel de administración de Shopify, vaya a Tienda online > Temas
   • Haga clic en Acciones (tres puntitos) > Editar código
     
2. Editar el archivo theme.liquid:
   • En la sección de archivos del tema, busque y seleccione theme.liquid
   • Pegue el código proporcionado justo antes de la etiqueta </head>
     
3. Personalizar URLs:
   • Asegúrese de reemplazar midominio con su dominio real.
   • Personalice las líneas de código según los idiomas y regiones específicos que necesite.

2. Verificando

Una vez que haya agregado las etiquetas Hreflang, debe verificar que se están implementando correctamente.

Pasos:

1. Inspeccionar el código fuente:
   • Abra su página de inicio en un navegador.
   • Haga clic derecho en la página y seleccione View Page Source.
   • Use Ctrl + F para buscar hreflang y asegúrese de que las etiquetas estén presentes y correctas.
     
2. Herramientas online
   • Technical SEO hreflang Tags Testing Tool – Esta herramienta nosi permite comprobar que las hreflangs están bien implementadas y no tienen errores de reciprocidad, etiquetas que falten, etc…

3. Eliminar etiquetas Hreflang automáticas de Shopify Markets

Si activaste Shopify Markets y seleccionaste un montón de países / idiomas, te llevarás un buen susto cuando veas el código fuente y encuentres deceas (o centenas) de etiquetas hreflang para cada idioma / país.

Debemos priorizar y enlazar aquellas urls que realmente tenemos traducidas y optimizadas para posicionar en ese mercado.

Pasos:

1. Contactar a Soporte:
   • Acceda al centro de ayuda de Shopify.
   • Envíe una solicitud explicando que necesita eliminar las etiquetas Hreflang generadas automáticamente por Markets.
2. Esperar Confirmación:
   • Shopify hará las modificaciones necesarias en el código para que prevalezcan sus etiquetas personalizadas.

Referencias

📘 Documentación para desarrolladores Shopify sobre implementación de etiquetas Hreflang – ver aquí
📘 Comprendiendo las etiquetas Hreflang para tiendas multiidiomas – ver en el blog de Shopify