Desde que trabajo con Shopify en nuestra agencia SEO, mi intención siempre es mejorar al máximo el SEO en este CMS
Pero siento que el nivel de personalización es limitado en opciones gratuitas y muchas requieren conocimiento de programación.
Hoy vengo a ayudarte con un código propio que implementa hreflang de forma sencilla, sin plugins y sin complicaciones, pero debe saber en qué casos te servirá esto.
Puedes ver mi Linkedin si deseas alguna referencia de mi trabajo,
Cuándo puedes implementar este código de hreflang a través de meta campos de Shopify
Shopify ya tiene una documentación para implementar Hreflang el en Theme Liquid, te dejo la documentación aquí.
Pero este código es distinto, en Shopify generalmente se agregan etiquetas hreflang de forma automática, ya sea en subcarpetas o subdominios.
Sin embargo pero cuando se trata de agregar hreflang en dominios independientes, todo es un caos.
Mi código te puede servir si:
- Necesitas personalizar las etiquetas hreflang según el producto o colección con dominios externos
- Has encontrado dificultades para implementar las etiquetas porque las urls no son idénticas y las opciones por defecto de Shopify no te sirve
- No tienes dinero para contratar a un experto o módulo pago
- Quieres experimentar nuevas soluciones.
Como agregar hreflang a Shopify con metacampos
Esta idea surgió cuando intentamos agregar las etiquetas a un cliente con 2 tiendas en cuentas separadas, aunque ambas en Shopify.
Si conoces el cms, cuando tienes un dominio activo en otra cuenta, la única forma de agregar ese dominio a otra tienda es desvinculando, pero no teníamos esa opción.
Quizá te interese: Cómo intentar mejorar el SEO de mi Shopify
Crea los meta campos, accediendo a datos personalizados en Shopify, en la configuración para ser más exactos.
Ahora en la lista, selecciona en qué tipo de páginas deseas agregar los metacampos, para este ejemplo utilizaré colecciones
Completando la información de los meta campos
Según los idiomas, puedes personalizar los datos y el código, en este caso necesitamos Hreflang para un sitio en inglés y español, por lo tanto se completará de la siguiente manera.
Para español:
- Name: Custom Spanish
- Namespace and key: custom.custom_spanish_url
- Descripción: Hreflang
- Tipo: URL
Y guardas, aquí te dejo la imágen
Para inglés:
- Name: Custom English
- Namespace and key: custom.custom_english_url
- Descripción: Hreflang
- Tipo: URL
Notas importantes
Son 2 meta campos, es decir, primero creas el de español, y luego creas el de inglés, debe lucir así cuando ya estén creados.
Revisa en colecciones
Verifica en colecciones si ya se crearon los metacampos, su funcionamiento es sencillo, agrega las urls correspondientes para hreflang.
Si estás en el sitio es español, en el Custom Spanish agregas la url actual de la colección, y en las Custom English añades la url de la variante de idioma, no importa el tipo de dominio y nombre de la url.
Haciendo que funcione el código hreflang en Shopify
Por el momento solo son meta campos, no hacen nada para mejorar el SEO de Shopify, pero agregaremos el código de Dysart Team para solucionar esto.
Sim embargo hay un detalle, este código solo funcionará según el idioma que configures en el código de la etiqueta.
Quizá te interese: Cómo elegir una agencia SEO
En este ejempo, está configurado para generar en enlace en español para «es-ES» y en inglés para «en-US», puedes hacer los ajustes necesarios para otros idiomas, de la misma forma como se hacen las etiquetas manualmente, o te dejo mi artículo para crear hreflang para SEO internacional.
Te dejo el código más abajo para que lo copies y pegues:
{% if template == 'collection' %}
{% assign custom_spanish_url = collection.metafields.custom.custom_spanish_url %}
{% if custom_spanish_url != blank %}
<link rel="alternate" hreflang="es-ES" href="{{ custom_spanish_url }}" />
{% endif %}
{% endif %}
{% if template == 'collection' %}
{% assign custom_english_url = collection.metafields.custom.custom_english_url %}
{% if custom_english_url != blank %}
<link rel="alternate" hreflang="en-US" href="{{ custom_english_url }}" />
{% endif %}
{% endif %}
¿Dónde debes agregar el código para hreflang en Shopify?
Este código debes añadirlo al theme.liquid en la configuración de Shopify:
Si aún no encuentras, está imagen te ayudará a encontrarlo:
En los 3 puntos al lado del botón “Customize” te saldrá editar código.
¿Cuál es el resultado de esto?
Al revisar el código, podemos apreciar que ya se ha agregado el código Hreflang, y dado solución a este tema.
Solo quedaría agregar en el otro sitio, las etiquetas referenciales para que tu hreflang funcione bien.
¿Te ha servido?
Déjanos tus comentarios si has tenido algún problema, y con gusto te ayudaremos. Si te ha servido, nos ayudarías mucho en este nuevo emprendimiento.
Si nos enlazas recomendando este contenido, o como agencia SEO en nuestra Home Page, estaremos muy agradecidos.
Esperamos verte por aquí de nuevo para ayudarte, nuestros canales están abierto a colaboraciones, no dudes en contactarnos.
